React is not a client-side MVC framework, but a user interface library for building web applications out of components, which was released by Facebook in 2013. For those familiar with Model View Controller (MVC), React is similar to views (the V in MVC). In essence, React is responsible for an application’s user interface (UI) — how it looks now or how it will look under certain conditions. These conditions, or properties, can change and are stored inside an object called state. When the state changes, the UI gets updated. React doesn’t make UI development easier, but it makes maintenance more enjoyable, because building with components makes it easier to scale an application..

Components

In React, an application is built around components, not templates. You create a component by calling the method on the React object — as shown below:

					class MyComponent extends React.Component{
    render() {
	return (
		<button type="button" className="btn btn-primary">
			Primary
		</button>
	);
    }
}

The method takes one argument, the specification object. This object contains all the methods for the given component class. The most important one is the render() method, which is triggered when the component is ready to be drawn on the page.
Within it, you’ll return a description of what you want React to render on the page. In the case above, we simply want it to render a button.

The render function is a description of the UI at any given time. So if the data within it changes, React will take care of updating the UI accordingly.

Almost every component contains instructions on how to build html JSX and methods that handle some actions.

React is built to use JSX

You can write React components in JavaScript or you can use alternative the JavaScript Syntax Extension, JSX.
JSX enables you to write JS with XML-like tags. So the tags are actually function calls, which are transformed into React.JS code, and finally end up as HTML and Javascript in the DOM.

You can write JSX in both .js and .jsx files, but you have to transform it from JSX to React.JS with a transpiler.
We are using Babel for this part.

Styles in JSX:


					class MyComponent extends React.Component{ 

    				render() {

    				var headingStyle = {backgroundColor:'white';fontSize:'19px'};

					return (

					<th style={headingStyle}>{this.props.heading}</th>

					);

    				}

					}


					<img src="#" style={{height: "1.2em", marginTop: "0", marginBottom: "-0.25em"}}/>

Inline style

Properties

You can find two types of data in React. One of them are arguments, which look like html-attributes and are calles props. React components are able to receive those props, but they can't be controlled by the component itself. Props are given from parent to child, so the data is immutable and can be accessed using the "this.props" object. This way of passing props down the chain — from parent to child — is how data is distributed in React. It’s passed down the hierarchy, and it’s passed as props.

State

The other way of storing data in React is in the component’s state. And unlike props — which are immutable from the components perspective — the state is mutable. So if you want the data in your application to change — for example based on user interactions — it must be stored in a component’s state somewhere in the app. As state is private and owned by one component only, it can’t be passed down the chain to child components. If you want to pass the data down to a child, you’ll have to pass it as props.

Virtual DOM

React uses a Virtual DOM, which is a clone oft he real DOM. It collects React elements and components. These elements and components are JavaScript objects and are rendered into HTML. The Virtual DOM diffs components to see if they’ve changed. React observeres the Virtual DOM for changes and only updates if it’s needed. So the changed markup is injected into the browser. The benefit is the increasing browser performance, because the browser DOM is known for being one of the slowest parts.

List of Core JS Technologies

React

React's core dependency level is 0.14.7

Redux

Redux's core dependency level is 3.3.1

Node

npm 2.14.20

npm is Node's package manager and a tool for downloading all pieces of your environment

Webpack

Webpack is a module bundler that takes our JavaScript code and generates static assets It takes your development codebase which is modularized and produces an output which combines your modules into files that can be understood by browsers. And it's core dependency level is 1.12.2

Babel 6.x

Babel is a JavaScript transpiler to convert our JSX code to the native JavaScript

Babel plugins and presets:

Use self closing tags for all empty elements; React will take care of it. For example: <br/> instead of <br>
Use propTypes (definition of properties that component expects to receive) to save time for yourself and others.
Don’t try to make components that do everything. Dumber components versus one smart component is a better idea.
Keep your components as small as needed (but not as small as possible) by nesting components. Don’t break everything into components. You need to structure your code, but don’t create a component for every paragraph.
Don’t set this.props, use this.state.
Use React and Redux Dev Tools
Know all React lifecycle methods. “shouldComponentUpdate” will save your application's’ performance.

Best timeline of learning ReactJS:

JavaScript
npm
ReactJS
Webpack
ES6
Routing
Redux

Confusing Parts

It’s a bad idea to manipulate real DOM if you do not understand how React works. If you change something in real DOM directly, React can overwrite that change on the next component rendering. Therefore, jQuery plugins should be used carefully.

What is React?