1 of 30

REACT JS

  • ReactJS is a free and open-source front-end JavaScript library which is used to develop various interactive user-interfaces.
  • It is a simple, feature rich and component based UI library.
  • When we say component based, we mean that React develops applications by creating various reusable and independent codes.
  • ReactJS can be used to develop small applications as well as big, complex applications.
  • ReactJS provides minimal and solid feature set to kick-start a web application.
  • React community compliments React library by providing large set of ready-made components to develop web application in a record time.
  • React community also provides advanced concept like state management, routing, etc., on top of the React library.

​

2 of 30

REACT JS FEATURES

  • ReactJS slowly becoming one of the best JavaScript framework among web developers. It is playing an essential role in the front-end ecosystem. Following are the important features of ReactJS
  • Virtual DOM
  • Components
  • JSX
  • One way data binding
  • Scalable
  • Flexible
  • Modular
  • Virtual DOM

​

3 of 30

REACT JS ADVANTAGES

  • Following are the main advantages of ReactJS −
  • Performance
  • Easy to learn
  • Huge collection of third party components
  • Large community
  • SEO Friendliness
  • Easy kick-starting of the React project
  • Rich set of developer tools
  • Handle large application

​

4 of 30

REACT JS ARCHITECTURE

  • Instead of introducing new template language, React introduces three simple concepts as given below −

​

  • React elements
  • JavaScript representation of HTML DOM. React provides an API, React.createElement to create React Element.
  • JSX
  • A JavaScript extension to design user interface. JSX is an XML based, extensible language supporting HTML syntax with little modification. JSX can be compiled to React Elements and used to create user interface.

​

5 of 30

REACT JS ARCHITECTURE

  • React component
  • React component is the primary building block of the React application. It uses React elements and JSX to design its user interface. React component is basically a JavaScript class (extends the React.component class) or pure JavaScript function. React component has properties, state management, life cycle and event handler. React component can be able to do simple as well as advanced logic.

​

6 of 30

CREATING REACT APP

  • Install a Build Tool (Vite)
  • When you have Node.js installed, you can start creating a React application by choosing a build tool.
  • We will use the Vite build tool in this tutorial.
  • Run this command to install Vite:
  • npm install -g create-vite
  • If the installation was a success, you will get a result like this:
  • added 1 package in 649ms

​

7 of 30

CREATING REACT APP

  • Run the following command to create react app
  • npm create vite@latest my-react-app -- --template react
  • Install Dependencies
  • Navigate to your new react directory
  • cd my-react-app
  • Run the following command to install dependencies
  • npm install

​

8 of 30

RUN REACT APP

  • Use the following command to run the app
  • npm run dev
  • Which results in
  • VITE v6.3.5  ready in 217 ms��➜ Local: http://localhost:5173/�➜ Network: use --host to expose�➜ press h + enter to show help
  • If you give the above url in browser you will see your app running

​

9 of 30

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.
  • JSX allows you to write html elements and place them in DOM.
  • JSX converts HTML tags into react elements

10 of 30

JSX Expressions

  • One of the most powerful features of JSX is the ability to embed JavaScript expressions directly within your markup.
  • You can insert any valid JavaScript expression inside JSX by wrapping it in curly braces { }.
  • React will evaluate the expression and render the result in the DOM.

​

​

​

11 of 30

JSX Expressions

Index.html

<!doctype html> <html lang="en"> <body> <div id="root"></div> <script type="module" src="/src/main.jsx"></script> </body> </html> �

​

​

​

Main.jsx

import { createRoot } from 'react-dom/client' function Car() { return ( <> <h1>My car</h1> <p>It has {218 * 1.36} horsepower</p> </> ); } createRoot(document.getElementById('root')).render( <Car /> );

�

12 of 30

JSX Expressions

Variables are also valid expressions. Insert variables in JSX by wrapping it in curly braces { }.

​

<!doctype html> <html lang="en"> <body> <div id="root"></div> <script type="module" src="/src/main.jsx"></script> </body> </html>

​

​

import { createRoot } from 'react-dom/client' function Car() { const hp = 218 * 1.36; return ( <> <h1>My car</h1> <p>It has {hp} horsepower</p> </> ); } createRoot(document.getElementById('root')).render( <Car /> );

​

13 of 30

REACT COMPONENTS

  • 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, in this tutorial we will concentrate on Function components.

​

14 of 30

Creating Components

  • When creating a React component, the component's name MUST start with an upper case letter.
  • React components returns HTML code.
  • function Car() { return ( <h2>Hi, I am a Car!</h2> ); }

​

15 of 30

Rendering Components

Now your React application has a component called Car, which returns an <h2> element.

To use this component in your application, refer to it like this: <Car />

​

<!doctype html> <html lang="en"> <body> <div id="root"></div> <script type="module" src="/src/main.jsx"></script> </body> </html>

​

import { createRoot } from 'react-dom/client' function Car() { return ( <h2>Hi, I am a Car!</h2> ); } createRoot(document.getElementById('root')).render( <Car /> ); �

​

​

​

�

16 of 30

Components in Components

  • We can refer to components inside other components
  • <!doctype html> <html lang="en"> <body> <div id="root"></div> <script type="module" src="/src/main.jsx"></script> </body> </html>

