Introduction to React
- · Developed and maintained by Facebook and Instagram.
- · A JavaScript library for creating user interface.
- · Serves as the view of MVC architecture.
- · Suitable for large web application which use data and change over the time without reloading the entire page.
- · React Native caters developing mobile application for various platform and React VR caters developing VR applications.
- · Aims at Speed, Simplicity and scalability.
Notable features
- One-Way data flow.
. Single source of truth-data is originated and kept in one place, data is immutable.
. Data flow from the parent component to the child component.
. Action flow from child component to parent component.
. Virtual DOM — Document Object Model
. DOM manipulation is cost instead react create a virtual DOM tree and compare it with the rendered tree and update only what is changed.
- JSX
. React JS language for defining user interface.
. HTML like syntax.
. Prevents cross-site scripting attacks by converting expressions to strings.
- Props and State
. Props are used to pass data and behavior from container components to child components.
. Props are read only.
. State is used to keep data which can be updated.
. State is read write enabled.
. Use setState({}) method to update state.
. SetState method is asynchronous so, if you want to use state and props inside setState method use the second form of the method setState((state,props)=>{}).
- Component life cycle
. React components extends from React. Component parent class inherit a set of methods that belong to react life cycle.
. Render and commit state.
. Controlled and uncontrolled.
. Side effects.
. Constructor.
. Render.
. Component did mount.
. Get derived state from props.
. Should component update.
. Component will unmount.
. Component did catch.
- Constructor
. JS constructor
. Declare state and bind context to life cycle events.
. Do not call setState.
. Always call super(props) to bind this props.
- Render
. Rendering of the component.
. Called every time state or props are getting changed.
. Can return JSX, portal, fragments, String, Boolean etc.
- Component did mount
. Fires after component is mount to DOM.
. Can interact with DOM.
. A JAX calls and update the state.
- Get derived state from props
. Use this if you want to update your state from props.
. React highly recommends not use this.
. Highly discourage conditionally setting state from props.
- Should component update
. To decide whether to update the component or not.
. Only as a performance enhancement, if required.
- Component did update
. After component got update
. Will not run if should component update return false.
. Use this to interact with DOM after a component update.
- Component will unmount
. Before removing the component.
. Should not call setState.
. Clean up tasks.
- Get derived sate from error/component did catch
. After an error from decedent component.
. Get derived state from error to get error related state.
. Component did catch for logging and side effects.
About Babel
. Most popular java script compiler. Bale is compiler for java script best known for its ability to turn ES6 into code that runs in your browser today.
. Convert java script ES6 features and beyond to latest compatible version.
. Debugging enabled via source maps.
. In built code optimization.
About Web pack
- Most famous module bundler.
- Support for build system as well as module bundling.
- Split code into multiple files.
- Support common AMD.
- Extend using loaders (compiling, css transformation, image optimization).
- Support production optimizations.
- Easy configuration with 4 steps (entry->loaders->plugins->output).
About Parcel
- Fastest module bundler.
- Relatively new to community.
- Conventions over configurations.
- Support JSX, CSS, LESS, SVG, typescript.
- Plugins available for extension and plugins are automatically detected.
React — Flux concept
Flux is a programming concept, where the data is uni-directional. This data enters the app and flows through it in one direction until it is rendered on the screen.
Flux Elements
Following is a simple explanation of the flux concept.
§ Action — Actions are sent to the dispatcher to trigger the data flow.
§ Dispatcher — this is a central hub of the app. All the data is dispatched and sent to the stores.
§ Store — Store is the place where the application state and logic and held. Every store is maintaining a particular state and it will update when needed.
