📄Assignments Of Class 2
File Structure and JSX Basics
🔸 Assignment 1: Identify
Files
Objective: Understand the basic React project
structure.
Task:Open your React project and write the purpose of the following files:
- index.js
- App.js
- index.html
- package.json
🔸 Assignment 2: Modify
App.js
Objective: Learn how to edit and render JSX
content.
Task:Open App.js and change the JSX to show:
- A heading with your name.
- A paragraph with your favorite
color.
🔸 Assignment 3: Create a JSX
Greeting
Objective: Use variables inside JSX.
Task:In App.js, declare a variable name = "YourName" and render the
following:
<h1>Hello, {name}!</h1>
🔸 Assignment 4: Display Math
Operations in JSX
Objective: Use expressions inside JSX.
Task:Create a component that displays the result of some math operations:
<p>5 + 3 = {5 + 3}</p>
<p>10 - 2 = {10 - 2}</p>
<p>4 * 3 = {4 * 3}</p>
🔸 Assignment 5: Use an
Object in JSX
Objective: Access object properties in JSX.
Task:Create a user object with firstName, lastName, and age, then display it:
<h2>{user.firstName} {user.lastName}</h2>
<p>Age: {user.age}</p>
🔸 Assignment 6: JSX Rules
Practice
Objective: Practice JSX syntax rules.
Task:Create a JSX layout with:
- One parent <div>.
- A heading, an image
(self-closing), and a paragraph.
- Use className to apply CSS
styling.
🔸 Assignment 7: Profile
Component
Objective: Create a custom component.
Task:Create a new file called Profile.js and write a React functional component that
displays:
- Your name
- Your age
- Your hobby
- An expression showing your age
next year
🔸 Assignment 8: Add Profile
to App
Objective: Import and use a component in App.js.
Task:Import the Profile component created in Assignment 7 into App.js and display it
inside the return statement.
🔸 Assignment 9: Create a
Simple JSX Card
Objective: Build a simple UI layout using JSX.
Task:Create a card-like structure:
<div className="card">
<h2>Your Name</h2>
<p>Hobby: Your Hobby</p>
<p>Favorite Language: JavaScript</p>
</div>
🔸 Assignment 10: Personal
Info Page (Homework Extension)
Objective: Combine all JSX knowledge.
Task:Create a new component MyInfo.js and display the following:
- Name
- Age
- City
- A short introduction paragraph
- One dynamic expression (like
age + 1 or string concatenation)
✅ Solutions
✅ Assignment 1: Understand React File Structure
Task:
Write
the purpose of the following files:
- index.js
- App.js
- index.html
- package.json
Solution:
|
File Name |
Description |
|
index.js |
Entry point of the React app. Renders the App component to
the DOM. |
|
App.js |
Main React component. It returns JSX and displays the user
interface. |
|
index.html |
The HTML file with a root <div> where React renders
the app. |
|
package.json |
Stores metadata, scripts, and dependencies used in the
project. |
✅ Assignment 2: Modify App.js to
Display Personal Info
Task:
Open
App.js and change it to display:
- A heading with your name.
- A paragraph with your favorite
programming language.
Solution (App.js):
function App() {
return (
<div>
<h1>My Name is Raj</h1>
<p>My favorite programming language is JavaScript.</p>
</div>
);
}
export default App;
✅ Assignment 3: Use Variables Inside
JSX
Task:
Declare
a variable name and use it inside an <h1> tag.
Solution:
function App() {
const name = "Anita";
return (
<div>
<h1>Hello, {name}!</h1>
</div>
);
}
export default App;
✅ Assignment 4: JSX with Math
Expressions
Task:
Display
the results of simple math operations using JSX.
Solution:
function App() {
return (
<div>
<p>5 + 3 = {5 + 3}</p>
<p>10 - 2 = {10 - 2}</p>
<p>4 * 3 = {4 * 3}</p>
</div>
);
}
export default App;
✅ Assignment 5: Use Objects in JSX
Task:
Create
a user object and display its values using JSX.
Solution:
function App() {
const user = {
firstName: "John",
lastName: "Doe",
age: 30
};
return (
<div>
<h2>{user.firstName} {user.lastName}</h2>
<p>Age: {user.age}</p>
</div>
);
}
export default App;
✅ Assignment 6: Practice JSX Syntax
Rules
Task:
Write
JSX that:
- Uses one root element.
- Has an image (self-closing).
- Uses className.
Solution:
function App() {
return (
<div className="profile-box">
<h1>Welcome to My Page</h1>
<img src="https://via.placeholder.com/150" alt="Profile"
/>
<p>This is a JSX layout example.</p>
</div>
);
}
export default App;
✅ Assignment 7: Create a Profile
Component
Task:
Create
Profile.js component to show:
- Name
- Age
- Hobby
- Age next year
Solution (Profile.js):
function Profile() {
const name = "Meena";
const age = 25;
const hobby = "Reading";
<div>
<h1>{name}</h1>
<p>Age: {age}</p>
<p>Hobby: {hobby}</p>
<p>Next year I will be {age + 1} years old.</p>
</div>
);
}
export default Profile;
✅ Assignment 8: Import and Display
Profile Component
Task:
Use
the Profile component created in Assignment 7 inside App.js.
Solution (App.js):
import Profile from './Profile';
function App() {
return (
<div>
<Profile />
</div>
);
}
export default App;
✅ Assignment 9: Create a Simple JSX
Card
Task:
Design
a card using JSX that displays name, hobby, and favorite language.
Solution:
function App() {
return (
<div className="card">
<h2>Ravi Kumar</h2>
<p>Hobby: Drawing</p>
<p>Favorite Language: Python</p>
</div>
);
}
export default App;
✅ Assignment 10: MyInfo Component
(Homework Extension)
Task:
Create
MyInfo.js to display:
- Name
- Age
- City
- Intro paragraph
- Expression in JSX
Solution (MyInfo.js):
function MyInfo() {
const name = "Shreya";
const age = 22;
const city = "Mumbai";
return (
<div>
<h1>{name}</h1>
<p>Age: {age}</p>
<p>City: {city}</p>
<p>Hi, I’m {name} from {city}. I love learning React.</p>
<p>Next year I will be {age + 1} years old.</p>
</div>
);
}
export default MyInfo;
Then, in App.js:
import MyInfo from './MyInfo';
return (
<div>
<MyInfo />
</div>
);
}
export default App;
