react برای دولوپرها

Hello World!

React for Developers

#irDevConf ■ @sia_mac

ES6The Sixth Edition, known as ECMAScript 2015.


› How to tackle the React Ecosystem __¬ NPM

¬ JavaScript Module Bundlers

¬ ES6

¬ ReactJS

¬ Routing

¬ Flux#irDevConf ■ @sia_mac

› AMD & CommonJS __

¬ NPM: “Node Package Manager”

¬ Dependencies, Scripts.

¬ AMD (RequireJS) — AngularJS<2, jQuery, BackboneJS,…

¬ CommonJS — ES6.


› CommonJS A format Writing Modules in Node.JS __


index.js maths.js:

› CommonJS in Browser __

¬ JavaScript Module Bundlers:

¬ Browserify (*ify)

¬ Webpack (*-loader)

¬ RollupJS


WebpackJavaScript Module Bundler


Webpack != Grunt/Gulp


› Webpack vs. Grunt/Gulp Diagram __Grunt/Gulp Diagram:


one.js

two.js

Concat Uglify

...

grid.scss

typography.scss

Compile Minify

...

Browser

› Webpack vs. Grunt/Gulp Diagram __Webpack Diagram:


one.js

two.js

Concat Uglify

...

grid.scss

typography.scss

Compile Minify

...

BrowserBundle.js

› Webpack vs. Grunt/Gulp Diagram __Grunt/Gulp Diagram:


one.js

two.js

Concat Uglify

...

grid.scss

typography.scss

Compile Minify

...

Browser

› How to tackle the React Ecosystem __¬ NPM

¬ JavaScript Module Bundlers

¬ ES6 ✔ “https://goo.gl/81ha0d”

¬ ReactJS

¬ Routing

¬ Flux#irDevConf ■ @sia_mac

ReactA JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES


› Facebook, Mother of dragons __¬ Started by Facebook in 2013.

¬ Motivation — Building Large apps with data.

¬ Over 45k+ Star on Github.

¬ Sites Using React: ¬ Facebook, Instagram, Dropbox, PayPal, Uber, …


› Meet React __


NOT Another Framework!Just a library for creating User Interfaces.

› Meet React __


Renders your User Interfaces and responds to Events.

› Meet React __


React just “V” in ‘MVC’ (View)

› Meet React __


¬ React Has … ¬ No Controllers. No Directives.

¬ No Templates. No Global EventListener.

¬ No Models. No View Models.

¬ No Dirty Checking.

› Meet React __


Everything is a Component! Everything is a Component! Everything is a Component! Everything is a Component! Everything is a Component!

Main component:

Header CP

Header CP

Sidebar CP

Header CP

Sidebar CP Hero CP

› The Most important in Performance: __


Virtual DOM

› Virtual DOM: __¬ Simple & Fast & Smart.

¬ On Every update:

¬ React builds a new virtual DOM subtree.

¬ Diffs it with the old One.

¬ Computes the minimal set of DOM mutations and puts them in a queue.

¬ Batch executes all updates.#irDevConf ■ @sia_mac

› JSX Allows you to write JS and XML Together: __


React JSX is a Sugar–Syntax for JS!

› Traditional Data flows: __¬ No Framework: Any component can communicate with

any other component.

¬ BackboneJS: Pub–Sub.

¬ AngularJS: 2–way binding and $digest loop.

¬ ReactJS: 1–way data flow:

¬ Data handed from Parent to Child “Props”.


React vs. jQuery


› Playground __


I’ve achieved 0 Pokémon.

Another Pokémon +

› Playground __


I’ve achieved 1 Pokémon.

Another Pokémon +

› Playground __


I’ve achieved 2 Pokémons.

Another Pokémon +

› Playground __



Another Pokémon +

Button Component

› Playground __



Another Pokémon +


init

Button Component “jQuery”

thumbsUp

render

cacheElements handleClick


init

Button Component “React”

handleClick

thumbsUp

render

cacheElements

› State & Props: __

¬ Every Component has ‘state’ and ‘props’.

¬ ‘state’ is mutable and ‘props’ is immutable.

¬ Re-Render (Virtual DOM) the whole app once the `state` changes.


› Why React? __


¬ Fast and Smart. ¬ Unidirectional data flow from parent components to child components.

¬ Isomorphic (JS apps that can run both client-side and server-side)

¬ Easy to debug & testable. ¬ Use JSX with familiar HTML like syntax for writing react apps.

› Benefits of React? __


¬ Modular (Reusable)

¬ State–Based (Predictable)

¬ Independent (Testable)

¬ High-Performance (Virtual DOM)

bahamta.com/

mor.com.co/

evand.ir/

cinematicket.org/New Version!

facebook.github.io/react/

References


www.slideshare.net/AndrewHull/react-js-and-why-its-awesome/

One more thing…


React NativeA framework for building native apps using React.


Thursday, Jul 21. 16:30 — 17:30.

“Public Workshop”


react برای دولوپرها

Education