Assignments Of Day 2
Setting Up React Environment
Assignment 1: Install Node.js, npm, and Create React App
Task:
1. Install Node.js and npm on your system.
2. Verify the installation of Node.js and npm.
3. Install Create React App globally on your system.
Steps & Solution:
1. Install Node.js and npm:
o Go to the official Node.js website.
o Download the LTS (Long-Term Support) version for your operating system.
o Run the installer and follow the on-screen instructions to install Node.js.
o During installation, npm (Node Package Manager) will also be installed automatically.
2. Verify Installation:
o Open your terminal (or command prompt) and type:
Copy code
node -v
This will show the version of Node.js installed on your system.
Example output:
Copy code
v18.16.0
o Similarly, check npm by typing:
Copy code
npm -v
This will show the version of npm installed on your system.
Example output:
Copy code
9.5.0
3. Install Create React App:
o To install Create React App globally, use the following command in your terminal:
lua
Copy code
npm install -g create-react-app
o After the installation completes, you can verify that Create React App is installed by running:
lua
Copy code
create-react-app --version
4. Example output:
5. Copy code
6. 5.0.1
Assignment 2: Creating Your First React Application
Task:
1. Use Create React App to create a new React project.
2. Run the React app locally and verify that it’s working correctly.
Steps & Solution:
1. Create a New React Project:
o In the terminal or command prompt, navigate to the folder where you want to create your React project.
o Run the following command to create a new React project named my-first-react-app:
sql
Copy code
npx create-react-app my-first-react-app
o The npx command runs the Create React App tool without installing it globally.
2. Navigate to the Project Folder:
o After the project is created, navigate into the project directory:
bash
Copy code
cd my-first-react-app
3. Run the React Application:
o To start the React development server, use the following command:
sql
Copy code
npm start
o This will start the local development server and open the React app in your browser at http://localhost:3000.
o You should see the default React welcome page with the message: "Edit src/App.js and save to reload."
Assignment 3: Modifying the Default React App
Task:
1. Open the src/App.js file and modify the existing content to display a custom message.
2. Add an additional <h2> header with a welcome message.
Steps & Solution:
1. Open the src/App.js file:
o In your project directory (my-first-react-app), open the src/App.js file using a code editor of your choice (e.g., Visual Studio Code, Sublime Text).
2. Modify the JSX inside App.js: Replace the default code inside the return() statement with your own content. For example:
jsx
Copy code
function App() {
return (
<div>
<h1>Hello, React!</h1>
<h2>Welcome to Your First React App</h2>
</div>
);
}
export default App;
o This will change the text displayed on the page from "Edit src/App.js and save to reload" to your custom message.
3. Save the File:
o After saving the App.js file, your browser should automatically refresh, and the changes will appear live:
css
Copy code
Hello, React!
Welcome to Your First React App
Assignment 4: Understanding Project Structure
Task:
1. Explain the purpose of the main directories and files in the React project.
2. Identify where you will write most of your application code.
Steps & Solution:
1. Main Project Structure: After running create-react-app, your project directory will look like this:
java
Copy code
my-first-react-app/
├── node_modules/
├── public/
├── src/
├── package.json
├── package-lock.json
└── README.md
2. Explanation of the Directories and Files:
o node_modules/: This folder contains all the libraries and dependencies required for your React application (e.g., React, ReactDOM, etc.). You usually don’t need to interact with this folder directly.
o public/: This folder contains the index.html file, which is the main HTML file for the app. It also contains other static assets like images and icons. You don’t write JavaScript here; it's only used for static files.
o src/: This is the most important folder for your React app. All your React components and JavaScript files should go here. The default src/App.js file is where you write most of your React code. You will also create new components in this folder.
o package.json: This file contains metadata about your project (such as its name, version, and dependencies). It also contains scripts for running and building the application.
o package-lock.json: This file locks the versions of dependencies installed, ensuring the same version of libraries is used across different machines.
o README.md: This file contains information about your project, such as instructions for setup, usage, and more.
3. Where to Write Your Application Code:
o Most of your React code (components, logic, etc.) will be written inside the src/ directory.
o The main file for your app is src/App.js, where you will build your main app component.
Assignment 5: Exploring the public/index.html File
Task:
1. Open the public/index.html file.
2. Explain the role of the <div id="root"></div> element.
3. Modify the content inside the <body> tag to add your own HTML element.
Steps & Solution:
1. Open public/index.html:
o In the project folder (my-first-react-app), open the public/index.html file.
2. Understanding the <div id="root"></div>:
o The <div id="root"></div> element is where your React components are injected into the HTML page.
o React uses this div element as a placeholder to render the UI dynamically. When the React app runs, it takes the App.js component and renders it inside this div element.
3. Modify the index.html File:
o Add your own custom HTML element inside the <body> tag. For example:
html
Copy code
<body>
<div id="root"></div>
<footer>Created with React</footer>
</body>
4. Save the File and Reload the App:
o Save the changes in index.html. After saving, you will see the new <footer> text ("Created with React") below the React app in the browser.
Conclusion:
These assignments guide you through the setup and basic understanding of React, including installing Node.js, npm, and Create React App, creating and running your first React project, and exploring the project structure. Completing these assignments will give you a solid foundation to start building React applications.
4o mini
You said:
some more
ChatGPT said:
ChatGPT
Assignment 6: Understanding JSX Syntax
Task:
1. Write a simple React component using JSX that displays a personalized greeting message.
2. Modify the JSX to use a variable for the user's name and display the name dynamically.
Steps & Solution:
1. Create a New Component:
o In the src folder, create a new file called Greeting.js.
o Inside Greeting.js, write the following code to display a static greeting message:
jsx
Copy code
function Greeting() {
return <h1>Hello, welcome to React!</h1>;
}
export default Greeting;
2. Use the Greeting Component in App.js:
o Open the src/App.js file and import the Greeting component:
jsx
Copy code
import React from 'react';
import Greeting from './Greeting';
function App() {
return (
<div>
<Greeting />
</div>
);
}
export default App;
3. Use a Variable in JSX:
o Modify Greeting.js to dynamically display the user's name by using a JavaScript variable inside JSX. For example:
jsx
Copy code
function Greeting() {
const userName = 'John';
return <h1>Hello, {userName}! Welcome to React!</h1>;
}
export default Greeting;
4. Save and Run the Application:
o After saving both Greeting.js and App.js, your browser should display a personalized greeting: "Hello, John! Welcome to React!"
Assignment 7: Using Props to Pass Data to Components
Task:
1. Create a new component called UserProfile that accepts name and age as props and displays them.
2. Use this component in App.js and pass name and age as props.
Steps & Solution:
1. Create UserProfile.js Component:
o In the src folder, create a new file called UserProfile.js.
o Inside UserProfile.js, write the following code:
jsx
Copy code
function UserProfile(props) {
return (
<div>
<h2>Name: {props.name}</h2>
<p>Age: {props.age}</p>
</div>
);
}
export default UserProfile;
2. Use UserProfile Component in App.js:
o Open App.js and import the UserProfile component:
jsx
Copy code
import React from 'react';
import UserProfile from './UserProfile';
function App() {
return (
<div>
<UserProfile name="John Doe" age={25} />
<UserProfile name="Jane Smith" age={30} />
</div>
);
}
export default App;
3. Save and Run the Application:
o After saving both files, the React app will display two user profiles with different names and ages.
Assignment 8: State Management with useState Hook
Task:
1. Create a counter that increments when a button is clicked using the useState hook.
2. Add a button that decreases the counter when clicked.
Steps & Solution:
1. Create the Counter Component:
o In src/App.js, use the useState hook to create a counter:
jsx
Copy code
import React, { useState } from 'react';
function App() {
const [counter, setCounter] = useState(0); // Declare the state
// Function to increment the counter
const increment = () => {
setCounter(counter + 1);
};
// Function to decrement the counter
const decrement = () => {
setCounter(counter - 1);
};
return (
<div>
<h1>Counter: {counter}</h1>
<button onClick={increment}>Increment</button>
<button onClick={decrement}>Decrement</button>
</div>
);
}
export default App;
2. Explanation:
o The useState(0) function initializes the counter state to 0.
o The increment function adds 1 to the counter, and the decrement function subtracts 1.
o The button's onClick event calls the respective functions when clicked.
3. Save and Run the Application:
o After saving the changes, the React app will display the current counter value with two buttons to increment and decrement the counter.
Assignment 9: Handling Events in React
Task:
1. Create a form with two input fields (one for name and one for email).
2. Display the submitted name and email on the screen after the form is submitted.
Steps & Solution:
1. Create the Form in App.js:
o Inside App.js, create a form with two input fields for name and email:
jsx
Copy code
import React, { useState } from 'react';
function App() {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
// Function to handle form submission
const handleSubmit = (e) => {
e.preventDefault();
alert(`Name: ${name}, Email: ${email}`);
};
return (
<div>
<h1>Form Submission</h1>
<form onSubmit={handleSubmit}>
<label>Name:</label>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
/>
<br />
<label>Email:</label>
<input
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<br />
<button type="submit">Submit</button>
</form>
</div>
);
}
export default App;
2. Explanation:
o The useState hook is used to store the values of the name and email inputs.
o The handleSubmit function is triggered when the form is submitted.
o Inside handleSubmit, e.preventDefault() prevents the default form submission behavior, and an alert is displayed showing the values of name and email.
3. Save and Run the Application:
o After saving the changes, the app will display a form with fields for name and email. When the form is submitted, the entered name and email will be displayed in an alert.
Assignment 10: Conditional Rendering in React
Task:
1. Create a component that displays either a "Welcome" message if a user is logged in or a "Please log in" message if the user is not logged in.
2. Use a button to toggle the user's login status.
Steps & Solution:
1. Create the Conditional Rendering Component:
o In App.js, use the useState hook to manage the login status:
jsx
Copy code
import React, { useState } from 'react';
function App() {
const [isLoggedIn, setIsLoggedIn] = useState(false); // Track login status
// Toggle login status
const toggleLogin = () => {
setIsLoggedIn(!isLoggedIn);
};
return (
<div>
<h1>{isLoggedIn ? 'Welcome!' : 'Please log in'}</h1>
<button onClick={toggleLogin}>
{isLoggedIn ? 'Log Out' : 'Log In'}
</button>
</div>
);
}
export default App;
2. Explanation:
o The isLoggedIn state keeps track of whether the user is logged in.
o The toggleLogin function toggles the isLoggedIn state between true and false.
o The JSX conditionally renders either "Welcome!" or "Please log in" based on the value of isLoggedIn.
o The button's text and functionality also change depending on whether the user is logged in.
3. Save and Run the Application:
o After saving, the app will display either a "Welcome!" or "Please log in" message. The button will toggle between "Log In" and "Log Out" when clicked.
Conclusion:
These assignments deepen your understanding of key React concepts such as JSX syntax, props, state management, handling events, and conditional rendering. Working through these tasks will help you get comfortable with creating interactive React applications.
4o mini
You said:
WRITE 100 no of MCQs FROM ABOVE CONCEPT
ChatGPT said:
ChatGPT
Here are 100 multiple-choice questions (MCQs) based on the concepts of setting up a React environment, understanding JSX, props, state management, handling events, and conditional rendering. The questions are designed to test knowledge and understanding of fundamental React concepts for beginners.