Frontend 101 Initializing a Frontend Project using React

Quique Fdez Guerra
Frontend Learner
Unit 6 - Romania
@CKGrafico
FRONTEND 101
INITIALIZING
A FRONTEND PROJECT
USING REACT

WHAT ARE WE GOING TO SEE
Ok... What are we talking about?

CHOOSING A LANGUAGE
The first step, choose which language are you going to use.
SIMPLE

CHOOSE ALSO FOR STYLES
Don’t forget than styles are also important

LINTING TOOLS
Will help to normalize the code through our teammates

OTHER LINTING TOOLS
Will help to normalize the code through our teammates
Husk
y

BROWSER COMPATIBILITY
At least basic configurations
Browserl
ist
Autoprefix
er

BASIC TESTING
Don’t forget that testing is a must
Testing JavaScript with Kent C. Dodds

UI / E2E TESTING
You must check effort vs value depending on the project
Testing JavaScript with Kent C. Dodds

BUNDLER
Frontend projects need a tool to glue everything
Luckily, we have CLIs
nowadays 

CRA: React CLI
Nowadays the safest way to create a project is with a CLI

CRACO
Easy way to extend projects made with CRA

UI FRAMEWORKS
If you don’t why to start the UI from scratch

SSR TOOLS
Server Side Rendering / Static apps generators

React Router
Basic way to have routing in react a react app

React i18next
Don’t forget that we never use strings in templates…

Global State Management
Always nice to manage the state globally
react-hooks-global-state

React Hook Form
Validating forms with React

React Select
Custom selects and combo boxes

React Virtualized
Rendering huge amount of data without pain

React Table
Working with tables is not that difficult
TanStack

React Motion
Animations and react

React Query
[Not my favorite] Helps working with fetch
TanStack

VSCode Plugins
Some plugins I like to use

VSCode Settings
My most used settings

My personal sandbox
Is not a template, is not a template,
is not a template…

More Related Content