React Course: Setting Up the Node.js Environment

Web development is an essential skill for building various modern applications. Among them, React and Node.js are popular frameworks and runtimes widely used for frontend and backend development. In this course, we will take a closer look at setting up the Node.js environment to use React.

1. What is Node.js?

Node.js is an open-source JavaScript runtime built for creating server-side applications. It runs on Chrome’s V8 JavaScript engine and provides an asynchronous event-driven programming model. Because of these characteristics, Node.js is very efficient for building web servers and various network applications.

2. Installing Node.js

To use React, you must first install Node.js. Node.js supports various operating systems, so you can install it in a way that is suitable for your environment.

2.1. Installing Node.js on Windows

  1. Go to the official Node.js website (https://nodejs.org/).
  2. Select the version: Download and install the LTS (Long Term Support) version.
  3. Once the download is complete, run the installer and proceed with the installation process.
  4. After the installation is complete, open the command prompt and check if the installation was successful by running the node -v command.

2.2. Installing Node.js on macOS

  1. You can install Node.js using Homebrew. Open the terminal and type the following command:
  2. brew install node
  3. After installation, check the version with the node -v command.

2.3. Installing Node.js on Linux

  1. You can add the NodeSource repository and install it. Run the following command in the terminal:
  2. curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
  3. sudo apt-get install -y nodejs
  4. After installation, check the version with the node -v command.

3. npm and Package Manager

When you install Node.js, npm (Node Package Manager) is also installed. npm is a tool for managing JavaScript libraries and packages, used to install the packages required for React projects.

3.1. Checking npm Version

Run the following command in the command prompt or terminal to check the npm version:

npm -v

4. Creating a React Project

Now that Node.js and npm are installed, it’s time to create a React project. The easiest way to create a React project is to use Create React App.

4.1. Installing Create React App

Create React App is an official tool that helps quickly build React applications. Install Create React App globally with the following command:

npm install -g create-react-app

4.2. Creating a React Project

After installing Create React App, use the following command to create a new React application. my-app is the project name, and you can change it to whatever you like.

npx create-react-app my-app

4.3. Running the React Project

Once the project is created, you can move to the folder with the command below and run the application:

cd my-app
npm start

Now open your web browser and visit http://localhost:3000 to check the basic React application.

5. Setting Up a Node.js Server

To complete the React application, you need to set up a Node.js server. This will provide a REST API and allow interaction with the React application.

5.1. Creating a New Node.js Project

Create a Node.js backend server separately from the React project. Create a new folder and navigate to it, then run the following command to start a new npm project:

mkdir my-node-server
cd my-node-server
npm init -y

5.2. Installing Express

Express is a web application framework for Node.js that makes it easy to build RESTful APIs. Install Express with the following command:

npm install express

5.3. Writing Basic Server Code

Create a new file and write the server code. Create a file named server.js and add the following basic code:

const express = require('express');
const app = express();
const PORT = process.env.PORT || 5000;

app.get('/', (req, res) => {
    res.send('Hello World from Node.js server!');
});

app.listen(PORT, () => {
    console.log(`Server is running on http://localhost:${PORT}`);
});

6. Running the Node.js Server

After writing the server code, run the Node.js server with the command below:

node server.js

Open your web browser and visit http://localhost:5000 to see the message “Hello World from Node.js server!”

7. Connecting React and Node.js

Once both the React application and the Node.js server are ready, establish the connection between the two applications. This process will explain how to send API requests from the React application to the Node.js server and receive responses.

7.1. Installing Axios

Install Axios, a library for sending API requests, in your React project. Run the following command to install Axios:

npm install axios

7.2. Writing API Request Code

Write code within your React application’s component to send requests to the Node.js server. Open the src/App.js file and add the following code:

import React, { useEffect, useState } from 'react';
import axios from 'axios';

function App() {
    const [message, setMessage] = useState('');

    useEffect(() => {
        axios.get('http://localhost:5000')
            .then(response => {
                setMessage(response.data);
            })
            .catch(error => {
                console.error('There was an error!', error);
            });
    }, []);

    return (
        

            
{message}

        

    );
}

export default App;

8. Checking the Final Result

If all the setup is complete, restart your React application. Refresh the browser to see the message retrieved from the Node.js server.

9. Conclusion

In this course, we learned how to set up a Node.js environment for developing React applications. We looked at how to build a simple backend server using Node.js and Express, and how to connect with React using Axios. We hope you will expand on this foundational knowledge as you develop more complex applications in the future.

10. References