ReactJS Lab

Introduction
What is Node.js? What is React JS? Difference between React JS and JavaScript. Understanding ReactJs with example.This Introduction contains Audio files for better understanding.

Audio Playlist

What is Node.js?

What is React JS?

Is React JS language or framework?

Explanation of React JS with example.

Features of REACT JS.

What is State?

What are Hooks?

Just For FUN Laughing Emoji

AI created a Story on REACT JS

Installation

Installation of Node.js and VS code editor.

Running your First React Project/Program

npx create-react-app program1
cd program1
npm start
** program1 is the folder name where all the dependency files will be loaded from internet.
npm start command will start the server and load your react project/program on to the browser automatically.
if it is not loaded automatically then press on http://127.0.0.1:3000 or on http://localhost:3000 by holding CTRL key.

Troubleshooting

If any error occurs (in red text at termial in VS Code) after exetuting npx command
Then we need to change the Policy settings
In search bar type "Powershell" and open it.
Then paste this command : Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
then close the VS Code and open it again and type : npx create-react-app {program_name}
Now all the dependency files will download without error.

Program 1
Use create-react-app to set up a new project. Edit the App.js file to include a stateful component with useState. Add an input field and a <h1> element that displays text based on the input. Dynamically update the <h1> content as the user types.

Step 1: Create a new REACT app
First, you need to create a new React app using create-react-app.
Open your terminal and run: npx create-react-app program1
This will set up a new React project in a folder called program1. After the installation is complete, navigate to the project directory:

cd my-dynamic-app

Step 2: Modify the App.js file
Open the src/App.js file in your favorite code editor and update the code to include a stateful component using the useState hook. Here’s how you can modify it:


import React, { useState } from 'react';
import './App.css';
function App( ) {
const [text, setText] = useState('');
const handleChange = (event) => {
setText(event.target.value);
};
return (
<div className="App">
<h1>Dynamic Text Display</h1>
<input
type="text"
value={text}
onChange={handleChange}
placeholder="Type something..."
/>
<p>You typed: {text}</p>
</div>
);
}
export default App;

Program 1 Explanation

Output:

Program 2
Develop a React application that demonstrates the use of props to pass data from a parent component to child components. The application should include the parent component named App that serves as the central container for the application. Create two separate child components, Header: Displays the application title or heading. Footer: Displays additional information, such as copyright details or a tagline. Pass data (e.g., title, tagline, or copyright information) from the App component to the Header and Footer components using props. Ensure that the content displayed in the Header and Footer components is dynamically updated based on the data received from the parent component.

We need four files. 1.App.js(Parent Component) 2.Header.js(Child Component) 3.Footer.js(Child Component) 4.App.css
1.App.js and App.css are already present. But we need to create Header.js and Footer.js in src folder.

App.js


import React from "react";
import Header from "./Header";
import Footer from "./Footer";
import "./App.css";

function App() {
  const appTitle = "Props Demo React Application";
  const footerTagline = "Learning React Props – Crafted for 6th Sem Students";
  const copyright = "© 2026 SMVCE, Raichur. All Rights Reserved.";

  return (
    <div className="app-container">
      <Header title={appTitle} />
      
      <main>
        <p>This application demonstrates passing data from a parent component to child components using props.</p>
      </main>

      <Footer tagline={footerTagline} copyright={copyright} />
    </div>
  );
}

export default App;

Header.js


import React from "react";

function Header(props) {
  return (
    <header className="header">
      <h1>{props.title}</h1>
    </header>
  );
}

export default Header;

Footer.js


import React from "react";

function Footer(props) {
  return (
    <footer className="footer">
      <p>{props.tagline}</p>
      <small>{props.copyright}</small>
    </footer>
  );
}

export default Footer;

App.css


.app-container {
  text-align: center;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.header {
  background-color: #282c34;
  color: white;
  padding: 20px;
}

.footer {
  background-color: #f2f2f2;
  padding: 15px;
  font-size: 14px;
}

main {
  padding: 20px;
}

Program 2 Explanation

Output:

Program 3
Create a Counter Application using React that demonstrates state management with the useState hook. Display the current value of the counter prominently on the screen. Add buttons to increase and decrease the counter value. Ensure the counter updates dynamically when the buttons are clicked. Use the useState hook to manage the counter's state within the component. Prevent the counter from going below a specified minimum value (e.g., 0). Add a "Reset" button to set the counter back to its initial value. Include functionality to specify a custom increment or decrement step value.

Here we need to edit only 2 files. 1)App.js and 2)App.css

App.js

              
import React, { useState } from "react";
import "./App.css";