​

  • import { createRoot } from 'react-dom/client' function Car() { return ( <h2>I am a Car!</h2> ); } function Garage() { return ( <> <h1>Who lives in my Garage?</h1> <Car /> </> ); } createRoot(document.getElementById('root')).render( <Garage /> );

​

17 of 30

Props

  • React Props are like function arguments in JavaScript and attributes in HTML.
  • To send props into a component, use the same syntax as HTML attributes
  • You can send as many properties as you want.
  • React props can be of any data type, including variables, numbers, strings, objects, arrays, and more.
  • Strings can be sent inside quotes as in the examples above, but numbers, variables, and objects need to be sent inside curly brackets
  • The component treats objects like objects, and you can use the dot notation to access the properties
  • Array props can be accessed using the indexes.
  • Attributes are also how you pass data from one component to another, as parameters.

18 of 30

Props Children

  • In React, you can send the content between the opening and closing tags of a component, to another component.
  • This can be accessed in the other component using the props.children property.

​

<!doctype html> <html lang="en"> <body> <div id="root"></div> <script type="module" src="/src/main.jsx"></script> </body> </html>

​

import { createRoot } from 'react-dom/client' function Son(props) { return ( <div style={{background: 'lightgreen'}}> <h2>Son</h2> <div>{props.children}</div> </div> ); } function Daughter(props) { const {brand, model} = props; return ( <div style={{background: 'lightblue'}}> <h2>Daughter</h2> <div>{props.children}</div> </div> ); } function Parent() { return ( <div> <h1>My two Children</h1> <Son> <p> This was written in the Parent component, but displayed as a part of the Son component </p> </Son> <Daughter> <p> This was written in the Parent component, but displayed as a part of the Daughter component </p> </Daughter> </div> ); } createRoot(document.getElementById('root')).render( <Parent /> );

​

19 of 30

React Events

  • Just like HTML DOM events, React can perform actions based on user events.
  • React has the same events as HTML: click, change, mouseover etc.
  • React events are written in camelCase syntax:
  • onClick instead of onclick.
  • React event handlers are written inside curly braces:
  • onClick={shoot}  instead of onclick="shoot()".
  • �

20 of 30

React Events

  • To pass an argument to an event handler, use an arrow function.
  • Event handlers have access to the React event that triggered the function.

​

21 of 30

React Forms

  • Just like in HTML, React uses forms to allow users to interact with the web page.
  • You add a form with React like any other element
  • In React, form elements like <input>, <textarea>, and <select> work a bit differently from traditional HTML.
  • In standard HTML, form elements maintain their own value based on user input.
  • For example, an <input type="text"> field keeps track of its own value in the HTML DOM.
  • In React, the value of the form element is kept in the component's state property and updated only with the setState() function.
  • In other words; React provides a way to manage form data through component state, leading to what are known as "controlled components."

​

​

�

22 of 30

React Forms

  • In a controlled component, form data is handled by the React component.
  • The value of the input element is driven by the React state, and any changes to that value are managed through event handlers that update the state.
  • When the data is handled by the components, all the data is stored in the component state.
  • We can use the useState Hook to keep track of each input value and provide a "single source of truth" for the entire application.
  • You can control the submit action by adding an event handler in the onSubmit attribute for the <form>

​

​

​

23 of 30

Fetch

  • The Fetch API is a built-in JavaScript feature available in modern browsers.
  • It provides a simple way to make network requests using the fetch() method, which is part of the window object.
  • This method returns a Promise that resolves with the response to the request.
  • The then() method handles the successful response, while .catch() handles any errors that occur during the request.

​

24 of 30

Fetch

Syntax

fetch('url-to-resource') .then(response => { // Handle the response here }) .catch(error => { // Handle errors here });

​

25 of 30

Axios

  • Axios is a third-party JavaScript library designed for making HTTP requests.
  • It works with both Node.js and browsers.
  • Like Fetch, Axios uses the Promise API introduced in ES6.
  • Axios is known for its simplicity and extra features, such as request/response interception, error handling, and support for cancellation.
  • The axios.get() method makes a GET request to the specified URL and returns a promise.
  • The .then() method handles the successful response, while .catch() handles any errors that occur during the request.

​

26 of 30

Axios

Syntax

axios.get('url') .then((response) => { // Code for handling the response }) .catch((error) => { // Code for handling the error })

​

27 of 30

React Router

  • React Router is a library that provides routing capabilities for React applications.
  • Routing means handling navigation between different views.
  • React Router is the standard routing library for React applications. It enables you to:
  • Create multiple pages in your single-page application
  • Handle URL parameters and query strings
  • Manage browser history and navigation
  • Create nested routes and layouts
  • Implement protected routes for authentication
  • Without a router, your React application would be limited to a single page with no way to navigate between different views.

​

28 of 30

Installing React Router

  • In the command line, navigate to your project directory and run the following command to install the package
  • npm install react-router-dom
  • Your application must be wrapped with the BrowserRouter component to enable routing

function App() { return ( <BrowserRouter> {/* Your app content */} </BrowserRouter> ); }

​

29 of 30

Components of React Router

  • React Router uses three main components for basic routing:
  • Link: Creates navigation links that update the URL
  • Routes: A container for all your route definitions
  • Route: Defines a mapping between a URL path and a component

​

​

30 of 30

Nested Routes

  • You can have a Route inside another Route, this is called nested routes.
  • Nested routes allow you change parts of the page when you navigate to a new URL, while other parts is not changed or reloaded, almost like having a page within a page.

​