React Bootcamp
the beginning of a career.
Full Name Full Name Full Name
Ghalem Salim Mechkak Hocine Arezki Medjber Soundous
Prerequisites
you need to install node.js
you need to install vscode
you need to install a vscode extension called
ES7+ React/Redux/React-Native snippets
you need to have a basic knowledge of html,css and javascript
Day1
What is a framework ?
A framework is a pre-built collection of
tools and libraries designed to help
developers build software applications
more efficiently. It provides a structured
approach, making development easier,
more scalable, and faster.
Different front-end frameworks
Popular frameworks and libraries :
React.js : A library for building UIs with
reusable components.
Vue.js: A framework for creating
interactive UIs with a focus on
simplicity.
Angular.js : A framework for single
page apps.
Why we chose React ?
Reusable Components : Allows building
with reusable UI elements.
Fast Performance : Virtual DOM for
efficient updates and rendering.
Large Ecosystem: Rich library support
and Big community.
Easy to Learn : Simplified syntax and
structure.
Flexibility: Can be used for both web
and mobile apps (React Native).
Scalable: Suitable for both small and
large projects.
What is npm ?
npm ( node package manager ) is package
manager for JavaScript, primarily used for
managing dependencies in Node.js projects. It
allows developers to easily install, update, and
manage third-party libraries and packages
that their projects uses.
React setup
To create a React Vite project you need to
install node.js first, then to verify if it’s
installed correctly by doing node -v and npm -v
. If it doesn’t work you need to fix your
environment path variable. Next to start your
first app you need ot type
npm create vite@latest
Understanding React files
Folders
node_modules/ : Contains all the
dependencies that are installed via NPM or
Yarn
public/ : Contains static files that will be
served directly to the browser
src/ : This folder contains all your source code
files, including components, styles, and any
JavaScript files that make up the functionality
of your app.
Understanding React files
Files
index.html : The main html file where the
react app is rendered
App.jsx : The root component of your
application
index.jsx : The entry point of your React app. It
renders the App component inside the
index.html file.
package.json: Contains metadata about the
project like project name, version, scripts, and
dependencies.
vite.config.js : This is the configuration file for
Vite
Introduction to JSX
JSX stands for JavaScript XML, it allows us to
write html in React making it easy to create
and manage components in React.It translate
the JSX into a vanilla javascript using tools
like babel.
Rendering in React
Rendering refers to how React updates the UI
by transforming the React components into
HTML elements that the browser can display.
It used a virtual DOM to efficiently manage UI
updates:
Components
Components in React are the core building
blocks of a React application. They allow
developers to break down the UI into smaller,
reusable pieces of code. Components can be
either functional or class-based
Components
To create a component, start by creating a
components folder inside the src folder. Then,
create a file for your component, like
Navbar.jsx. For a quick setup, you can type
rafc or rafce to generate the basic structure of
your component.
Props
Props (properties) are used to pass data from
a parent component to a child component.
They make components more efficient and
reusable by allowing dynamic content to be
passed and displayed.
Props (exemple)
Parent Child
Exercise
You will create an InfoCard components that
receive name,role,age as props and then
renders them, then use App.js to use the
component.
Day2
functions
There is two type and they aren’t new as
they are introduced to vanilla js too
React Hooks
Hooks let you use different React
features from your components.
UseState
The React useState Hook allows us to
track state in a component.
It lets a component “ remember “
informations like the user input.
UseState (exemple)
The React useState Hook allows us to
track state in a component.
It lets a component “ remember “
informations like the user input.
UseState (exemple)
The “ text “ state holds a string, and
“ setText “ updates it. The handleClick
function changes the state when
triggered by an event listener.
UseState ( Props ??)
i have told you that props can be passed
from a parent to a child, but what if i
want the exact opposite ?
meaning i want to send from child to
parent
Event Listeners
Just like in vanilla js, you can use event listeners
in your tags, It’s purpose is to detect user inputs,
exemples are onClick, onChange ...
Lists in React
Lists in React are used to render multiple
elements dynamically.
It is very similair to arrays in general.
With using lists Without using lists
Lists in React ( part2 )
Note : those are both correct ( arrow
function properties ).
Exercise
Create a counter page where a button
increments the counter and another button
decrements it. The child component will
contain both buttons. When clicked, they will
update the counter in the parent component.
Day3
UseEffect
The UseEffect is a React Hook that
allows you to perform side effects in
function components. Side effects like
fetching data from API
modifying the DO
Managing timers and interval
Subscribing to services like sockets
and event listeners
UseEffect
how does it work ?
After React renders the component, it
first updates the DOM. Then React calls
useEffect asynchronously after the DOM
update.
If a state or prop changes, React re-
renders the component.
UseEffect
what are the use cases ?
Runs on every render
UseEffect
what are the use cases ?
Runs one time on initial render
UseEffect
what are the use cases ?
Runs based when the dependencies
added change value ( state or props
changes)
Conditional Rendering
In React, JSX allows you to use
JavaScript inside HTML, allowing you to
apply conditional rendering directly
within it.
Fetching APIs
Fetching data in React refers to retrieving
external data from APIs and displaying it in
components, using asynchronous functions.
Exercise
We have a React component that displays a
"Log in required!" message and a button.
When the user clicks the button, they are
considered logged in, and the component
should fetch a cat fact from the API (https://
catfact.ninja/fact) and display it’s fact.
Day4
Forms
Forms collect user input, like text, emails,
or numbers, and you control them using
states
Forms
here we will do another exemple where
there is multiple inputs
Objects
Objects store key-value pairs, allowing
us to group related data.
Forms
A better solution for multiple inputs
React Routing
A library that helps you manage navigation in
a React application. It allows you to add links
between different components and render
pages based on the URL. You need to install it
by typing npm install react-router-dom
React Routing
< Router > : It’s the core container
that holds all routing logic.
< Routes > : A container for all your
route definitions.
< Route > : matches a URL and
renders the component that
corresponds to that URL.
React Routing
< Link > : It lets you go to different
pages in your React app without
reloading the page. It's like a special
version of the <a> tag that makes
your app faster.
Exercise
Create a simple login/register flow with two pages
A Login page
A Register page.
You will use a button to flip between the two pages. This means
When the user clicks the "Login" button, they should see the login
form
When the user clicks the "Register" button, they should see the
registration form.
Login will need name and password fields while Register need
name,email and password fields
Final Project:
Build a basic blog app where users can create, view, edit, and delete blog posts.
The app should have
Home Page
Show a list of all posts (title, author, and preview...etc)
Add an Edit button and a Delete button for each post
Create/Edit Post Page
A single form to
Create a new post
Edit an existing post.
