ReactJS Lab

By Sachin Adi

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 EmojiAI 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.

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:

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

Output:

Output:

Output:

style.css

Output:

Output:

Output:

Output: