Configuring the development environment

To start developing with React.js, we need to set up our development environment. Let’s follow some simple steps to install the necessary tools.

Step 1: Install Node.js and npm

Node.js is a JavaScript runtime environment, and npm (Node Package Manager) is the package manager. First, go to the official Node.js website nodejs.org. Download and install the LTS (Long Term Support) version.

To verify the installation, open the terminal and type:

node -v
npm -v

This should display the installed versions of Node.js and npm.

Step 2: Install Create React App

Create React App is an official tool from the React team that sets up a new React project with all the necessary dependencies.

In the terminal, run the command:

npx create-react-app my-app

Replace “my-app” with your project name.

Step 3: Navigate to the Project Directory

After creating the project, navigate to the newly created project directory:

cd my-app

Step 4: Start the Development Server

To start the development server and see your React application in the browser, use the command:

npm start

This will open a new window in the browser at http://localhost:3000 where you will see the React application running.

Step 5: Set Up the Code Editor

Choose a code editor of your preference. Visual Studio Code (VS Code) is an excellent choice because it is lightweight and offers great plugins.

Download and install VS Code from the official website code.visualstudio.com.

Step 6: Install Useful Extensions

In VS Code, you can install extensions that make React development easier. Some suggestions:

• ESLint: Helps find and fix problems in your code.
• Prettier: Consistently formats your code.
• VS Code React Snippets: Provides code snippets for React.

To install extensions, open VS Code, go to the extensions tab (square icon on the left side), and search for the desired extension name.

Step 7: Project Structure

After the setup, your project will have the following basic structure:

my-app/
├── node_modules/
├── public/
│   ├── index.html
└── src/
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    └── logo.svg

The main files you will modify are in the src/ folder.

Now, you are ready to start developing with React. In the next topic, we will explore the concept of components in React.