1. Install and Setup React

13 Aug 2024

Installing Visual Studio Code

If you have Visual Studio Code or an IDE you are comfortable using, feel free to skip to the next lesson.

If you are new to coding, I recommend you download and install Visual Studio Code. In this course, I will be using VS Code as the IDE for the code along videos. You can download it for your particular operating system here.

 

Installation NodeJs

Before you can work with the project, you need to have Node.js installed on your computer. Node.js is a JavaScript runtime that allows you to run JavaScript code on the server side. It also comes with npm (Node Package Manager), which is used to manage dependencies for your project.

a. Download and Install Node.js

  1. Go to the Node.js download page.
  2. Choose the LTS (Long Term Support) version for stability.
  3. Download the installer appropriate for your operating system (Windows, macOS, or Linux).
  4. Run the installer and follow the on-screen instructions. The installer will also install npm.

b. Verify the Installation

After installing Node.js, verify that it has been installed correctly by opening a terminal or command prompt and running the following commands:

node -v
npm -v

These commands will display the installed versions of Node.js and npm, respectively.

Cloning the Repository and Setting Up the React Frontend

In this section, you’ll learn how to clone the Geobee-ICCSCI repository and set up the React frontend application using npm ci. This process involves downloading the project files, navigating to the project directory, installing dependencies, and running the application locally.

GitHub Repository: Geobee_Dashboard

1. Clone the Repository

First, clone the Geobee_Dashboard repository to your local directory:

git clone https://github.com/syauqiakmal/Geobee-ICCSCI.git

This will download the entire repository into a folder named Geobee-ICCSCI.

2. Navigate to the Project Directory

Once the repository is cloned, navigate into the project directory:

cd Geobee-ICCSCI/react-app

3. Install Node Modules Using npm ci

Instead of using npm install, we will use npm ci to install the dependencies. This command installs the exact versions of packages listed in the package-lock.json file, ensuring consistency across environments.

Run the following command:

npm ci

This command will clean the previous node_modules (if any) and install all the dependencies based on the package-lock.json file. It’s faster and ideal for CI/CD environments or development setups that require guaranteed consistency in dependencies.

4. Running the Application

After the installation is complete, run the React application with:

npm start

The app will run on a local server, and you can access it in your browser at http://localhost:3000.

 

 

Cancel Reply