Scribd
Upload
14 views47 pages

React Bootcamp

The document outlines a React Bootcamp aimed at beginners, detailing prerequisites such as installing Node.js and VSCode, and providing an introduction to React, its components, and hooks. It covers essential topics including JSX, rendering, props, state management with useState, side effects with useEffect, forms, and React routing. The bootcamp culminates in a final project where participants build a basic blog application with functionalities for creating, viewing, editing, and deleting posts.

Uploaded by

xetaha3009
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views47 pages

React Bootcamp

The document outlines a React Bootcamp aimed at beginners, detailing prerequisites such as installing Node.js and VSCode, and providing an introduction to React, its components, and hooks. It covers essential topics including JSX, rendering, props, state management with useState, side effects with useEffect, forms, and React routing. The bootcamp culminates in a final project where participants build a basic blog application with functionalities for creating, viewing, editing, and deleting posts.

Uploaded by

xetaha3009
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 47

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.

You might also like