How to Create Your First React App

This quick tutorial will get you set up with your first React app in no time. We'll use create-react-app with npm, a ready-made React starter application that contains all the files and dependencies you need to get going immediately without having to mess around with Webpack and Babel configurations.

Step 1: Set Up the Development Environment

1. Install NodeJS: Go to the NodeJS website and download the latest stable version for your operating system. Once downloaded, follow the installation instructions.
2. Verify the installation: Open a terminal window or command prompt and run the following command to make sure NodeJS and npm are installed properly:

node -v
npm -v

You should see the versions of NodeJS and npm printed in the terminal.

Step 2: Create A New React App

1. Open a terminal window or command prompt if you haven't already done so.
2. Navigate to the directory where you want to create your first React app.
3. Run the following command to create a new React app using the Create React App tool:

npx create-react-app [my-app]

Replace [my-app] with whatever name you'd like to use for your application. The app name must be in all lowercase letters. This command will create a new directory with the selected project name and all necessary files and dependencies for your React app.

4. Once the command finishes executing, navigate to the newly created app directory:

cd [my-app]

Step 3: Start the Development Server

1. In the terminal, run the following command to start the development server for your React app:

npm start

This command will start the development server and open your app in a web browser. By default, it will run on http://localhost:3000.

2. You should now see a "Welcome to React" page in your browser if everything is set up correctly.

First React app

Conclusion

That's it! You've successfully created your first React app. You can now start building your React components and make modifications to the newly created source code located in the src directory.

As long as you keep your application running in the terminal, updates made to the source code should reflect in the web browser in real time when saving code updates in the IDE (integrated development environment) of your choice.