What is "Render" in React?
In React, rendering refers to the process of displaying UI elements on the
screen based on the current state and props of components. React uses a
virtual DOM to efficiently update the real DOM, ensuring optimal
performance.
Types of Rendering in React
Rendering can be categorized into the following types:
1. Initial Rendering
Definition: This is the first rendering of a React component, where the UI is
built for the first time.
When It Happens: When the app starts or a new component is mounted.
Example:
function App() {
return <h1>Welcome to React</h1>;
The above code initially renders the <h1> tag.
2. Re-rendering
Definition: Happens when a component updates due to changes in its state
or props.
When It Happens:
A state variable is updated.
New props are passed to a component.
Example:
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
Clicking the button triggers a re-render as the state (count) updates.
3. Server-side Rendering (SSR)
Definition: The process of rendering components on the server and sending
the fully-formed HTML to the browser.
Purpose: Improves performance and SEO.
When It Happens: Typically implemented using frameworks like Next.js.
Example:
Code is rendered on the server using libraries like ReactDOMServer.
4. Client-side Rendering (CSR)
Definition: The traditional way of rendering in React, where the JavaScript
code is executed in the browser to render components.
When It Happens: By default in React apps created using create-react-app.
Example:
import ReactDOM from 'react-dom';
ReactDOM.render(<App />, document.getElementById('root'));
5. Static Site Generation (SSG)
Definition: Pre-rendering HTML pages at build time and serving static files.
Purpose: Combines the speed of static files with the dynamic nature of
React.
When It Happens: Popular in frameworks like Next.js.
6. Incremental Static Regeneration (ISR)
Definition: A hybrid approach where static pages are regenerated at
runtime after a specified period or based on conditions.
When It Happens: Used in modern frameworks like Next.js for dynamic
content that changes infrequently.
7. Hydration
Definition: A process where the React application takes over the static
HTML and binds it to React's state and interactivity.
When It Happens: During server-side rendering, when the app "hydrates"
the server-rendered HTML in the browser.
1. Creating and Rendering Multiple Components
import React from 'react';
import ReactDOM from 'react-dom/client';
function Header() {
return <h1>Welcome to My Website</h1>;
function Footer() {
return <footer>© 2024 My Website</footer>;
function App() {
return (
<div>
<Header />
<p>This is the main content of the website.</p>
<Footer />
</div>
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
2. Creating a Component Inside Another Component
import React from 'react';
import ReactDOM from 'react-dom/client';
function App() {
function InnerComponent() {
return <p>This is an inner component.</p>;
return (
<div>
<h1>Hello World!</h1>
<InnerComponent />
</div>
);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
3. Splitting Components into Different Files
File 1: Header.js
import React from 'react';
function Header() {
return <h1>Welcome to My Website</h1>;
export default Header;
File 2: Footer.js
import React from 'react';
function Footer() {
return <footer>© 2024 My Website</footer>;
export default Footer;
File 3: App.js
import React from 'react';
import Header from './Header';
import Footer from './Footer';
function App() {
return (
<div>
<Header />
<p>This is the main content of the website.</p>
<Footer />
</div>
);
export default App;
File 4: index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
Step 1: Create Components for Each Tab
Create individual components for each tab in the navigation bar.
File 1: Home.js
import React from 'react';
function Home() {
return <h1>Welcome to the Home Page</h1>;
export default Home;
File 2: About.js
import React from 'react';
function About() {
return <h1>About Us</h1>;
export default About;
File 3: Contact.js
import React from 'react';
function Contact() {
return <h1>Contact Us</h1>;
export default Contact;
File 4: Services.js
import React from 'react';
function Services() {
return <h1>Our Services</h1>;
export default Services;
Step 2: Create the Navigation Bar with Routing
File 5: App.js
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-
dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';
import Services from './Services';
function App() {
return (
<Router>
<div>
{/* Navigation Bar */}
<nav>
<ul style={{ display: 'flex', listStyle: 'none', gap: '20px' }}>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/services">Services</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
</nav>
{/* Routes to Render Components */}
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/services" element={<Services />} />
<Route path="/contact" element={<Contact />} />
</Routes>
</div>
</Router>
);
export default App;
Step 3: Render the Application
File 6: index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
Steps to Solve:
1. Set up the project: Install React Router if not already installed.
npm install react-router-dom
2. Create the Components: Create individual components for Home, Portfolio,
Projects, Contact Me, JavaScript, and Result.
3. Setup React Router: Use BrowserRouter, Routes, and Route to navigate
between the components.
---
Code Implementation:
1. App.js (Main Application File)
import React from "react";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-
dom";
import Home from "./components/Home";
import Portfolio from "./components/Portfolio";
import Projects from "./components/Projects";
import ContactMe from "./components/ContactMe";
import JavaScript from "./components/JavaScript";
import Result from "./components/Result";
function App() {
return (
<Router>
<div>
{/* Navigation Bar */}
<nav>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/portfolio">Portfolio</Link></li>
<li><Link to="/projects">Projects</Link></li>
<li><Link to="/contact">Contact Me</Link></li>
<li><Link to="/javascript">JavaScript</Link></li>
<li><Link to="/result">Result</Link></li>
</ul>
</nav>
{/* Routes */}
<Routes>
<Route path="/" element={<Home />} />
<Route path="/portfolio" element={<Portfolio />} />
<Route path="/projects" element={<Projects />} />
<Route path="/contact" element={<ContactMe />} />
<Route path="/javascript" element={<JavaScript />} />
<Route path="/result" element={<Result />} />
</Routes>
</div>
</Router>
);
export default App;
---
2. Home.js
import React from "react";
const Home = () => {
return (
<div>
<h1>About Me</h1>
<p>Details about myself.</p>
<h2>Concepts Learned:</h2>
<ul>
<li>React Basics</li>
<li>State Management</li>
<li>React Router</li>
<li>Component Lifecycle</li>
</ul>
<h2>Mini Projects:</h2>
<ul>
<li>Todo App</li>
<li>Weather App</li>
</ul>
<h2>Course Expectations:</h2>
<p>To gain hands-on experience in React and build real-world
projects.</p>
</div>
);
};
export default Home;
---
3. Portfolio.js
import React from "react";
const Portfolio = () => {
return <h1>Portfolio Page</h1>;
};
export default Portfolio;
---
4. Projects.js
import React from "react";
const Projects = () => {
return (
<div>
<h1>Projects</h1>
<ul>
<li>Todo App</li>
<li>E-commerce Site</li>
<li>Portfolio Website</li>
</ul>
</div>
);
};
export default Projects;
---
5. ContactMe.js
import React from "react";
const ContactMe = () => {
return (
<div>
<h1>Contact Me</h1>
<p>Email: example@example.com</p>
<p>Phone: +1234567890</p>
</div>
);
};
export default ContactMe;
---
6. JavaScript.js
import React from "react";
const JavaScript = () => {
return <h1>JavaScript Concepts</h1>;
};
export default JavaScript;
7. Result.js
import React, { useState } from "react";
const Result = () => {
const [formData, setFormData] = useState({
name: "",
email: "",
subjects: ["", "", "", "", ""],
marks: ["", "", "", "", ""],
});
const [result, setResult] = useState(null);
const handleChange = (e) => {
const { name, value } = e.target;
setFormData((prev) => ({
...prev,
[name]: value,
}));
};
const handleSubjectChange = (index, value) => {
const subjects = [...formData.subjects];
subjects[index] = value;
setFormData({ ...formData, subjects });
};
const handleMarksChange = (index, value) => {
const marks = [...formData.marks];
marks[index] = value;
setFormData({ ...formData, marks });
};
const calculateResult = () => {
const totalMarks = formData.marks.reduce(
(acc, mark) => acc + parseInt(mark || 0),
);
const percentage = (totalMarks / (formData.marks.length * 100)) * 100;
setResult({
name: formData.name,
subjects: formData.subjects,
totalMarks,
percentage,
});
};
return (
<div>
<h1>Student Result</h1>
<form
onSubmit={(e) => {
e.preventDefault();
calculateResult();
}}
>
<label>
Name:
<input type="text" name="name" onChange={handleChange} />
</label>
<br />
<label>
Email:
<input type="email" name="email" onChange={handleChange} />
</label>
<br />
{formData.subjects.map((_, index) => (
<div key={index}>
<label>
Subject {index + 1}:
<input
type="text"
onChange={(e) => handleSubjectChange(index, e.target.value)}
/>
</label>
<label>
Marks:
<input
type="number"
onChange={(e) => handleMarksChange(index, e.target.value)}
/>
</label>
</div>
))}
<button type="submit">Calculate Result</button>
</form>
{result && (
<div>
<h2>Result</h2>
<p>Name: {result.name}</p>
<ul>
{result.subjects.map((subject, index) => (
<li key={index}>
{subject}: {formData.marks[index]} marks
</li>
))}
</ul>
<p>Total Marks: {result.totalMarks}</p>
<p>Percentage: {result.percentage.toFixed(2)}%</p>
</div>
)}
</div>
);
};
export default Result;
Explanation:
Routing: React Router is used to link components and navigate between
pages.
Form: The Result component dynamically calculates the total marks and
percentage based on user input.
