ReactJS – How to Install and Run ReactJS App for the First Time: Absolute Beginners Guide

Learn how to install ReactJS and run your first React app. This beginner’s guide walks you through the installation of NodeJS, creating a React project, and running it step-by-step.

Introduction to ReactJS

ReactJS is one of the most popular and powerful JavaScript libraries used for building user interfaces, especially for web applications. If you are a beginner in web development and want to dive into ReactJS, you’re in the right place. This guide will take you through all the steps needed to install and run your first ReactJS app with zero prior knowledge. Let’s get started on your journey to building awesome web apps!

What You Need Before You Begin

Before you start creating a React app, there are a few tools and software you’ll need to have installed on your computer:

1. Node.js: React requires Node.js to run. Node.js is a JavaScript runtime that helps with executing JavaScript code outside a browser, and it includes the Node Package Manager (npm), which is essential for managing packages in your React projects.
2. Code Editor: Although you can use any text editor, Visual Studio Code (VSCode) is a popular choice among developers for React app development due to its features and ease of use.

Now, let’s go through the steps required to get your first ReactJS app up and running.

Step 1: Download and Install NodeJS

To get started with React, the first thing you need to do is install NodeJS. You can download it from the official website.

How to Install NodeJS:

1. Go to the official NodeJS website.
2. Choose the LTS (Long Term Support) version for stability and compatibility.
3. Download the installer that matches your operating system (Windows, macOS, or Linux).
4. Run the installer and follow the on-screen instructions to complete the installation.

Once NodeJS is installed, open Terminal on macOS or Linux, or the Command Prompt or VSCode Terminal on Windows to confirm that the installation was successful.

Verify NodeJS Installation

To check if NodeJS is installed correctly, type the following commands in the terminal:

bashCopy codenode -v
npm -v

If NodeJS is installed correctly, you should see the version numbers of Node and npm displayed.

Step 2: Create a React Project Using Vite

Now that NodeJS is installed, it’s time to create your React app. Vite is a modern build tool that works perfectly for React and is faster than older tools like Create React App (CRA). We’ll use Vite to set up the project.

Create Your React App:

1. Open your terminal (or VSCode terminal) and navigate to the folder where you want to create your React app. You can do this using the cd command (e.g., cd Desktop/Projects).
2. Run the following command to create a React project with Vite:

npm create vite@latest

This will prompt you to enter a project name and choose a framework.

Step 3: Name Your Project

You will be asked to choose a project name. This is where you can name your app. For example, let’s name it my-react-app.

? Project name: my-react-app

Hit Enter, and Vite will set up the project structure for you.

Step 4: Choose React Framework

Next, you’ll be prompted to choose a framework for your app. Since you are building a React app, you will select React.

? Select a framework: React

Press Enter to proceed.

Step 5: Choose JavaScript or TypeScript

Next, you’ll be asked if you want to use JavaScript or TypeScript. TypeScript adds static typing and is great for larger projects, but if you’re just starting out, it’s best to choose JavaScript for simplicity.

? Select a variant: JavaScript

After selecting JavaScript, Vite will generate a new React project folder.

Step 6: Install Dependencies

Once the project is created, navigate into your project directory and install all the dependencies required by the React app.

1. Navigate into the project folder:

cd my-react-app

2. Install the dependencies:

npm install

This will install all the packages and libraries needed to run your React app.

Step 7: Run the Development Server

Now that all dependencies are installed, you can start the development server and view your React app in action.

1. Run the following command to start the development server:

npm run dev

2. After a few moments, you should see a message indicating the local web server address, which typically looks like:

Local: http://localhost:5173/

Step 8: View Your React App in the Browser

Open your browser and type in the address http://localhost:5173/. You should now see the default React welcome page, indicating that everything is set up correctly!

Step 9: Restarting the Server

When you close the terminal or shut down your computer, the development server will stop. To restart the server, follow these steps:

1. Open the terminal and navigate back to your project folder:

cd my-react-app

2. Run the following command to restart the server:

npm run dev

After a few seconds, you’ll see the server is up again, and you can refresh the page in your browser to view your React app.

Additional Tips for Beginners

Now that you’ve successfully installed and run your first React app, here are some additional tips to help you move forward in your React development journey:

1. Explore the Project Structure

Your React project contains several key files and folders. Here’s a brief overview:

• public/index.html: The root HTML file that loads the React app.
• src/App.js: The main component of your React app.
• src/index.js: The entry point of your React app where components are rendered.

Explore these files to understand the basic structure of a React app.

2. Start Editing Your App

Now that you have the basic React setup, you can start making changes to the App.js file. React components are reusable pieces of UI, so you can modify or create new components.

For example, try changing the content of the App component:

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
    </div>
  );
}

export default App;

After saving the changes, refresh the browser to see your updates!

3. Learn About React Hooks

React hooks like useState and useEffect allow you to add state and lifecycle functionality to your components. As you progress, make sure to learn and understand how to use hooks effectively.

Common Issues and Troubleshooting

While following these steps, you may run into a few common issues. Here are some troubleshooting tips:

Problem: “Command not found: npm”

• Solution: Ensure Node.js is correctly installed by running node -v and npm -v to verify versions.

Problem: “App is not opening in the browser”

• Solution: Ensure that you’re using the correct URL (usually http://localhost:5173/) and check if the development server is running (npm run dev).

Problem: “Dependency errors during npm install“

• Solution: Delete the node_modules folder and the package-lock.json file, then try running npm install again.

Conclusion

Congratulations! You’ve just created and run your first ReactJS app. React is an incredibly powerful library for building dynamic and interactive web applications, and now you have the foundation to start creating your own projects. Remember to explore more advanced topics like React Router, State Management, and Hooks to become a React expert.

Happy coding!

FAQs

1. Do I need to install any software other than NodeJS to start with React?

No, as long as you have NodeJS installed, you’re good to go! You will also need a text editor like Visual Studio Code to write your React code.

2. Can I use Create React App instead of Vite?

Yes, Create React App is an older tool, but it still works well for creating React applications. However, Vite offers faster build times and a more modern development experience.

3. What happens if I close the terminal while the React server is running?

If you close the terminal, the server stops running. You can restart it by navigating to your project folder and running the npm run dev command.

4. How do I deploy my React app?

Once your app is ready, you can deploy it on platforms like Vercel, Netlify, or GitHub Pages for free. All you need is a repository for your app, and the platform will handle the deployment process.

5. Should I use JavaScript or TypeScript for my first React app?

For beginners, it’s generally easier to start with JavaScript. TypeScript is a superset of JavaScript and provides additional features like static typing, but it can be overwhelming for beginners.

This guide has walked you through the entire process of installing and running your first React app. React is an exciting and powerful tool for web development, and with practice, you’ll be able to build

About The Author

Dr. Zeeshan Bhatti

See author's posts