Frontend 101 Initializing a Frontend Project using React
Download as PPTX, PDF0 likes157 views
The document discusses initializing a frontend project using React, including choosing a language like React, adding linting and testing tools, using bundlers and CLIs like Create React App, incorporating UI frameworks, and setting up routing, state management, forms, animations and other features with libraries. It recommends some VSCode plugins and settings for development.
![React Query
[Not my favorite] Helps working with fetch
TanStack](https://image.slidesharecdn.com/frontend-101-initializing-react-project-220221162019/85/Frontend-101-Initializing-a-Frontend-Project-using-React-23-320.jpg)
Frontend 101 Initializing a Frontend Project using React
- 1. Quique Fdez Guerra Frontend Learner Unit 6 - Romania @CKGrafico FRONTEND 101 INITIALIZING A FRONTEND PROJECT USING REACT
- 2. WHAT ARE WE GOING TO SEE Ok... What are we talking about?
- 3. CHOOSING A LANGUAGE The first step, choose which language are you going to use. SIMPLE
- 4. CHOOSE ALSO FOR STYLES Don’t forget than styles are also important
- 5. LINTING TOOLS Will help to normalize the code through our teammates
- 6. OTHER LINTING TOOLS Will help to normalize the code through our teammates Husk y
- 7. BROWSER COMPATIBILITY At least basic configurations Browserl ist Autoprefix er
- 8. BASIC TESTING Don’t forget that testing is a must Testing JavaScript with Kent C. Dodds
- 9. UI / E2E TESTING You must check effort vs value depending on the project Testing JavaScript with Kent C. Dodds
- 10. BUNDLER Frontend projects need a tool to glue everything Luckily, we have CLIs nowadays
- 11. CRA: React CLI Nowadays the safest way to create a project is with a CLI
- 12. CRACO Easy way to extend projects made with CRA
- 13. UI FRAMEWORKS If you don’t why to start the UI from scratch
- 14. SSR TOOLS Server Side Rendering / Static apps generators
- 15. React Router Basic way to have routing in react a react app
- 16. React i18next Don’t forget that we never use strings in templates…
- 17. Global State Management Always nice to manage the state globally react-hooks-global-state
- 18. React Hook Form Validating forms with React
- 19. React Select Custom selects and combo boxes
- 20. React Virtualized Rendering huge amount of data without pain
- 21. React Table Working with tables is not that difficult TanStack
- 22. React Motion Animations and react
- 23. React Query [Not my favorite] Helps working with fetch TanStack
- 24. VSCode Plugins Some plugins I like to use
- 25. VSCode Settings My most used settings
- 26. My personal sandbox Is not a template, is not a template, is not a template…
- 27. THANKS