Please enable JavaScript.
Coggle requires JavaScript to display documents.
React (Libraries (Node JS (Webpack (Package manager and module bundler.…
React
Libraries
Node JS
Express.js
Sinatra inspired web development framework for Node.js
Webpack
Package manager and module bundler. Used to bundle assets.
Webpack is useful for it's simplicity and ease of use with npm
Can be substituted for Gulp(Consise)/Grunt(Verbose) which are powerful but increase the learning curve.
Supports non-blocking code, event based architecture and tons of libraries.
Flow
Static type checker for React that was developed at Facebook for React as an alternative to TypeScript.
Redux
Global state preserver across pages designed to help applications scale well by trading off local state.
ES2016/ES7
Babel
Babel code is very neatly organised and compact and transpiles to JS code with no syntax errors
ASync and Await, Decorators(Annotations)
Component
Lifecycle Methods
Render
componentWillMount
componentDidMount
componentWillUnmount
constructor
Props
Props are passed to render data in Compontents
State vs Props
One way control Flow: Components can talk to their children but children need callbacks passed to them to be able to talk to the parent.
Docs
https://facebook.github.io/react/
https://github.com/facebook/react
Prerequisites
ES2015/ES6
Supports the Let syntax(), const, default parameters, variadic functions(elliptical functions), arrow functions(lambdas), spread operators(pattern matching for data only), promises and lots of other functional programming features.
(Optional) Need Node.js to transpile code for supporting old browsers.
Virtual DOM
It optimizes changes to a virtual DOM before changing the actual DOM as DOM changes are slow.
JSX(JavaScript XML)
A script that resembles HTML and transpiles to JavaScript. Anything in {{ here }} is treated as plain JavaScript(ES2016)
Synthetic Events
React has synthetic events which map to different events depending on the browser. So an onSubmit event in React maps to different submit events on Chrome and Firefox.
React was developed at Facebook for the purpose of displaying rapidly changing data. It modifies the DOM indirectly through state changes made by components. The state changes get optimized by React which then updates the DOM. Updating the DOM is considered an expensive operation so React was developed to optimize the changes in a scenario where data is rapidly changing.
Steep learning curve to develop good User Interfaces. To do it extremely well a developer would have to learn ES2015 and Node.js
Tutorial