ReactJS - Creating a React App


Before creating a React app, make sure you have Node.js installed. You can check by running: 

C:\>node -v
v20.10.0
C:\>npm -v
10.2.3

If not installed, download it from Node.js official website, https://nodejs.org/en.

Create a New React App using Vite

Vite provides an efficient way to scaffold a React project with minimal configuration. In your terminal, navigate to the folder where you want to create your project and run.

Step 1: Run the Command 

D:\React>npm create vite@latest myapp

Step 2: Choose a Framework & Variant

After running the command, you'll see the belown shown image in your terminal, in that select React using the arrow keys and press Enter.

Create App

Next, choose JavaScript using the arrow keys and press Enter.

Create App Create App

Step 3: Navigate into the Project Folder

D:\React>cd my-app

Step 4: Install Dependencies

D:\React\cd my-app>npm install
Create App

Step 5: Start the Development Server

D:\React\cd my-app>npm run dev
Create App

Output:

Open http://localhost:5173/ in your browser to see your new React app running.

Create App

Modifying the App.jsx to modify the UI:

Now, let's remove the default code from App.jsx and create a fresh structure while also modifying index.css to remove default styles.

App.jsx 
function App() {
  return (
    <div>
      <h1>Welcome to My React App </h1>
    </div>
  )
}
export default App

Output:

D:\React\cd my-app>npm run dev

Open http://localhost:5173/ in your browser to see your new React app running.

Create App