function App() {
  const MIN_VALUE = 0;

  // Counter state
  const [count, setCount] = useState(0);

  // Step state
  const [step, setStep] = useState(1);

  // Increase function
  const increase = () => {
    setCount(count + step);
  };

  // Decrease function (prevent below minimum)
  const decrease = () => {
    if (count - step >= MIN_VALUE) {
      setCount(count - step);
    } else {
      setCount(MIN_VALUE);
    }
  };

  // Reset function
  const reset = () => {
    setCount(0);
  };

  return (
    <div className="container">
      <h1>React Counter Application</h1>

      <div className="counter">{count}</div>

      <div className="controls">
        <button onClick={decrease}>Decrease</button>
        <button onClick={increase}>Increase</button>
        <button onClick={reset}>Reset</button>
      </div>

      <div className="step-control">
        <label>Step Value: </label>
        <input
          type="number"
          value={step}
          min="1"
          onChange={(e) => setStep(Number(e.target.value))}
        />
      </div>
    </div>
  );
}

export default App;

App.css


body {
  font-family: Arial, sans-serif;
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  margin: 0;
  padding: 0;
}

.container {
  text-align: center;
  margin-top: 80px;
  background: white;
  width: 350px;
  padding: 30px;
  border-radius: 12px;
  margin-left: auto;
  margin-right: auto;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}

.counter {
  font-size: 60px;
  font-weight: bold;
  margin: 20px 0;
  color: #333;
}

.controls button {
  margin: 10px;
  padding: 10px 15px;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  background: #4facfe;
  color: white;
  transition: 0.3s;
}

.controls button:hover {
  background: #007bff;
}

.step-control {
  margin-top: 20px;
}

.step-control input {
  width: 60px;
  padding: 5px;
  font-size: 16px;
  text-align: center;
}

Program 3 Explanation

Output:

Program 4
Develop a To-Do List Application using React functional components that demonstrates the use of the useState hook for state management. Create a functional component named ToDoFunction to manage and display the to-do list. Maintain a list of tasks using state. Provide an input field for users to add new tasks. Dynamically render the list of tasks below the input field. Ensure each task is displayed in a user-friendly manner. Allow users to delete tasks from the list. Mark tasks as completed or pending, and visually differentiate them.

Here we need to edit only 2 files. 1)App.js and 2)App.css

App.js


import React, { useState } from "react";
import "./App.css";

function ToDoFunction() {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState("");

  const addTask = () => {
    if (newTask.trim() === "") return;

    const taskObject = {
      id: Date.now(),
      text: newTask,
      completed: false
    };

    setTasks([...tasks, taskObject]);
    setNewTask("");
  };

  const deleteTask = (id) => {
    const updatedTasks = tasks.filter(task => task.id !== id);
    setTasks(updatedTasks);
  };

  const toggleComplete = (id) => {
    const updatedTasks = tasks.map(task =>
      task.id === id ? { ...task, completed: !task.completed } : task
    );
    setTasks(updatedTasks);
  };

  return (
    <div className="container">
      <h2>📝 To-Do List Application</h2>

      <div className="input-container">
        <input
          type="text"
          placeholder="Enter a new task..."
          value={newTask}
          onChange={(e) => setNewTask(e.target.value)}
        />
        <button className="add-btn" onClick={addTask}>
          Add
        </button>
      </div>

      <ul className="task-list">
        {tasks.map(task => (
          <li
            key={task.id}
            className={`task-item ${task.completed ? "completed" : ""}`}
          >
            <span
              className="task-text"
              onClick={() => toggleComplete(task.id)}
            >
              {task.text}
            </span>

            <div>
              <button
                className="complete-btn"
                onClick={() => toggleComplete(task.id)}
              >
                {task.completed ? "Undo" : "Complete"}
              </button>

              <button
                className="delete-btn"
                onClick={() => deleteTask(task.id)}
              >
                Delete
              </button>
            </div>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ToDoFunction;

App.css


 body {
  background-color: #a6e9b7;
  font-family: Arial, Helvetica, sans-serif;
}

.container {
  max-width: 500px;
  margin: 50px auto;
  padding: 25px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  text-align: center;
}

h2 {
  margin-bottom: 20px;
  color: #333;
}

.input-container {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

input {
  width: 70%;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
  font-size: 14px;
}

.add-btn {
  padding: 10px 15px;
  margin-left: 5px;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  transition: 0.3s;
}

.add-btn:hover {
  background-color: #0056b3;
}

.task-list {
  list-style-type: none;
  padding: 0;
}

.task-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
  background-color: #f8f9fa;
  transition: 0.3s;
}

.task-item.completed {
  background-color: #d4edda;
  text-decoration: line-through;
}

.task-text {
  cursor: pointer;
  flex: 1;
  text-align: left;
}

.complete-btn {
  margin-right: 5px;
  padding: 6px 10px;
  border: none;
  border-radius: 5px;
  background-color: #28a745;
  color: white;
  cursor: pointer;
  transition: 0.3s;
}

.complete-btn:hover {
  background-color: #1e7e34;
}

.delete-btn {
  padding: 6px 10px;
  border: none;
  border-radius: 5px;
  background-color: #dc3545;
  color: white;
  cursor: pointer;
  transition: 0.3s;
}

.delete-btn:hover {
  background-color: #a71d2a;
}

Program 4 Explanation

Output:

Program 5
Develop a React application that demonstrates component composition and the use of props to pass data. Create two components: FigureList: A parent component responsible for rendering multiple child components. BasicFigure: A child component designed to display an image and its associated caption. Use the FigureList component to dynamically render multiple BasicFigure components. Pass image URLs and captions as props from the FigureList component to each BasicFigure component. Style the BasicFigure components to display the image and caption in an aesthetically pleasing manner. Arrange the BasicFigure components within the FigureList in a grid or list format. Allow users to add or remove images dynamically. Add hover effects or animations to the images for an interactive experience.

Here we need to edit 4 files. 1)App.js , 2)App.css . Create a folder named components and inside this folder create 3)FigureList.js and 4)BasicFigure.js

1) App.js

              
import React from "react";
import FigureList from "./components/FigureList";
import "./App.css";

