React JS – Setting up the Environment

In this lesson you will learn to set up Git and Node.js on your compute , and crete-react-app. At the end of this , you will be able to:

  • Set up a Git repository and perform basic Git operations
  • Use Node-based modules to perform basic operations
  • Make use of create-react-app

Software Requiredment

  1. Text editor of your choice: Any text editor that you are already familiar with can be used for editing the project files. I will be using Visual Studio Code as the editor of choice for a better experience in my perspective. You may also consider other editors such as Brackets, Sublime Text.
  2. The browser of your choice: You may use your preferred browser. Please note that not all browsers may support all the HTML5 features to the same extent. You might encounter problems when using other browsers. I strongly urge you to use the latest Chrome browser so that any problems are minimized.
  3. Command-line shell: Familiarity with the command-line shell is also essential. In Windows, a cmd window or power shell with admin privileges would be needed. On a Mac or in Linux, a terminal window can be used. Please get familiar with the “sudo” command in OS X and Linux.

installation of Git on your computer

Git is required for using all the remaining Node.js and Node-based tools that we encounter in the rest of our application. Git is a free and also open-source version control system designed for handling everything from small to very large projects with speed and efficiency also.

Downloading and Installing Git :

To install Git on your computer, go to this site to download the Git installer for your specific computing platform.
Then, follow the installation steps as you put in Git using the installer.
You can find more details about installing Git at GIT-document. This document lists several ways of putting in Git on various platforms. Installing a number of the GUI tools like GitHub Desktop also will install Git on your computer. On a Mac, fixing XCode command-line tools also will found out Git on your computer. You can choose any of the methods that are most convenient for you.

Some Global Configuration for Git :

Open a cmd window or terminal on your computer. Check to make sure that Git is installed and available on the command line, by typing the following at the command prompt:

git --version

Set up for the Node.js environment

A popular server framework that is based on Javascript, and node package manager (NPM) on your machine. To learn more about NodeJS, you can visit the official node website. For this course, you just need to install Node.js on your machine and make use of it for running some front-end tools. You will learn more about the server-side support using Node.js in a subsequent course.

Installation of node :

To install Node on your machine, go here and click on the Download button. Depending on your computer’s platform (Windows, macOS, or Linux), the appropriate installation package is downloaded.

As an example, on a Mac, you will see the following web page. Click on the Download button. Follow along the instructions to put in Node on your machine. (Note: Now Node gives you the option of installing a mature and dependable LTS version and a newer stable version. You should install the LTS version. I will use this version in the course.)
Note: On Windows machines, you’ll got to configure your PATH environmental variable just in case you forgot to show on the increase PATH during the installation steps.

Verifying the Node Installation

Open a terminal window on your machine. If you are using a Windows machine, open a cmd window or PowerShell window with admin privileges. To ensure that your NodeJS setup is functioning correctly, type the subsequent at the prompt to see for the version of Node and NPM.

npm -v
node -v

Now at this stage, we have enough tools. But still, we need to configure some more files such as Webpack, Babel to create our first react applications. But this is the one way to create our applications otherwise we can directly use the command create-react-app to create our react app without any further configuration of files such as Webpack and Babel.

Using the create-react-app command

Starting a replacement React project is extremely complicated, with numerous build tools. It uses many dependencies, configuration files, and other requirements such as Babel, Webpack, ESLint before writing a single line of React code of our application. Create React App tool removes all that complexities and makes React app simple and easy to handle. For this, you need to install the package using NPM as per done above, and then run a few simple commands to get a new React project.

The create-react-app is an excellent tool for beginners, which allows you to create and run React projects very quickly. It does not take any configuration manually. This tool sets up the development environment, provides an excellent developer experience, and optimizes the app for production.

Installing the Create-react-app :

Assuming we already have node/npm installed, we can directly go for installing create-react-app! We’ll have to run the following command in our terminal:

$ npm install -g create-react-app

Alternatively we can use yarn instead of the npm as abobe

$ yarn global add create-react-app

We can vrify our installation by following command line :

$ create-react-app --version
create-react-app version: current version will be display here

Creating our first React app “Hello World”:

First, start by moving into wherever you want to develop your application. In that directory, we’re going to create an app called “hello-world”: The instructions at the end are really the most important part. There are four default commands bundled into create-react-app: start, build, test, and eject which helps create-react-app to build.

C:\Users\sarveshraut>cd C:\Users\Tutorialspoint\Desktop\
C:\Users\sarveshraut\Desktop>npx create-react-app my-app

npm start :

If you type above command in your terminal then your application will start up a development server at http://localhost:3000/ and give you a nice little following template.

edit App.js to make changes in it

Looking up at our first React app

Let’s explore Our First App. Let’s start by looking at the first application that is created by create-react-app:

Default file directory of project

It helpfully generates a readme for your project ( which is in Markdown format, as well as a favicon. public/index.html is that the main HTML file that has your React code and application and provides a context for React to render to. Now Let’s take a closer look at our index.html file. This bit is the important part as this is where your react application gets rendered in your browser!

<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>React App</title>
      You need to enable JavaScript to run this app.
    <div id="root"></div>
      This HTML file is a template.
      To create a production bundle, use `npm run build` or `yarn build` as per choice.

Next, we have our package.json file. This is what stores the lists of dependencies for your application, also as what describes your application (the name, the version no, etc).
The node_modules/ directory is where all of the node modules get built/stored. For the most part, you shouldn’t have to monitor with this too much.
The important directory for us as developers is that the src/ directory. This stores all of our modifiable code.

index.js stores our main Render call from ReactDOM. It imports the App.js component that we start off with and tells React where to render it (remember that div with an id of root?). index.css stores the base styling for our application.

App.js may be a sample React component called “App” that we get when creating a replacement app. We’ll actually be deleting the whole contents of the file and starting over! App.css stores styling targeting that component uses. Finally, the logo.svg is just the React logo.
App.test.js is our first set of tests to run against our sample App component that we begin our application.

Congratulations! Now you have complete knowledge for enviroment setting of your first react project.

Leave a Reply

Your email address will not be published. Required fields are marked *