Introduction of React
Introduction of 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 application/
- · Aims at Speed, Simplicity and Scalability.
Notable features
· One-Way data flow.
o
Single
source of truth-data is originated and kept in one place, data is immutable.
o
Data
flow from the parent component to the child component.
o
Action
flow from child component to parent component.
· Virtual DOM – Document Object Model
o
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
o
React
JS language for defining user interface.
o
HTML
like syntax.
o
Prevents
cross-site scripting attacks by converting expressions to strings.
Props and State
o
Props
are used to pass data and behavior from container components to child components.
o
Props
are read only.
o
State
is used to keep data which can be updated.
o
State
is read write enabled.
o
Use
setState({}) method to update state.
o
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
o
React
components extends from React. Component parent class inherit a set of methods
that belong to react life cycle.
o
Render
and commit state.
o
Controlled
and uncontrolled.
o
Side
effects.
o
Constructor.
o
Render.
o
Component
did mount.
o
Get
derived state from props.
o
Should
component update.
o
Component
will unmount.
o
Component
did catch.
- Constructor
o
JS
constructor
o
Declare
state and bind context to life cycle events.
o
Do
not call setState.
o
Always
call super(props) to bind this props.
- Render
o
Rendering
of the component.
o
Called
every time state or props are getting changed.
o
Can
return JSX, portal, fragments, String, Boolean etc.
- Component did mount
o
Fires
after component is mount to DOM.
o
Can
interact with DOM.
o
A
JAX calls and update the state.
- Get derived state from props
o
Use
this if you want to update your state from props.
o
React
highly recommends not use this.
o
Highly
discourage conditionally setting state from props.
- Should component update
o
To
decide whether to update the component or not.
o
Only
as a performance enhancement, if required.
- Component did update
o
After
component got update
o
Will
not run if should component update return false.
o
Use
this to interact with DOM after a component update.
- Component will unmount
o
Before
removing the component.
o
Should
not call setState.
o
Clean
up tasks.
- Get derived sate from error/component did catch
o
After
an error from decedent component.
o
Get
derived state from error to get error related state.
o
Component
did catch for logging and side effects.
About Babel
o
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.
o
Convert
java script ES6 features and beyond to latest compatible version.
o
Debugging
enabled via source maps.
o
In
built code optimization.
About Web pack
o
Most
famous module bundler.
o
Support
for build system as well as module bundling.
o
Split
code into multiple files.
o
Support
common AMD.
o
Extend
using loaders (compiling, css transformation, image optimization).
o
Support
production optimizations.
o
Easy
configuration with 4 steps (entry->loaders->plugins->output).
About Parcel
o
Fastest
module bundler.
o
Relatively
new to community.
o
Conventions
over configurations.
o
Support
JSX, CSS, LESS, SVG, typescript.
o
Plugins
available for extension and plugins are automatically detected.
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.
Comments
Post a Comment