function App() {
  return (
    <div className="App">
      <h1 className="title">Figure Gallery App</h1>
      <FigureList />
{/* Footer */}
      <footer className="footer">
        <p>© 2026 SMVCE, Raichur | All Rights Reserved</p>
      </footer>
    </div>
  );
}

export default App;

2) App.css

  
.App {
  text-align: center;
  padding: 20px;
  background-color: #f4f6f8;
  min-height: 100vh;
}

.title {
  color: #333;
  margin-bottom: 20px;
  font-size: 28px;
}
.input-container {
  margin-bottom: 20px;
}

.input-container input {
  padding: 8px;
  margin: 5px;
  width: 200px;
}

.input-container button {
  padding: 8px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}

.input-container button:hover {
  background-color: #0056b3;
}

/* Grid Layout */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

/* Card Styling */
.card {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

/* Hover Animation */
.card:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

.card img {
  width: 100%;
  height: 150px;
  object-fit: contain;
  padding-top: 10px;
}

.card-body {
  padding: 10px;
}

.card-body button {
  margin-top: 10px;
  padding: 5px 10px;
  background-color: red;
  color: white;
  border: none;
  cursor: pointer;
}

.card-body button:hover {
  background-color: darkred;
}
.footer {
  margin-top: 30px;
  padding: 15px;
  background-color: #333;
  color: white;
  text-align: center;
  font-size: 14px;
  border-radius: 10px;
}

3) FigureList.js

              
import React, { useState } from "react";
import BasicFigure from "./BasicFigure";

function FigureList() {
  const [figures, setFigures] = useState([
    {
      image: "https://sachinadi.neocities.org/photo/college1.jpg",
      caption: "college"
    },
    {
      image: "https://sachinadi.neocities.org/photo/college2.jpg",
      caption: "Open Stage"
    }
  ]);

  const [image, setImage] = useState("");
  const [caption, setCaption] = useState("");

  const addFigure = () => {
    if (image === "" || caption === "") return;

    setFigures([...figures, { image, caption }]);
    setImage("");
    setCaption("");
  };

  const removeFigure = (index) => {
    const updated = figures.filter((_, i) => i !== index);
    setFigures(updated);
  };

  return (
    <div>
      {/* Input Section */}
      <div className="input-container">
        <input
          type="text"
          placeholder="Enter Image URL"
          value={image}
          onChange={(e) => setImage(e.target.value)}
        />
        <input
          type="text"
          placeholder="Enter Caption"
          value={caption}
          onChange={(e) => setCaption(e.target.value)}
        />
        <button onClick={addFigure}>Add</button>
      </div>

      {/* Grid Section */}
      <div className="grid">
        {figures.map((fig, index) => (
          <BasicFigure
            key={index}
            image={fig.image}
            caption={fig.caption}
            onRemove={() => removeFigure(index)}
          />
        ))}
      </div>
    </div>
  );
}

export default FigureList;

