A BETTER INTRODUCTION TO REACT

A BETTER INTRODUCTION TO REACT

Today, In this article, we will learn what React JS is and why we should use React JS instead of other JavaScript frameworks like Angular and what is the accurate process of Installing React Js. Let’s move forward!

AN OVERVIEW OF REACT

React (also known as React.js or ReactJS) is a library of javascript that is used for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. The most significant features of React is a major reality or the fact that you can generate components, which are like custom, reusable HTML elements that swiftly and efficiently develop the user's interfaces. Besides, React streamlines how the data is stored and handled using the state and props.  Subsequently knowing the significant sketch of React or React js, it’s time to take a dive and know some of its best features.

What are the ReactJS Features?

Currently, ReactJS obtaining quite agile popularity as the most reliable JavaScript framework amid web developers. It is playing a crucial role in the front-end ecosystem. Now, we are going to provide you the essential features of ReactJS in the following section. Let us take a closer look at some important features of React.

How do you Install React?

As you already aware of what react is in actual. It is a library of JavaScript, so saying install might sound a bit weird. Probably the word Setup is a better word, but you get the concept.

There are many ways to Install React we are going to show you in the below section so that it can simply work on your site or any app.

Getting React up and running is not as simple as downloading one large piece of software. You will need to install many, smaller software packages.

Step 1: Environment Setup

Getting React up and running is not as simple as downloading one large piece of software. You will need to install many, smaller software packages.

Here, the first thing to install is a good installer! You need a way to download and install software packages easily, without having to worry about dependencies.

Moreover, you can install npm by installing Node.js. Node.js is an environment for developing server-side applications. When you install Node.js, npm will install automatically.

  1. Ctrl-click here to navigate to the Node.js homepage in a new tab.
  2. You should see links to download Node.js.
  3. Click on the download link of your choice. Follow the subsequent instructions to install Node.js and npm.
  4. If you’ve already installed Node.js, that’s okay, do it anyway.

Congratulations! You’ve just installed some incredibly powerful software!

As a browser can not interpret JSX(Explained later in this tutorial), we need to first convert it into JavaScript. BABEL will do it for us on a fly and take care of cross-browser compatibility.

  • Open a command prompt and type “npm install -g babel”
  • Install Babel CLI by typing “npm install -g babel-cli”
  • INSTALL REACT
  • Create a folder on the desktop so that you can locate it easily.
  • Run following command to create package.json file …..\Desktop\FolderName>npm init
  • Type  “npm install react --save” in command prompt. --save will update the package.json file with the packages.
  • Type ”npm install react-dom --save” in command prompt.
  • INSTALL WEBPACK

Bundler. webpack bundler will bundle the dependencies & JSX code together.

  • Type  “npm install webpack --save” in command prompt.
  • Type “npm install webpack-dev-server --save” in command prompt.
  • Install Babel dependencies(In the same folder which you have created in the previous step)
  • Type “npm install babel-core --save” in command prompt.
  • Type “npm install babel-loader --save” in command prompt.
  • Type “npm install babel-preset-react --save” in command prompt.
  • Type “npm install babel-preset-es2016 --save” in command prompt.

Step 2: Create project file

Here, in this step, you need to create following files in the folder you have created in previous step.

  • Index.html
  • Main.js
  • Webpack.config.js

Step 3: Webpack & Babel

In order to run your first app you need to instruct webpack on which file to target as entry point. Also, we will configure babel-loader to use es2016 and react presets which we have installed in previous steps.

Step 4: Update Package. JSON

Update package .json’s scripts section file with the following script to initiate webpack. You must replace the test script to start the webpack server. We don’t need to test script as we are not going to perform testing in this tutorial.

Step 5: Create Index.html file

Step 6 : App.jsx and main.js

This is the first React component. We will explain React components in depth in a subsequent chapter. This component will render Hello World.

APP. JS

Here we need to import this component and render it to our root App element, so we can see it in the browser.

MAIN. JS

Note − Now, you need to note one thing that whenever you want to use something, you want to import it first. If you want to execute the component applicable in other portions of the app, you need to export it after the invention and import it in the file where you want to use it.

Step 7: Running the Server

Here, at this step the setup is complete and we can initiate the server by running the following command.

Which types can we use?

There are some of the ProtoTypes that we can use. These are the fundamental types we can accept:

  • PropTypes.array
  • PropTypes.bool
  • PropTypes.func
  • PropTypes.number
  • PropTypes.object
  • PropTypes.string
  • PropTypes.symbol

We can accept one of many values:

We can accept an instance of a class:

We can accept any React node:

or even any type at all:

Arrays have a special syntax that we can use to accept an array of a particular type:

Objects, we can compose an object properties by using

Conclusion

Now that we have a rough understanding of what React is, What is the major process of installing react, further we can move onto something more technical. It's time to get a small project up and running.

If you have any queries do add your questions, kind reviews & comments in the below section.