React JS CONCEPT AND DETAILED EXPLANATION

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

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"
}
}

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

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

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;

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.

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;

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 />);

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";

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

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

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"/>);

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"/>);

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)

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>);
}
}

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"});
}

React JS CONCEPT AND DETAILED EXPLANATION

More Related Content

Similar to React JS CONCEPT AND DETAILED EXPLANATION (20)

Recently uploaded (20)

React JS CONCEPT AND DETAILED EXPLANATION