Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
The way of React
Search
Rajika Imal
July 21, 2016
Programming
1
130
The way of React
Talk on React.JS which is a powerful front-end library open sourced by facebook.
Rajika Imal
July 21, 2016
Tweet
Share
More Decks by Rajika Imal
See All by Rajika Imal
Next generation Web UIs with Svelte
rajikaimal
1
100
Deno - A new perspective on server side JavaScript
rajikaimal
0
34
NodeCloud - The Node.js API for open cloud
rajikaimal
1
100
Gentle introduction to deep learning
rajikaimal
1
41
Google Summer of Code - How to get started?
rajikaimal
1
120
Other Decks in Programming
See All in Programming
PHP 8.3で追加されたjson_validate()を徹底的に深掘りしてみよう
mashirou1234
1
720
Kotlinを用いたDSL的な設計手法と使用上の注意
kohii00
3
530
Laravel OpenAPIによる"辛くない"スキーマ駆動開発
kentaroutakeda
2
2.1k
ONE WEDGE_Company_Information
1wedge
0
170
document.write再考
brn
5
2.5k
Deep Dive 大規模システムアーキテクチャ/開発組織エンジニアリング / Deep Dive Large-Scale System Architecture, Development Organization Engineering
nrslib
15
2.9k
クソコード動画『カプセル化 Mk-II』 で考える 上手くカプセル化できない理由 / encapsulation2
minodriven
11
7.9k
C# 大統一理論推進委員会 会員のための Unity Package Manager プロジェクト構成案
monry
PRO
0
580
せっかくモデル図描くのなら、嬉しいことが多い方がいいよね!
kuboaki
1
1.7k
PHPでOfficeファイルを取り扱う! PHP Officeライブラリを プロダクトに組み込んだ話
hirobe1999
0
840
TCA魔法学入門🪄
dazy
0
280
今の SmartHR にエンジニアで入社するとどうなるの?
daisukeshinoku
3
780
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
124
32k
Being A Developer After 40
akosma
56
580k
Design by the Numbers
sachag
274
18k
Teambox: Starting and Learning
jrom
126
8.4k
We Have a Design System, Now What?
morganepeng
42
6.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
12
1.4k
Infographics Made Easy
chrislema
237
18k
Build The Right Thing And Hit Your Dates
maggiecrowley
23
1.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
257
12k
How to Ace a Technical Interview
jacobian
272
22k
Documentation Writing (for coders)
carmenintech
59
3.8k
Transcript
The way of React
@rajikaimal @rajikaimal @rajikaimal
Agenda • Introduction to React.JS • Few facts on React
internals • Brief introduction to Flux architecture • Demo • Angular vs React comparison
What’s React.JS A JavaScript library for creating user interfaces Open
source Not a framework !!!
Out of the box • Component based • Learn once
write anywhere • Declarative • Loosely coupled • No routing solutions • No Ajax support
None
React is the V in MVC Model Controller View React
Components to the rescue • Declarative syntax (JSX) • Tightly
coupled UI logic and description • Cohesive • Reusable • Own properties (props) and states • Uses vanilla JavaScript • Supports ES2015/ES6
Thinking in React const Tweet = React.createClass({ render: function() {
return ( <div> <input type="text" value={this.props.tweetText} /> </div> ); } });
None
None
Virtual DOM - an abstraction of real DOM Tree diff
algorithm
MVC - cascading updates
None
Flux architecture An application architecture for client side web applications
one directional data flow
Demo time https://github.com/rajikaimal/github-scraper
Angular vs React VS
Angular vs React • Steep learning curve • Regular DOM
• 2 way data binding • No unique solution for server side rendering • Smooth learning curve • Virtual DOM • 1 way data binding • Supports server side rendering
What’s next ? • Unit testing : Jest • React
Devtools • Redux • Server side rendering
None
Thank you ! @rajikaimal @rajikaimal @rajikaimal