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
Intro to React
Search
Bruno Cunha
February 22, 2016
Programming
3
400
Intro to React
Wordcamp Miami 2016
Bruno Cunha
February 22, 2016
Tweet
Share
More Decks by Bruno Cunha
See All by Bruno Cunha
Stimulus: A Modest Proposal
bruncun
0
47
A Chain Is No Stronger Than Its Weakest Turbolink
bruncun
1
42
You Don't Know Hack - Intro to Mob Programming
bruncun
0
38
JS for Rails Developers (is jQuery OK?)
bruncun
0
29
Other Decks in Programming
See All in Programming
最古の関数型言語「Lisp」ことはじめ / lisp_in_kamiyama
uhooi
1
190
なぜ宣言的 UI は壊れにくいのか / Why declarative UI is less fragile
uenitty
29
13k
feature環境をGitHub ActionsとCloudFormationでいい感じに管理する
nealle
2
310
最近追加した型の紹介とその振り返り
aki19035vc
0
170
みんなのオブザーバビリティプラットフォームを作ってるんだがパフォーマンスがやばい #mackerelio #srenext
ne_sachirou
0
370
SRE チーム立ち上げ前に考えたこと・取り組んだこと / Considerations and Preparations Before Establishing an SRE Team
mackey0225
3
320
Terraformテスト入門
msato
0
530
DynamoDB コスト最適化っぽいことの基本 with Terraform
kuro_kurorrr
2
250
CSC307 Lecture 08
javiergs
PRO
0
330
小さな開発会社を作った理由
polidog
0
1.9k
Activities at Cairo Library
cairolibrary720
0
1.2k
Findy - エンジニア向け会社紹介 / Findy Letter for Engineers
findyinc
2
81k
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1026
450k
How GitHub Uses GitHub to Build GitHub
holman
471
290k
Happy Clients
brianwarren
94
6.5k
How GitHub (no longer) Works
holman
305
140k
The Illustrated Children's Guide to Kubernetes
chrisshort
39
47k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.9k
Scaling GitHub
holman
458
140k
How to Think Like a Performance Engineer
csswizardry
4
590
The Pragmatic Product Professional
lauravandoore
29
6.1k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
18
1.2k
4 Signs Your Business is Dying
shpigford
178
21k
Building Applications with DynamoDB
mza
89
5.8k
Transcript
INTRO TO REACT B R U N O C U
N H A @ B R U N C U N
AGENDA What is React? JSX Props State Use Cases Next
Steps
bit.ly/24izsLz F O L L O W A L O
N G
WHAT IS REACT? I T S N O T A
F R A M E W O R K
React is a library for building composable, dynamic user interfaces.
Components are modular, cohesive sets of data and functions.
React abstracts the DOM and implements one-way reactive data flow.
Its simple and declarative, minimizing boilerplate and making it easy
to reason about.
JSX JS + XML
React components take input data and output what to render
using JSX.
JSX is an XML-like syntax that uses the expressive power
of JavaScript to build HTML.
JSX allows you to keep component markup and display logic
in one place.
PROPS J U S T P R O P E
R T I E S
Components access input data using props.
Parent components assign props to children using attributes.
Data changes cause components to re-render.
A component cannot mutate its own props.
STATE O N L Y F O R I N
T E R A C T I V I T Y
A component's state is mutable, allowing it to respond to
changes.
Updating state will cause a component to re-render appropriately.
State should store as little data as possible because it
is private to the component.
The higher up the hierarchy state is stored, the easier
it can be to maintain.
USE CASES R E F L E C T D
E E P L Y
If your existing front-end stack is buggy, slow, or difficult
to maintain, you should consider React.
If you're already productive with at least one other front-end
technology, you probably don't need React.
If you're a beginner looking to write an interactive, stateful
app, you should consider React.
If you're a beginner looking to write a simple application
with limited interactivity, you probably don't need React.
NEXT STEPS A L W A Y S B E
L E A R N I N G
NEXT STEPS Official Tutorial - bit.ly/1F8DclG ES6 - bit.ly/1RfbS9W Babel
- bit.ly/1Avg4YU Routing - bit.ly/1BFbk90 Redux - bit.ly/1L3mZVE
THANKS! @ B R U N C U N