4) BasicFigure.js

              
import React from "react";
function BasicFigure({ image, caption, onRemove }) {
  return (
    <div className="card">
      <img src={image} alt={caption} />
      <div className="card-body">
        <p>{caption}</p>
        <button onClick={onRemove}>Remove</button>
      </div>
    </div>
  );
}

export default BasicFigure;

Program 5 Explanation

Output:

Images Links for Program 5

Program 6
Design and implement a React Form that collects user input for name, email, and password. Form Fields are Name, Email, Password. Ensure all fields are filled before allowing form submission.Validate the email field to ensure it follows the correct email format (e.g., example@domain.com). Optionally enforce a minimum password length or complexity. Display error messages for invalid or missing inputs. Provide visual cues (e.g., red borders) to highlight invalid fields. Prevent form submission until all fields pass validation. Log or display the entered data upon successful submission (optional). Add a "Show Password" toggle for the password field. Implement client-side sanitization to ensure clean input.

Here we need to edit only 2 files. 1)App.js and 2)App.css

App.js


import React, { useState } from "react";
import "./App.css";

function App() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    password: ""
  });

  const [errors, setErrors] = useState({});
  const [showPassword, setShowPassword] = useState(false);

  // Email validation regex
  const validateEmail = (email) => {
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
  };

  // Sanitization (basic)
  const sanitizeInput = (value) => {
    return value.replace(/</g, "").replace(/>/g, "").trim();
  };

  // Handle input change
  const handleChange = (e) => {
    const { name, value } = e.target;

    setFormData({
      ...formData,
      [name]: sanitizeInput(value)
    });
  };

  // Form validation
  const validateForm = () => {
    let newErrors = {};

    if (!formData.name) {
      newErrors.name = "Name is required";
    }

    if (!formData.email) {
      newErrors.email = "Email is required";
    } else if (!validateEmail(formData.email)) {
      newErrors.email = "Invalid email format";
    }

    if (!formData.password) {
      newErrors.password = "Password is required";
    } else if (formData.password.length < 6) {
      newErrors.password = "Password must be at least 6 characters";
    }

    setErrors(newErrors);

    return Object.keys(newErrors).length === 0;
  };

  // Handle submit
  const handleSubmit = (e) => {
    e.preventDefault();

    if (validateForm()) {
      alert("Form Submitted Successfully!");
      console.log("User Data:", formData);
    }
  };

  return (
    <div className="container">
      <h2>User Registration Form</h2>

      <form onSubmit={handleSubmit}>
        {/* Name */}
        <div className="form-group">
          <label>Name</label>
          <input
            type="text"
            name="name"
            value={formData.name}
            onChange={handleChange}
            className={errors.name ? "error-input" : ""}
          />
          {errors.name && <p className="error">{errors.name}</p>}
        </div>

        {/* Email */}
        <div className="form-group">
          <label>Email</label>
          <input
            type="text"
            name="email"
            value={formData.email}
            onChange={handleChange}
            className={errors.email ? "error-input" : ""}
          />
          {errors.email && <p className="error">{errors.email}</p>}
        </div>

        {/* Password */}
        <div className="form-group">
          <label>Password</label>
          <div className="password-box">
            <input
              type={showPassword ? "text" : "password"}
              name="password"
              value={formData.password}
              onChange={handleChange}
              className={errors.password ? "error-input" : ""}
            />
            <button
              type="button"
              onClick={() => setShowPassword(!showPassword)}
            >
              {showPassword ? "Hide" : "Show"}
            </button>
          </div>
          {errors.password && <p className="error">{errors.password}</p>}
        </div>

        {/* Submit */}
        <button type="submit" className="submit-btn">
          Submit
        </button>
      </form>
    </div>
  );
}

export default App;

App.css

         
  body {
  font-family: Arial, sans-serif;
  background: #f4f4f4;
       }

.container {
  width: 350px;
  margin: 50px auto;
  background: grey;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 0 10px #ccc;
           }

h2 {
  text-align: center;
   }

.form-group {
  margin-bottom: 15px;
            }

input {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
      }

/* Red border for errors */
.error-input {
  border: 2px solid red;
             }

.error {
  color: red;
  font-size: 12px;
  margin-top: 5px;
       }

.password-box {
  display: flex;
  gap: 5px;
            }

.password-box input {
  flex: 1;
          }

button {
  padding: 8px;
  cursor: pointer;
  border-radius: 5px;
      }

.submit-btn {
  width: 100%;
  background: green;
  color: white;
  border: none;
  border-radius: 5px;
          }

.submit-btn:hover {
  background: darkgreen;
                }

Output:

Program 7
Coming Soon

Output:

Program 8
Coming Soon

Output:

Program 9
Coming Soon

Output: