Prerequisites of React

• HTML and CSS:

Understanding of HTML (Hypertext Markup Language) for structuring web content.

Proficiency in CSS (Cascading Style Sheets) for styling web elements.

References:

MDN Web Docs - HTML

MDN Web Docs - CSS

• JavaScript:

Solid grasp of JavaScript, including knowledge of variables, data types, functions, and control structures.

Familiarity with ES6 (ECMAScript 2015) features like arrow functions and classes.

References:

MDN Web Docs - JavaScript

• Node.js and npm:

Installation and familiarity with Node.js for running JavaScript on the server side.

Use of npm (Node Package Manager) for managing packages and dependencies.

References:

Node.js Official Website

• Text Editor or IDE:

A code editor or integrated development environment (IDE) for writing React code.

References:

Visual Studio Code

INSTALLATION OF REACT PROJECT

Ensure that Node.js is installed on your system. You can download it from the official website.

• Install Create React App (If not already installed):

Open your terminal or command prompt.

Run npm install -g create-react-app to install Create React App globally.

• Create a New React Project:

Run npx create-react-app my-first-react-app to create a new React project (replace "my-first-react-app"
with your preferred project name).

• Navigate to the Project Directory:

Use cd my-first-react-app to change to your project directory.

• Start the Development Server:

Launch the development server with npm start .

Access your React app at http://localhost:3000/ in your web browser.

• Edit and Explore:

Open your project folder in your code editor.

Begin building your React components and exploring React development.

LEARN REACT
• ES6:

ES6 stands for ECMAScript 6.

ECMAScript was created to standardize JavaScript, and ES6 is the 6th version of ECMAScript, it was
published in 2015, and is also known as ECMAScript 2015.

Why Should I Learn ES6?

React uses ES6, and you should be familiar with some of the new features like:

o Classes
o Arrow Functions
o Variables (let, const, var)
o Array Methods like .map()
o Destructuring
o Ternary Operator
o Spread Operator

• JSX:

JSX stands for JavaScript XML. JSX allows us to write HTML in React. JSX makes it easier to write and add
HTML in React.

Coding JSX:

JSX allows us to write HTML elements in JavaScript and place them in the DOM without
any createElement() and/or appendChild() methods.

JSX converts HTML tags into react elements.

Components are independent and reusable bits of code. They serve the same purpose as JavaScript
functions, but work in isolation and return HTML.

Components come in two types:

Class components and Function components

• Class Components:

Class components were the only way to track state and lifecycle on a React component.
When creating a React component, the component's name must start with an upper case letter.

The component has to include the extends React.Component statement, this statement creates an
inheritance to React.Component, and gives your component access to React.Component's functions.

The component also requires a render() method, this method returns HTML.

Example

Create a Class component called Car:

class Car extends React.Component {

render() {

return <h2>Hi, I am a Car!</h2>;

• Function Components:

Function components in React are often referred to as stateless functional components because they
don't have internal state or lifecycle methods.

import React from 'react';

function Car() {

return <h2>Hi, I am a Car!</h2>;

export default Car;

\
 • React Props:

React props are a way to pass data from parent components to child components in React applications,
enabling dynamic and reusable user interface elements through data sharing and customization.

function Car(props) {

return <h2>I am a { props.brand }!</h2>;

const myElement = <Car brand="Ford" />;

• React Events:

React allows you to respond to user interactions like clicks, input changes, etc., using event handlers.

<button onClick={handleClick}>Click Me</button>

when the button is clicked, the handleClick function is called in response to the onClick event.

React Hooks
Hooks allow function components to have access to state and other React features.

• useState:

useState is a Hook that allows functional components to manage and update state variables. It takes an
initial state value and returns an array with the current state value and a function to update it.

This is a React functional component that initializes a count state with 0 and renders it. The "Increment"
button updates the count when clicked.
 • useEffect:

useEffect is a Hook used for handling side effects in functional components. It allows you to perform
tasks like data fetching, DOM manipulation, or setting up subscriptions after the component has
rendered.

This React functional component initializes a seconds state at 0 and uses the useEffect Hook to
increment it every second, creating a timer. It also cleans up the interval to prevent memory leaks. The
elapsed time is displayed.

• useContext:

useContext is a Hook that allows you to access the context of a parent component in a child component
without prop drilling. It's useful for sharing data or functions between components.

import React, { useContext } from 'react';

const ThemeContext = React.createContext('light');

export default function ThemedButton() {

const theme = useContext(ThemeContext);

return <button className={theme}>Themed Button</button>;

}
This React component uses the useContext Hook to access the ThemeContext and apply the theme
(defaulted to 'light') to a button, allowing for theme-based styling.

• useRef:

useRef is a Hook that provides a way to create and hold a mutable reference to a DOM element or any
other value. It's often used for accessing and modifying the DOM directly.

Reference:

https://www.youtube.com/watch?v=t2ypzz6gJm0
 • useReducer

useReducer is a Hook that is used for managing complex state logic in functional components. It's an
alternative to useState when the state transitions are more complex and involve multiple sub-values.

Reference:

https://www.youtube.com/watch?v=kK_Wqx3RnHk

• useCallback

useCallback is a Hook that memoizes functions to optimize performance by preventing unnecessary re-
renders of components. It's used to wrap a function and return a memoized version of it.

• useMemo

useMemo is a Hook used for memoizing the result of expensive calculations or computations in
functional components. It ensures that the calculation is only performed when the dependencies
change.

• Custom Hooks

Custom Hooks are user-defined Hooks created to encapsulate and share component logic, state, or side-
effects across multiple components. They help in making code more reusable and maintainable.

Custom Hooks promote reusability and maintainability by encapsulating specific logic in a way that can
be easily shared and reused across different components.

• useQuery:

useQuery is a hook used for fetching and caching data from an API or server, and it provides a simple
way to manage data loading, error handling, and caching.

Reference:

https://www.youtube.com/watch?v=r8Dg0KVnfMA&t=2123s

React Router
React Router is a library for handling routing and navigation in React applications. It allows you to create
single-page applications with multiple views or pages, enabling users to navigate between different parts
of your application without triggering full page reloads. React Router consists of several components and
hooks to manage routing in your application.

Install React Router:

npm install react-router-dom

Code:

import React from 'react';

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

return <h2>Home</h2>;

function About() {

return <h2>About</h2>;

function Contact() {

return <h2>Contact</h2>;

function App() {

return (

<Router>

<nav>

<ul>

<li>

<Link to="/">Home</Link>

</li>

<li>

<Link to="/about">About</Link>

</li>

<li>

<Link to="/contact">Contact</Link>

</li>

</ul>

</nav>

<Route path="/about" component={About} />

<Route path="/contact" component={Contact} />

</Router>

);

export default App;

Local Storage:
• Local Storage: Local storage is a web browser feature that allows websites and web applications
to store data on a user's device.
• Key-Value Pairs: Data in local storage is stored in key-value pairs, making it easy to access and
manage.
• Two Types: There are two main types of local storage: localStorage for persistent data and
sessionStorage for temporary session-based data.
• Data Persistence: Data stored in local storage remains on the user's device even after the
browser is closed (in the case of localStorage), or until the user closes the browser tab or
window (in the case of sessionStorage).
• Common Uses: Local storage is often used to save user preferences, cache data for faster
loading, and maintain application state, providing an improved user experience.