1. Download Node.
js:
o Visit Node.js official website and download the LTS version.
o Install it by following the prompts.
2. Verify Installation:
Open a terminal and check the versions:
bash
Copy code
node -v
npm -v
3. Create a New React App:
o Navigate to the folder where you want your project.
o Run the following command to create a React app:
bash
Copy code
npx create-react-app my-app
o Once the setup is complete, navigate to the project folder:
bash
Copy code
cd my-app
Step 2: Setup Visual Studio Code and React Application
1. Download and Install Visual Studio Code:
o Get it from Visual Studio Code's official website.
2. Open the Project in VS Code:
o Launch VS Code and select File > Open Folder.
o Choose the my-app folder you just created.
3. Install Recommended Extensions:
o Install the following VS Code extensions:
ES7+ React/Redux/React-Native snippets for React snippets.
Prettier for code formatting.
Step 3: Create the Home Page of the Application
1. Modify App.js:
o Open the App.js file in your project.
o Replace the contents with a simple Home Page layout:
javascript
Copy code
import React from 'react';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<h1>Welcome to My React Application</h1>
<p>This is the home page of my first React app!</p>
</header>
</div>
);
export default App;
2. Update App.css:
o Add some basic styling to App.css:
css
Copy code
.App {
text-align: center;
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
Step 4: Run the Application in the Browser
1. Start the Development Server:
o In the terminal, inside the project directory, run:
bash
Copy code
npm start
o This will start the development server, and your browser should automatically open
at http://localhost:3000.
2. View Your Home Page:
o The browser will display your "Welcome to My React Application" message.
