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:
- React’s design concepts
- JSX and event handlers, data, and APIs
- React hooks
- Communicating between components
- Creating local environment
Why React?
- The virtual browser (vs DOM API)
- “Just javascript”
- Reach Native (for the win)
- Battle-tested (@ Facebook)
- Declarative Language
React overview:
- Components
- Like Functions
- Inputs: props, state| Output: UI
- Reusable and composable
- React updates
- React will react
- Take updates to the browser
- Virtual views in memory
- Generate HTML using Javascript
- No HTML template language
- Tree reconciliation
React Components
- Function Component
- 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.
