Getting Started With React

Build your First React JS app

React JS

React is a JavaScript library created by Facebook

React is a User Interface (UI) library

React is a tool for building UI components

React is an open-source Javascript library for building dynamic apps. MVC stands for Model View Controller, and React is the V, or View in this architecture.

React JS has come at a good time helping the developers to build highly engaging web apps and user interfaces within a quick time. It allows you to break down the components and create a single page application with less coding.

Moreover, the virtual DOM also integrates the performance and React JS is also known to be SEO friendly. You can develop large scale apps with frequently changing data. It is due to these major advantages that React JS has gained much spotlight.

Getting Started:

Install NodeJS if not already present

NodeJS is needed since the Libraries Required for React are downloaded using node package manager ( npm ). Refer to https://nodejs.org/en/ to install NodeJS.

Install create-react-app Node Package

create-react-app node package helps to set up a React project. Install create-react-app node package globally using the following command.

npm install -g create-react-app

Create The Project

Getting started with React is simple. After it’s installed, you can just run the create-react-app on the command line, followed by the name of the app you want to create. This creates the react app, with all the necessary functionality you need, already built into the app. Then you can just cd into the react app and start it with npm start.

npx create-react-app react-app-new

react-app-new is the name of the application. The above command creates a folder called react-app-new which is the project folder and then installs all dependency from the package.json file.

Here’s how that will look on the command line:

Create basic React JS App

A look at a Package.json

Packages published to the registry must contain a package.json file. A package.json file lists the packages your project depends on, specifies versions of a package that your project can use, using semantic versioning rules.

At first glance it may look like there’s a lot going on, so let’s break it down, starting with the first three lines.

So what’s going on here? Well, the first three lines are very basic info about projects like name and version. The first being Name itself.

"name": "react-app-new",
"version": "0.1.0",
"private": true,

Required name and version fields

A package.json file must contain name and version fields.

The name field contains your package’s name, and must be lowercase and one word, and may contain hyphens and underscores.

The version field must be in the form x.x.x and follow the semantic versioning guidelines.

The next block is dependencies.

Dependencies are specified in a simple object that maps a package name to a version range. The version range is a string that has one or more space-separated descriptors. Dependencies can also be identified with a tarball or git URL.

Please do not put test harnesses or transpilers in your dependencies object. See, devDependencies below.

See semver for more details about specifying version ranges.

• version Must match version exactly
• >version Must be greater than version
• >=version etc
• <version
• <=version
• ~version “Approximately equivalent to version” See semver
• ^version “Compatible with version” See semver
• 1.2.x 1.2.0, 1.2.1, etc., but not 1.3.0
• http://... See ‘URLs as Dependencies’ below
• * Matches any version
• "" (just an empty string) Same as *
• version1 - version2 Same as >=version1 <=version2.
• range1 || range2 Passes if either range1 or range2 are satisfied.
• git... See ‘Git URLs as Dependencies’ below
• user/repo See ‘GitHub URLs’ below
• tag A specific version tagged and published as tag See npm-dist-tag
• path/path/path See Local Paths below

"dependencies": {
"react": "^16.11.0",
"react-dom": "^16.11.0",
"react-scripts": "3.2.0"
},

The next block scripts.

The “scripts” property is a dictionary containing script commands that are run at various times in the lifecycle of your package. The key is the lifecycle event, and the value is the command to run at that point.

See npm-scripts to find out more about writing package scripts.

"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},

Next block — eslintConfig

ESLint is designed to be completely configurable, meaning you can turn off every rule and run only with basic syntax validation, or mix and match the bundled rules and your custom rules to make ESLint perfect for your project. There are two primary ways to configure ESLint

Next block — Browserslist

The config to share target browsers and Node.js versions between different front-end tools. It is used in:

• Autoprefixer
• Babel
• postcss-preset-env
• eslint-plugin-compat
• stylelint-no-unsupported-browser-features
• postcss-normalize
• obsolete-webpack-plugin

All tools will find target browsers automatically when you add the following to package.json:

"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]

Run the project in the browser

cd react-app
npm start

Go to your browser and go the following URL localhost:3000
You should be able to see that your application is running. The Application will look like this in your browser:

Basic Folder Structure Explained

When you created the project, you would have noticed that it created a bunch of files. Here I will list out some of the important files and folders that you should be aware of .

1. package.json: This File has the list of node dependencies which are needed.
2. public/index.html: When the application starts this is the first page that is loaded. This will be the only html file in the entire application since React is generally Written using JSX which I will cover later. Also, this file has a line of code <div id=”root”></div>. This line is very significant since all the application components are loaded into this div.
3. src/index.js: This is the javascript file corresponding to index.html. This file has the following line of code which is very significant. ReactDOM.render(<App />, document.getElementById(‘root’));
4. The above line of code is telling that App Component ( will cover App Component soon) has to be loaded into an html element with id root. This is nothing but the div element present in index.html.
5. src/index.css: The CSS file corresponding to index.js.
6. src/App.js : This is the file for App Component. App Component is the main component in React which acts as a container for all other components.
7. src/App.css : This is the CSS file corresponding to App Component
8. build: This is the folder where the built files are stored. React Apps can be developed using either JSX, or normal JavaScript itself, but using JSX definitely makes things easier to code for the developer :). But browsers do not understand JSX. So JSX needs to be converted into javascript before deploying. These converted files are stored in the build folder after bundling and minification. In order to see the build folder Run the following command

npm run build

Congrats

Now you know how to create a React Application.