ReactJS

WHAT IS REACT:

React is a Facebook creation which simply labels itself as being “a JavaScript library for building user interfaces”.
It's an open-source project which, to date, has raked in over 74,000 stars on GitHub.

Why React?

Flexibility:
It is a library not a framework like Ember or Angular. Hence this makes react flexible.



React is:

Declarative: you only need to design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.


Component-based: you create your React-powered apps by assembling a number of encapsulated components, each managing its own state.


Learn Once, Write Anywhere: React is not a full-blown framework; it's just a library for rendering views 

Getting Started with Environment:
Prerequisites are Node and NPM installed on system


History:

Invented in 2011
In 2012 used by Instagram.
2013, open sourced
2015 - React Native released
2016 - React15 released.

React was created by Jordan Walke, a software engineer at Facebook. He was influenced by XHP, an HTML component framework for PHP. It was first deployed on Facebook's newsfeed in 2011 and later on Instagram.com in 2012. It was open-sourced at JSConf US in May 2013.

 SET UP THE BOILERPLATE APPLICATION

It is possible to manually create a React app, but Facebook has created a node module create-react-app to generate a boilerplate version of a React application.

Besides providing something that works out-of-the-box, this has the added benefit of providing a consistent structure for React apps that you will recognize as you move between React projects. It also provides an out-of-the-box build script and development server.

We will use npm to install the create-react-app command line interface (CLI) globally (-g). It is similar to angular-cli

Open up your terminal and run npm install -g create-react-app:

Now that you have the CLI available for use, navigate to the parent directory that you would like to place the application within. Then, run with the create-react-app name you would like to use for your project (just no capital letters :-) ).

create-react-app

2. REACT APP STRUCTURE

Change directories into the app you just created. If you list the contents of the directory including hidden files (ls -la), you should see the following structure:

3. STARTING THE REACT APP DEVELOPMENT SERVER

As was stated in the success message when you ran create-react-app, you just need to run npm start in your app directory to begin serving the development server. It should auto-open a tab in your browser that points to http://localhost:3000/ (if not, manually visit that address). You will be greeted with the React welcome banner:

React tools:

1. JSX
2. FLOW
3. Redux
4. JEST
5. NextJS
6. React Router
7. GraphQL
8. Mobx

What is Virtual DOM?

React enables developers to make changes to the web page without having to deal directly with the DOM. This is done via the Virtual DOM.

The Virtual DOM is a lightweight, abstract model of the DOM. React uses the render method to create a node tree from React components and updates this tree in response to changes in the data model resulting from actions.

Each time there are changes to the underlying data in a React app, React creates a new Virtual DOM representation of the user interface. 

A quick comparison with Angular:

Architecture:

JSX: 
JSX stands for JavaScript XML. With React, it's an extension for XML-like code for elements and components.

Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with loosely coupled units called “components” that contain both.
React doesn’t require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.

JSX compiles to JS only. React uses opposite model to Angular, ember or knockout as these technologies use JS in HTML but React uses HTML in JS. Hence called JSX.




Components in React:
A component is a fundamental unit of application which is used to create the reusable UI.

A world of Components:

There are two kinds of components:

1. Function Component: 
2. Class Component 


Companies adopted react:

Data in a react component is held in two places:
1. Stateless Components (Dumb components): These are also called Props. Props are the properties like HTML properties. Props are immutable and dumb which means they can only be passed from parent components down and cannot be changed.
This poses a challenge because, modern apps do not rely on having all of it's states ready on page load. Ajax or Events could happen and when data returns, someone needs to be responsible for making updates. This is where React states comes in.

2. Stateful Components (Smart components) : can be accessed as State. it is mutable. 




React Router:
For Routing app, we use. It is declarative and simplified approach. 


Flux:
Application Architecture for Building User Interfaces. Flux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow.


JEST: is just a wrapper of Jasmine.


React Component Lifecycle

componentWillMount
componentDidMount
componentWillReceivePops
shouldComponentUpdate
componentWillUpdate
componentDidUpdate
componentWillUnmount