React (and a bit of EcmaScript)

Following is a gist of a course on Modern javascript and React..

ES2015 (ES6):

var, let, const (blocks and function blocks)

Arrow function (difference of ‘this’ in normal function(calling environment) and arrow function(defining environment)

Object Literals (shortcut function definition, dynamic property definition, block property usage)

Destructuring (arrays and objects)

Rest and Spread (array splitting and copying)

Template Strings (use back tick [`] instead of ‘ and “ - use dynamic evaluation/interpolation)

Classes

Promise and async/await

REACT

What is React?

React is a library to build User interfaces.. Easy way to start learning React is below:

1. React’s design concepts
2. JSX and event handlers, data, and APIs
3. React hooks
4. Communicating between components
5. Creating local environment

Why React?

1. The virtual browser (vs DOM API)
2. “Just javascript”
3. Reach Native (for the win)
4. Battle-tested (@ Facebook)
5. Declarative Language

React overview:

1. Components
• Like Functions
• Inputs: props, state| Output: UI
• Reusable and composable
2. React updates
• React will react
• Take updates to the browser
3. Virtual views in memory
• Generate HTML using Javascript
• No HTML template language
• Tree reconciliation

React Components

1. Function Component
2. Class Component

Inputs to the component are props and state. The output is JSX (looks like HTML but is javascript syntax). Props are list of attributes and are immutable for a component. Components can change the state and React uses it to auto-reflect the changes in the browser.

Data and Behavior can flow from parent to child component, via props.

Components are reusable.

The state management should be in the closest parent to the components using the state.

React Hooks

React Hooks are functions that let us hook into the React state and lifecycle features from function components. By this, we mean that hooks allow us to easily manipulate the state of our functional component without needing to convert them into class components. Example of React Hook:

• useState

Tree Reconciliation

Reach compares the versions of virtual dom to render only those React elements that need to be re-rendered, and not the entire DOM.

Trying out React

You can use jscomplete.com/playground for quick startup which has React and ReactDOM pre-loaded and also understands JSX and ES2015 syntax. ‘React Developer Tools’ is a good extension for the browser.