React (Libraries (Node JS (Webpack (Package manager and module bundler.…
Sinatra inspired web development framework for Node.js
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.
Static type checker for React that was developed at Facebook for React as an alternative to TypeScript.
Global state preserver across pages designed to help applications scale well by trading off local state.
Babel code is very neatly organised and compact and transpiles to JS code with no syntax errors
ASync and Await, Decorators(Annotations)
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.
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.
It optimizes changes to a virtual DOM before changing the actual DOM as DOM changes are slow.
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