React JS CONCEPT AND DETAILED EXPLANATION

React Js

1. Routing Routing is a kind of mechanism by which users can navigate through different URLs available in a whole web application. But at the same time when we are developing large-scale applications than it is difficult to manage all the pages so for that, we can make use of routing to manage everything with ease . What is Routing Routing  is one of the important concepts in terms of features while developing  Single Page Application (SPA) . Using routing we can load the view partially without loading the webpage again from the server which makes our web app very much faster in terms of performance. In React, there is a third-party package called  react-router which is used to implement routing in reactjs when we create a new application using create-react- app .The react-router package is essential of React Router and it provides all the core functionalities for both  react-router- dom and   react-router-native

2. React-router Now we have a new project created with the name "react-routing-with-bootstrap4", and when you open the package.json file, it will look like this. { "name": "react-routing-with-bootstrap4", "version": "0.1.0", "private": true, "dependencies": { "react": "^16.5.1", "react- dom ": "^16.5.1", "react-scripts": "1.1.5" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test -- env = jsdom ", "eject": "react-scripts eject" } }

3. So as you can see in the above code snippet, we don't have the package installed called “react-router”, which is used to implement routing in react applications. When we create a new react app, it will not be installed automatically into our project but if you want to use this package or are unable to find this package in your package.json then you can use the below npm command. npm install react-router There is a package named react-router- dom which indirectly depends on react-router, we are going to use this package, in order to use it, execute the below npm command. npm install react-router- dom To design our page, we are going to use an additional third-party package of Bootstrap which is called react-bootstrap which provides different bootstrap-based components for the React application, just install the package using the below command. npm install react-bootstrap

4. Steps to configure routing Step 1 we are going to work with the three different pages as Home,Profile , and ContactUs . And for that, let's create a new folder inside the / src directory in React application and create three different files as given below . Home.js Profile.js ContactUs.js

5. And in these files, we are just showing static messages, and going to export these components, for that open the respective file and paste the following code snippets . Home.js const Home = () => { return <h1>Welcome to CMRIT Home Page</h1>; }; export default Home; Profile.js const Profile = () => { return <><h1>Welcome to Mrs. A.srinish Reddy</h1><p>Assistant Professor, CSE Department, CMRIT</p></> }; export default Profile;

6. Contactus.js const ContactUs = () => { return <h1>CMRIT, Kandlakoya village, Medchal , Hyderabad</h1>; }; export default ContactUs ; So these three files are acts as the different independent pages just to see the routing in action by going from one page to another, the very next step is to design our user interface, and for design purposes, we have used react-bootstrap components such as Navbar , Nav , MenuItem as explained into the second step.

7. Step 2 After creating all those files, it’s time to implement the user interface part in which we are going to implement navigations using react-bootstrap design components . Open Layout.js and paste the following code snippet. import Container from 'react-bootstrap/Container'; import Nav from 'react-bootstrap/ Nav '; import Navbar from 'react-bootstrap/ Navbar '; import { Outlet } from "react-router- dom "; import logo from "../assets/logo.png" const Layout = () => { return ( <> < Navbar bg ="primary" data- bs -theme="dark"> <Container> < Navbar.Brand href ="/">React SPA</ Navbar.Brand > < Nav className ="me-auto"> < Nav.Link href ="/">Home</ Nav.Link > < Nav.Link href ="profile">Profile</ Nav.Link >< Nav.Link href ="contact">Contact Us</ Nav.Link > </ Nav > </Container> </ Navbar > <Outlet /> </> ); } export default Layout;

8. For Routing we can pate below code into index.js import ReactDOM from "react- dom /client"; import { BrowserRouter , Routes, Route } from "react-router- dom "; // Bootstrap CSS import "bootstrap/dist/ css / bootstrap.min.css "; // Bootstrap Bundle JS import "bootstrap/dist/ js / bootstrap.bundle.min "; import Layout from "./templates/Layout"; import Home from "./templates/Home"; import Profile from "./templates/Profile"; import ContactUs from "./templates/ ContactUs "; export default function App() { return ( < BrowserRouter > <Routes> <Route path="/" element={<Layout />}> <Route index element={<Home />} /> <Route path="profile" element={<Profile />} /> <Route path="contact" element={< ContactUs />} /> </Route> </Routes> </ BrowserRouter > ); } const root = ReactDOM.createRoot ( document.getElementById ('root')); root.render (<App />);

9. React Router Components The Main Components of React Router are: BrowserRouter : BrowserRouter is a router implementation that uses the HTML5 history API( pushState , replaceState , and the popstate event) to keep your UI in sync with the URL. It is the parent component that is used to store all of the other components. Routes : It’s a new component introduced in the v6 and an upgrade of the component. The main advantages of Routes over Switch are: Relative s and s Routes are chosen based on the best match instead of being traversed in order. Route:  Route is the conditionally shown component that renders some UI when its path matches the current URL. Link:  The link component is used to create links to different routes and implement navigation around the application. It works like an HTML anchor tag . To configure BrowserRouter , Routes,Route,Link we need to import the API from the package react-router- dom like this. import { BrowserRouter as Router, Routes, Route, Link, } from "react-router- dom ";

10. Now we are done with most of the primary settings required for the routing, and in order to test how routing works so for that, we need to run the application using the below npm command into the command prompt . Npm start

11. What are props? Props is short for properties and they are used to pass data between React components. React’s data flow between components is uni -directional (from parent to child only). What is state? React has another special built-in object called state, which allows components to create and manage their own data. So unlike props, components cannot pass data with state, but they can create and manage it internally. Props ,State

12. Props Components can be passed as props, which stands for properties. Props are like function arguments, and you send them into the component as attributes. function Car(props) { return <h2>I am a { props.color } Car!</h2>; } const root = reactDOM.createRoot ( document.getElementById ('root')); root.render (<Car color="red"/>);

13. Props in the Constructor class Car extends React.Component { constructor(props) { super(props); } render() { return <h2>I am a { this.props.model }!</h2>; } } const root = ReactDOM.createRoot ( document.getElementById ('root')); root.render (<Car model="Mustang"/>);

14. States React Class components have a built-in state object. The state object is where you store property values that belongs to the component. When the state object changes, the component re-renders. The state object is initialized in the constructor The state object can contain as many properties (all properties that are needed for a component)

15. Creation of a state class Car extends React.Component { constructor(props) { super(props); this.state = { brand: "Ford", model: "Mustang", color: "red", year: 1964 }; } render() { return (<div> <h1>My { this.state.brand }</h1> <p> It is a { this.state.color } { this.state.model } from { this.state.year }. </p> </div>); } }

16. Change state object We can change the state object with the help of setState () method. Always use the  setState () method to change the state object, it will ensure that the component knows its been updated and calls the render() method (and all the other lifecycle methods). changeColor = () => { this.setState ({color: "blue"}); }