Assignments On Class1/DAY 1
Introduction to React
These assignments guide you through setting up a React project, understanding the folder structure, and creating simple components.
Assignment 1:
Set Up a Basic React Application
Objective: Set up a React project using Create React App and run the application.
Instructions:
1. Install Node.js and npm (if not already installed).
o Download Node.js from here.
o After installation, verify the installation by running the following commands in the terminal:
node -v
npm -v
2. You should see version numbers for both Node.js and npm.
3. Create a new React app using Create React App.
o Open a terminal and run the following command:
npx create-react-app my-first-react-app
4. This will create a new folder named my-first-react-app with all the necessary files to start a React project.
5. Navigate to the project folder:
cd my-first-react-app
6. Start the React development server:
npm start
7. Verify the setup:
o Open your web browser and go to http://localhost:3000.
o You should see the default React welcome page.
Solution and Explanation:
When you use the npx create-react-app command, it generates a React application with a default structure. The npm start command runs the development server and automatically opens the application in your browser at http://localhost:3000. You can now start editing the app.
Assignment 2:
Explore and Modify the Default React App
Objective: Learn the folder structure and modify the default App.js component.
Instructions:
1. Locate and open the src/App.js file in your code editor.
2. Modify the default content in App.js: Replace the existing JSX code with the following:
|
function
App() { return
( <div
className="App"> <h1>Welcome
to My First React App!</h1> <p>This
is a simple React application.</p> </div> ); } export default App; |
3. Save the file and check the result:
o After saving the file, your browser should automatically refresh, showing the updated content.
4. Add a new paragraph below the existing one with some personal information (e.g., your name and the purpose of the app):
<p>Created by: [Your Name]</p>
5. Challenge (Optional): Change the color of the <h1> text to blue using inline styles:
<h1 style={{ color: 'blue' }}>Welcome to My First React App!</h1>
Solution and Explanation:
In the App.js file:
- We define a React component called App using a function component (since React supports both function and class components).
- Inside the function, we return JSX, which represents the UI of the app.
- We modified the default content by changing the text and adding a new paragraph.
- Inline styles in React can be applied using the style attribute, which takes an object where the key is the CSS property (in camelCase) and the value is the style.
Assignment 3: Understanding JSX and React Components
Objective: Learn about JSX and React components by creating a simple custom component.
Instructions:
1. Create a new component called Greeting.js:
o Inside the src folder, create a new file named Greeting.js.
o Add the following code to define a simple functional component:
|
function Greeting() { return
<h2>Hello, welcome to React!</h2>; } export default Greeting; |
2. Use the Greeting component in App.js:
o Open src/App.js and import the Greeting component at the top:
import Greeting from './Greeting';
o Then, use it inside the App component's return statement:
|
function
App() { return
( <div
className="App"> <h1>Welcome
to My First React App!</h1> <Greeting
/> </div> ); } |
3. Save all files and observe the changes in the browser:
o Your browser should now display the new greeting message: "Hello, welcome to React!"
Solution and Explanation:
- Creating a Component: In React, components are reusable pieces of UI. The Greeting component is a simple function that returns JSX (HTML-like code).
- Importing and Using Components: We import Greeting into App.js and then use it like an HTML tag. React components are used in this way—by calling them with a tag-like syntax.
- JSX Syntax: JSX allows you to write HTML-like code in JavaScript. It is not HTML; it gets compiled to JavaScript that React can use to render the UI.
Assignment 4: Inline Styles and Rendering Dynamic Data
Objective: Practice applying inline styles and rendering dynamic data in React components.
Instructions:
1. Modify App.js to display a dynamic greeting:
o Add a name variable in the App component to store a name (for example, your own name):
|
function
App() { const
name = 'John Doe'; return
( <div
className="App"> <h1>Welcome,
{name}!</h1> </div> ); } |
2. Apply inline styles to the greeting message:
o Add an inline style to change the color of the greeting message to green:
<h1 style={{ color: 'green' }}>Welcome, {name}!</h1>
3. Render additional dynamic data:
o Below the greeting, render a short message that dynamically changes based on the name variable:
<p>{name} is learning React!</p>
4. Test your changes:
o Your page should now show a dynamic greeting message with inline styles, and a personalized message about learning React.
Solution and Explanation:
- Dynamic Data: In React, we can render dynamic data by using curly braces {}. Anything inside these curly braces will be evaluated as JavaScript, such as variables, expressions, or function calls.
- Inline Styles: We can apply inline styles in JSX by passing an object to the style attribute. The property names are written in camelCase (e.g., backgroundColor instead of background-color).
- Rendering Variables: The {name} variable dynamically inserts the value into the JSX, making the greeting and message personalized.
Assignment 5: Review and Reflect on JSX Syntax
Objective: Understand and apply JSX syntax rules and best practices.
Instructions:
1. Fix the following JSX errors:
o Review the incorrect JSX code and correct it. Write your corrected code in a new file called FixJSX.js:
|
//
Incorrect JSX code function
App() { return
( <div> <h1>Hello,
World!</h1> <p>This
is a paragraph. </div> ); } |
o Errors:
§ The <p> tag is missing a closing tag.
§ JSX requires that all elements have a single parent element (e.g., <div>).
2. Write the corrected code:
|
function
App() { return
( <div> <h1>Hello,
World!</h1> <p>This
is a paragraph.</p> </div> ); } |
Solution and Explanation:
- Closing Tags: In JSX, all tags must be properly closed. If you open a tag like <p>, you must close it with </p>.
- Single Parent Element: JSX requires that all elements return from a component must be enclosed within a single parent element. In the previous code, we wrapped everything in a <div>, which is a common practice.
Conclusion:
These assignments provide a hands-on approach to understanding key React concepts such as component creation, JSX syntax, dynamic rendering, and inline styling. By completing them, you will get a better understanding of how React works, which will help you as you move forward with building more complex applications.