📄 Assignments Of Class 1
React Introduction (Class 1)
📝 Assignment 1: Define React
- Task: Write a short note (100–150 words) on what React is and its main purpose.
- Goal: Understand React as a JavaScript library for building UIs.
📝 Assignment 2: Features of React
- Task: List at least 5 features of React and explain each in one sentence.
- Goal: Recognize the key benefits of using React.
📝 Assignment 3: Difference Between SPA and MPA
- Task: Create a comparison table between Single Page Application (SPA) and Multi Page Application (MPA).
- Goal: Understand the architecture and behavior differences.
📝 Assignment 4: Explain Virtual DOM
- Task: Write a short explanation of the Virtual DOM and why React uses it.
- Goal: Learn how React optimizes UI updates.
📝 Assignment 5: JSX Syntax Practice
- Task: Write a small JSX code snippet that displays your name and favorite programming language inside a <div>.
- Goal: Get familiar with JSX and syntax rules.
const element = <div>My name is Rahul. I love JavaScript!</div>;
📝 Assignment 6: JSX vs HTML
- Task: Write 3 key differences between JSX and HTML with examples.
- Goal: Identify how JSX differs from regular HTML.
📝 Assignment 7: Set Up Your First React App
- Task:
1. Install Node.js and VS Code.
2. Create a new React app using npx create-react-app.
3. Run the app and take a screenshot of the browser showing the default page.
- Goal: Practice setting up the React development environment.
📝 Assignment 8: Folder Structure Diagram
- Task: Draw or describe the folder structure created by create-react-app, including src, public, and main files like App.js and index.js.
- Goal: Understand the initial React project layout.
📝 Assignment 9: Describe JSX Rules
- Task: Write down 5 basic JSX rules (e.g., using className instead of class, closing tags, using curly braces for expressions, etc.).
- Goal: Reinforce JSX syntax awareness.
📝 Assignment 10: Research-Based Task
- Task: Watch any React introduction video and write down:
- The title and link of the video
- 5 new things you learned
- Goal: Encourage self-learning and exploration beyond the classroom.
✅ Assignment 1: Define React
📝 Task:
Write a short note on what React is and its main purpose.
✅ Solution:
React is a JavaScript library developed by Facebook for building user interfaces, especially for Single Page Applications (SPAs). It allows developers to build reusable UI components that efficiently update and render when data changes. React uses a component-based architecture, which makes code more modular and easier to maintain. It is widely used for creating dynamic, responsive, and modern web applications.
✅ Assignment 2: List 5 Features of React
📝 Task:
List at least 5 features of React and explain each in one sentence.
✅ Solution:
Feature | Explanation |
Component-Based | UI is built using independent, reusable pieces called components. |
Virtual DOM | React updates only the changed parts of the page using a virtual representation of the DOM. |
JSX Syntax | JSX allows HTML to be written inside JavaScript, improving readability. |
One-Way Data Binding | Data flows in a single direction, making it easier to debug and manage. |
Fast Performance | Virtual DOM and efficient diffing algorithms make React apps fast. |
✅ Assignment 3: SPA vs MPA
📝 Task:
Compare Single Page Application (SPA) and Multi Page Application (MPA).
✅ Solution:
Feature | SPA | MPA |
Number of HTML Pages | One main page | Multiple pages |
Page Reload | No reload needed | Full reload on each navigation |
Speed | Faster after first load | Slower due to reloads |
Technologies Used | React, Angular | PHP, JSP, traditional HTML |
Example | Gmail | Amazon |
✅ Assignment 4: Explain Virtual DOM
📝 Task: What is Virtual DOM? Why is it used in React?
✅ Solution:
The Virtual DOM is a lightweight, in-memory representation of the actual DOM. When the state or data of a component changes, React updates the Virtual DOM instead of the real DOM. Then it compares (diffs) the new Virtual DOM with the previous one and only applies the minimal required changes to the real DOM. This makes rendering faster and more efficient, especially in large applications.
✅ Assignment 5: Write JSX to Display Your Info
📝 Task:Write a JSX snippet that displays your name and favorite language.
✅ Solution:
const element = (
<div>
<h1>Hello! My name is Anjali.</h1>
<p>My favorite language is JavaScript.</p>
</div>
);
✅ This JSX:
- Has a single parent <div>
- Uses valid JSX syntax
- Can be rendered in the App.js file
✅ Assignment 6: JSX vs HTML
📝 Task:List 3 differences between JSX and HTML with examples.
✅ Solution:
Feature | JSX | HTML |
Class attribute | className="btn" | class="btn" |
Must close tags | <br /> | <br> |
JS inside | { 2 + 2 } | Not allowed |
Example (JSX):
<div className="header">{2 + 2}</div>
Example (HTML):
<div class="header">4</div>
✅ Assignment 7: Set Up React Project (Practical)
📝 Task:Install Node.js, VS Code, and create your first React app.
✅ Solution:
Steps:
1. Download and install Node.js from https://nodejs.org.
2. Install VS Code from https://code.visualstudio.com.
3. Open Terminal in VS Code and run:
npx create-react-app my-first-react-app
cd my-first-react-app
npm start
4. React app opens in your browser at http://localhost:3000.
📸 Output: (students can attach screenshot)
✅ Assignment 8: Explain React Project Folder Structure
📝 Task:Describe the default folders/files created by create-react-app.
✅ Solution:
Folder/File | Purpose |
public/ | Contains index.html, the root HTML file |
src/ | Contains JavaScript/JSX code (e.g., App.js, index.js) |
App.js | Main component file |
index.js | Entry point that renders App into the DOM |
package.json | Lists all dependencies and scripts |
✅ Assignment 9: Write 5 JSX Rules
📝 Task:List 5 important JSX rules with examples.
✅ Solution:
Rule | Example |
Must return one parent element | <div><h1>Hello</h1></div> |
Use className instead of class | <div className="box"> |
Tags must be closed | <img src="logo.png" /> |
JavaScript inside {} | {2 + 2} inside JSX |
Attribute names use camelCase | onClick={handleClick} |
✅ Assignment 10: React Intro Video Review
📝 Task:Watch any intro React video and write 5 things you learned.
✅ Solution (Sample):
Video: React JS Crash Course by Traversy Media
Link: https://www.youtube.com/watch?v=w7ejDZ8SWv8
5 Things Learned:
1. React uses JSX to write UI code.
2. create-react-app helps to quickly scaffold a project.
3. The concept of Virtual DOM improves performance.
4. Components can be functional or class-based.
5. React apps run on http://localhost:3000.
