{"id":68,"date":"2024-08-13T08:08:53","date_gmt":"2024-08-13T08:08:53","guid":{"rendered":"https:\/\/research.binus.ac.id\/geoecoai\/?p=68"},"modified":"2024-08-21T15:54:16","modified_gmt":"2024-08-21T15:54:16","slug":"install-and-setup-react","status":"publish","type":"post","link":"https:\/\/research.binus.ac.id\/geoecoai\/2024\/08\/13\/install-and-setup-react\/","title":{"rendered":"1. Install and Setup React"},"content":{"rendered":"

Installing Visual Studio Code<\/h3>\n

If you have Visual Studio Code or an IDE you are comfortable using, feel free to skip to the next lesson.<\/strong><\/p>\n

\n
\n

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\u00a0download it for your particular operating system here<\/a>.<\/p>\n

 <\/p>\n<\/div>\n<\/div>\n

Installation NodeJs<\/h3>\n

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.<\/p>\n

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

    b. Verify the Installation<\/h4>\n

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

    \n
    node -v<\/code><\/div>\n<\/div>\n
    \n
    npm -v<\/code><\/div>\n
    <\/code><\/code><\/div>\n<\/div>\n

    These commands will display the installed versions of Node.js and npm, respectively.<\/p>\n

    Cloning the Repository and Setting Up the React Frontend<\/h3>\n

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

    GitHub Repository: Geobee_Dashboard<\/a><\/p>\n

    1. Clone the Repository<\/h4>\n

    First, clone the Geobee_Dashboard repository to your local directory:<\/p>\n

    \n
    git clone<\/span> https:\/\/github.com\/syauqiakmal\/Geobee-ICCSCI.git<\/code><\/div>\n
    <\/code><\/div>\n<\/div>\n

    This will download the entire repository into a folder named Geobee-ICCSCI<\/code>.<\/p>\n

    2. Navigate to the Project Directory<\/h4>\n

    Once the repository is cloned, navigate into the project directory:<\/p>\n

    \n
    cd<\/span> Geobee-ICCSCI\/react-app<\/code><\/div>\n

    \n<\/code><\/div>\n<\/div>\n

    3. Install Node Modules Using npm ci<\/code><\/h4>\n

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

    Run the following command:<\/p>\n

    \n
    npm ci<\/code><\/div>\n

    \n<\/code><\/div>\n<\/div>\n

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

    4. Running the Application<\/h4>\n

    After the installation is complete, run the React application with:<\/p>\n

    \n
    npm start<\/code><\/div>\n

    \n<\/code><\/div>\n<\/div>\n

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

     <\/p>\n

     <\/p>\n","protected":false},"excerpt":{"rendered":"

    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 […]<\/p>\n","protected":false},"author":46,"featured_media":85,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-68","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend"],"_links":{"self":[{"href":"https:\/\/research.binus.ac.id\/geoecoai\/wp-json\/wp\/v2\/posts\/68","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/research.binus.ac.id\/geoecoai\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/research.binus.ac.id\/geoecoai\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/research.binus.ac.id\/geoecoai\/wp-json\/wp\/v2\/users\/46"}],"replies":[{"embeddable":true,"href":"https:\/\/research.binus.ac.id\/geoecoai\/wp-json\/wp\/v2\/comments?post=68"}],"version-history":[{"count":15,"href":"https:\/\/research.binus.ac.id\/geoecoai\/wp-json\/wp\/v2\/posts\/68\/revisions"}],"predecessor-version":[{"id":260,"href":"https:\/\/research.binus.ac.id\/geoecoai\/wp-json\/wp\/v2\/posts\/68\/revisions\/260"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/research.binus.ac.id\/geoecoai\/wp-json\/wp\/v2\/media\/85"}],"wp:attachment":[{"href":"https:\/\/research.binus.ac.id\/geoecoai\/wp-json\/wp\/v2\/media?parent=68"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/research.binus.ac.id\/geoecoai\/wp-json\/wp\/v2\/categories?post=68"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/research.binus.ac.id\/geoecoai\/wp-json\/wp\/v2\/tags?post=68"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}