Scribd
Upload
2 views

React Js Assigment

Uploaded by

Santosh Kalyan Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views

React Js Assigment

Uploaded by

Santosh Kalyan Kumar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

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.

You might also like