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

Hello World!

React for Developers

#irDevConf ■ @sia_mac

ES6The Sixth Edition, known as ECMAScript 2015.

#irDevConf ■ @sia_mac

› 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.

#irDevConf ■ @sia_mac

› CommonJS A format Writing Modules in Node.JS __

#irDevConf ■ @sia_mac

index.js maths.js:

› CommonJS in Browser __

¬ JavaScript Module Bundlers:

¬ Browserify (*ify)

¬ Webpack (*-loader)

¬ RollupJS

#irDevConf ■ @sia_mac

WebpackJavaScript Module Bundler

#irDevConf ■ @sia_mac

#irDevConf ■ @sia_mac

Webpack != Grunt/Gulp

#irDevConf ■ @sia_mac

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

#irDevConf ■ @sia_mac

one.js

two.js

Concat Uglify

...

grid.scss

typography.scss

Compile Minify

...

Browser

› Webpack vs. Grunt/Gulp Diagram __Webpack Diagram:

#irDevConf ■ @sia_mac

one.js

two.js

Concat Uglify

...

grid.scss

typography.scss

Compile Minify

...

BrowserBundle.js

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

#irDevConf ■ @sia_mac

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

#irDevConf ■ @sia_mac

› 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, …

#irDevConf ■ @sia_mac

› Meet React __

#irDevConf ■ @sia_mac

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

› Meet React __

#irDevConf ■ @sia_mac

Renders your User Interfaces and responds to Events.

› Meet React __

#irDevConf ■ @sia_mac

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

› Meet React __

#irDevConf ■ @sia_mac

¬ React Has … ¬ No Controllers. No Directives.

¬ No Templates. No Global EventListener.

¬ No Models. No View Models.

¬ No Dirty Checking.

› Meet React __

#irDevConf ■ @sia_mac

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: __

#irDevConf ■ @sia_mac

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: __

#irDevConf ■ @sia_mac

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”.

#irDevConf ■ @sia_mac

React vs. jQuery

#irDevConf ■ @sia_mac

› Playground __

#irDevConf ■ @sia_mac

I’ve achieved 0 Pokémon.

Another Pokémon +

› Playground __

#irDevConf ■ @sia_mac

I’ve achieved 1 Pokémon.

Another Pokémon +

› Playground __

#irDevConf ■ @sia_mac

I’ve achieved 2 Pokémons.

Another Pokémon +

› Playground __

#irDevConf ■ @sia_mac

I’ve achieved 2 Pokémons.

Another Pokémon +

Button Component

› Playground __

#irDevConf ■ @sia_mac

I’ve achieved 2 Pokémons.

Another Pokémon +

#irDevConf ■ @sia_mac

init

Button Component “jQuery”

thumbsUp

render

cacheElements handleClick

#irDevConf ■ @sia_mac

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.

#irDevConf ■ @sia_mac

› Why React? __

#irDevConf ■ @sia_mac

¬ 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? __

#irDevConf ■ @sia_mac

¬ 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

#irDevConf ■ @sia_mac

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

One more thing…

#irDevConf ■ @sia_mac

React NativeA framework for building native apps using React.

#irDevConf ■ @sia_mac

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

“Public Workshop”

#irDevConf ■ @sia_mac