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