Create React App | Fervor Coding

To create a React project with Vite

follow these steps:

Make sure you have Node.js installed on your system. You can download and install it from the official Node.js website:

   https://nodejs.org/

Open your terminal or command prompt and navigate to the directory where you want to create your project.
Run the following command to install Vite globally:
```
npm install -g create-vite
```
Once the installation is complete, use the following command to create a new React project with Vite:

   create-vite my-react-app --template react

Replace “my-react-app” with the name of your project. You can choose any other valid name.

Change into the project directory:

   cd my-react-app

Install the project dependencies:

   npm install

After the dependencies are installed, you can start the development server by running:

   npm run dev

This will start the development server, and you should see the application running at http://localhost:3000.

Congratulations! You have successfully created a React project with Vite. You can now start building your React application by editing the files in the project directory.

##My old method if you like

Creating a React App with Create React App - A Step-by-Step Tutorial

Prerequisites: Before we begin, make sure you have the following prerequisites installed on your machine:

Node.js (version 12 or above)
npm (Node Package Manager) or Yarn (preferred)

Step 1: Installing Create React App

To start, let’s install Create React App globally on your machine. Open your terminal and run the following command:

npm install -g create-react-app

Step 2: Creating a New React App

Once Create React App is installed, we can use it to create a new React application. In your terminal, navigate to the directory where you want to create your project and run the following command:

npx create-react-app my-react-app

This command creates a new directory named “my-react-app” and installs all the necessary files and dependencies.

Step 3: Exploring the Project Structure

After the installation is complete, navigate into the newly created project directory:

cd my-react-app

Inside the project directory, you’ll find a structure that looks like this:

my-react-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

Step 4: Starting the Development Server

To see our React application in action, let’s start the development server. In the terminal, run the following command:

npm start

This command will compile your React code and launch the development server. Open your browser and navigate to http://localhost:3000. You should see the default React app, which displays the React logo and a welcome message.

Step 5: Modifying the App Component

Let’s make some changes to the default app component to get a better understanding of how React works. Open the src/App.js file in your favorite code editor and modify the content as follows:

import React from 'react';

function App() {
  return (
    <div>
      <h1>Welcome to My React App!</h1>
      <p>Let's build something amazing together.</p>
    </div>
  );
}

export default App;

Save the file, and you’ll see the changes reflecting automatically in the browser.

Conclusion:

Congratulations! You’ve successfully created a React application using Create React App. We covered the installation process, explored the project structure, started the development server, and made modifications to the default app component. Now you’re ready to dive deeper into React and build powerful and interactive user interfaces. Keep exploring the vast ecosystem of React, and happy coding!

Remember to check the official Create React App documentation (https://create-react-app.dev) for more information on advanced configurations and deployment options. Feel free to ask any questions you have, and I’ll be happy to help you along your React journey.