SPONSORS

104 views · 181 days ago

![Beginning with react js](https://images.ctfassets.net/vzl5fkwyme3u/1f9o6QZdnHnyL7FL4jYAt6/49052d4de22e08100a0d4f7bae4347d3/reactjs.png?w=1000)

**Hi Friends,**

Let me start with my first blog on the react series, i will publish start to end tutorials on react js in this series, In Frontend technologies React is the Biggest popular Javascript framework , So let me start with a basic application setup of react js

### Table of contents

1. Introduction

2. Feature of SPA

3. Why React

4. Prerequisites

5. Make a basic react project

### 1. Introduction

React is a open source javascript liberary developed by facebook in 2013. React is useful to make single-page-application(SPA). React allow you to divide your complex application into small reusable pieces of code called 'Components'. When our data got changes, it will efficiently update and re-render our components. React components is made with the HTML and javascript code which is called JSX.

### 2. Feature of SPA

SPA (Single Page Application) is fast, compare to other application.

Instead of updating whole page, it's only update the changes in the view.

Although it load all the content once and serve according to the requriment.

It will improve the site preformance because it will not reload page again and again.

### 3. Why React

React is javascript liberary not framework. React comes with the concept 'learn once write anywhere'. Once you are familier with react you can able to make react native application too.

**Q. When to use react ?**

A. When you want your application is to be everything is javascript, then you should use React. Everything which is written is React is javascript, even you can style your component with javascript.

a. JXS/Virtual Dom - It uses JSX template to make component. JSX means javascript + html. It allow us to write HTML inside javascript called virtual dom, which is faster then real dom. React internally cache the component and whenever any updation done it only re-render the updated code.

b. Uni-directional data flow - React focus on only view part. It provides uni-directional data flow. Means you can pass data from parent to child in HTML props. Due to this feature our application is more managable, because all the data is manage by parent. Props flow from parent to child and functions flow from child to parent.

### 4. Prerequisites

a. HTML

b. css

c. javascript basics

d. babel

e. es6

f. npm

### 5. Make a basic react project

Install Node -- I personally prefer node version manager(nvm) to install node. Because it gives you flexablity to use multiple version of node and npm

In order to install nvm, you have to install curl. Here is the command

```

sudo apt-get update

sudo apt-get install curl

curl --version

```

you will get the message

```

curl 7.58.0 (x86_64-pc-linux-gnu) libcurl/7.58.0 OpenSSL/1.1.0g zlib/1.2.11 libidn2/2.0.4 libpsl/0.19.1 (+libidn2/2.0.4) nghttp2/1.30.0 librtmp/2.3

Release-Date: 2018-01-24

Protocols: dict file ftp ftps gopher http https imap imaps ldap ldaps pop3 pop3s rtmp rtsp smb smbs smtp smtps telnet tftp

Features: AsynchDNS IDN IPv6 Largefile GSS-API Kerberos SPNEGO NTLM NTLM_WB SSL libz TLS-SRP HTTP2 UnixSockets HTTPS-proxy PSL

```

Now install nvm with curl. Here is the command

```

curl -sL https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh -o install_nvm.sh

```

inspect installation with nano

```

nano install_nvm.sh

```

Run script with bash

```

bash install_nvm.sh

```

Now load your profile to current bash

```

source ~/.profile

```

nvm is installed Now, check it with

```

nvm --version

```

now check list of node installed by

```

nvm list

```

install new node with

```

nvm install 10.15.3 (node_version)

```

use particular node

```

nvm use 8.10.0 (node_version)

```

You will successfully install required things for node.

#### Now lets create a react project.

First install create-react-app globally so that you can use it from anywhere. create-react-app is npm module given by react to setup a basic arcitecture of react project.

```

npm install -g create-react-app

```

After installation of create-react-app

```

create-react-app w3school_info

```

This command will create a directory name w3school_info in your current directory. Which have all the basics setup which react app have.

Now:

```

cd w3school_info

```

and

```

npm start

```

Now you can open your browser on `http://localhost:3000`will run you React project.

#### This is your basic app structure.

w3school_info

├── README.md

├── node_modules

├── package.json

├── .gitignore

├── public

│ ├── favicon.ico

│ ├── index.html

│ └── manifest.json

└── src

├── App.css

├── App.js

├── App.test.js

├── index.css

├── index.js

├── logo.svg

└── serviceWorker.js

Go and change something in `App.js` and changes will automatically updated on your browser.

You are ready to start development!

***Please feel free to write your queries on comment section***

SPONSORS