💻Lecture Notes Of Class 2
File Structure and JSX Basics

Objective:

Understand the basic file structure of a React application.
Learn what JSX is and how to write basic JSX code.
Understand the rules and syntax of JSX.
Use JSX expressions and variables inside components.

1. Introduction to React File Structure

When you create a React app (usually using create-react-app or Vite), you get a project with a specific structure. Understanding this structure helps you know where to write your code and how React works internally.

Key files in React app:

index.js

Entry point of the React app.
Responsible for rendering the root React component into the actual HTML page.
Usually looks like this:

import React from 'react';

import ReactDOM from 'react-dom/client';

import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<App />);

App.js

This is the main component of your app.
Think of it as the starting component that you will build and add more components to.
Example:

function App() {

return (

<div>

<h1>Hello, React!</h1>

</div>

);

}

export default App;

public/index.html

The HTML file where React injects the app inside the <div id="root"></div>.
You usually don’t edit this file for your app UI.

2. What is JSX?

JSX stands for JavaScript XML.
It is a syntax extension for JavaScript, used in React to describe what the UI should look like.
JSX looks like HTML but is actually JavaScript.
React transforms JSX into JavaScript code that creates React elements.

Why JSX?

It makes writing React components easier and more readable.
Combines UI and logic in one place.

3. Basic JSX Syntax and Rules

JSX Syntax Example:

const element = <h1>Hello, world!</h1>;

Important JSX Rules:

1. Must return a single root element
If you want to return multiple elements, wrap them in a container like <div> or <> (React Fragment):

return (

<div>

<h1>Title</h1>

<p>This is a paragraph.</p>

</div>

);

2. Use className instead of class
Because class is a reserved word in JavaScript, React uses className to apply CSS classes.

<div className="container">Content</div>

3. Self-closing tags
All tags must be closed. If there is no closing tag, use a self-closing tag.

4. JavaScript expressions inside JSX use curly braces {}

const name = "John";

const greeting = <h1>Hello, {name}!</h1>;

4. Using Expressions and Variables in JSX

You can embed any JavaScript expression in JSX inside {} braces.

Examples:

const age = 25;

const greeting = <p>Your age is {age}</p>;

const math = <p>2 + 3 = {2 + 3}</p>;

const user = {

firstName: "Alice",

lastName: "Smith"

};

const fullName = <h2>{user.firstName} {user.lastName}</h2>;

JSX with variables inside a component (App.js):

function App() {

const name = "David";

const currentYear = new Date().getFullYear();

return (

<div>

<h1>Welcome, {name}!</h1>

<p>The current year is {currentYear}.</p>

</div>

);

}

5. Activity: Write JSX with Variables and Expressions

Task: Write a simple React component that uses variables and expressions in JSX.

Example:

function Profile() {

const firstName = "John";

const lastName = "Doe";

const age = 28;

const hobby = "coding";

return (

<div>

<h1>{firstName} {lastName}</h1>

<p>Hobby: {hobby}</p>

<p>Next year, I will be {age + 1} years old.</p>

</div>

);

}

export default Profile;

6. Homework:

Create a JSX page showing your profile with the following details:

Your full name
Your age
Your favorite hobby or interest
A sentence that uses an expression (like calculating your age next year)

Solutions:

File: Profile.js

import React from 'react';

const Profile = () => {

const fullName = "Rashmi Mishra";

const age = 25;

const hobby = "Reading books";

return (

<h1>My Profile</h1>

<p><strong>Full Name:</strong> {fullName}</p>

<p><strong>Favorite Hobby:</strong> {hobby}</p>

<p>Next year, I will be <strong>{age + 1}</strong> years old!</p>

</div>

);

};

export default Profile;

🚀 To Render It in Your App:

If you are using a React app created with Vite or Create React App:

// File: App.js or App.jsx

import React from 'react';

import Profile from './Profile';

function App() {

return (

<div>

</div>

);

}

export default App;

📁 Folder Structure Suggestion

src/

├── App.js

├── Profile.js

Summary:

React apps have a simple file structure, mainly index.js and App.js.
JSX allows writing UI inside JavaScript code.
JSX has specific rules: one root element, use className, always close tags, and embed expressions with {}.
You can use JavaScript variables and expressions inside JSX to make dynamic content.

💻Lecture Notes Of Class 2 File Structure and JSX Basics

💻Lecture Notes Of Class 2
File Structure and JSX Basics

Post a Comment