Getting Started with React: Installation and Setup Guide

Published on Dec 21, 2023

Welcome to Tech Bites, your hub for quick and easy tech episodes! Today, we’re exploring React, the JavaScript gem loved by developers worldwide. Let’s dive in!

First, let’s understand what is React.
A favoured selection in modern web development, React is a JavaScript library for building user interfaces. Developed by Facebook, it’s now upheld by a collaborative community of individual developers and businesses.

React: Who Uses It?
Let’s see who commonly uses React.

• Web Developers
• Full-stack Developers

The following are some key benefits of using React

• Component-Based Design Promotes Reusability
• Virtual DOM for Improved Performance
• Strong Community Support
• Wide Range of Third-Party Libraries and Tools
• Popular Choice for Modern Web Development

React Prerequisites
React offers compatibility with alternative programming languages such as Python and Java.
To begin using React, the following prerequisites must be met:

• Basic knowledge of HTML,CSS, and JavaScript
• Familiarity with command line/terminal
• Node.js and npm must be installed

Now let’s move on to the installation part of the process

The first step is to install Node.js and Node Package Manager

Before you dive into React, ensure you have Node.js and npm installed. If you haven’t already, please refer to our comprehensive Node.js installation video. You can find the link in the video description or simply click the ‘i’ button on the right side of the screen for quick access to that video.”

The second step is to install the React App

Create React App is a CLI tool that helps you to create a new React project quickly and easily. In the first step using Create React App, a new React project can be quickly set up with a recommended project structure and configuration. Open a command prompt and run the following command to install Create React App globally.

npm install -g create-react-app

Using this command, the Create React App will be installed on your system, making it available for use in any directory.

The third step is to create a new React project

Now that the Create React App has been installed, you can use it to create a new React project. Write the following command, go to the directory where the project should be stored, and run it.

create-react-app my-app

Please replace “my-app” with your desired project name. Remember, your project name should be unique. Create React App will create a new directory with the specified name and generate a new React project according to the recommended project structure and configuration.

Go To the Project Directory and Start the Development Server

Using the command prompt, navigate to the project directory by running the following command
cd my-app
Replace “my-app” with the name of your project directory. Start the development server by running the following command (5:08)

npm start

The following command launches the development server, which automatically reloads the browser when changes are detected in your project files.

This should open a new browser window with your React application running at http://localhost:3000/

To stop the development server, press Ctrl+C in the command prompt.

Congratulations! Your Windows machine has been successfully installed with React, and a new React project has been created. Now that you have React installed, you can begin building your user interfaces.

As we wrap up this React installation episode, I want to leave you with a fascinating, fun fact:

React’s “Fiber” is an advanced algorithm that enables asynchronous rendering, making web apps more responsive. It breaks down complex updates into smaller tasks like brain surgery for smoother user experiences.

Thank you for joining us on Tech Bites. If you found this video helpful, don’t forget to like, share, and subscribe for more tech insights. Until next time, happy coding!