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
390
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
44
A Chain Is No Stronger Than Its Weakest Turbolink
bruncun
1
42
You Don't Know Hack - Intro to Mob Programming
bruncun
0
33
JS for Rails Developers (is jQuery OK?)
bruncun
0
29
Other Decks in Programming
See All in Programming
Direct Style Effect Systems The Print[A] ExampleA Comprehension Aid
philipschwarz
PRO
0
400
TypeScriptから始める VR生活
tamagokakeg
2
110
Scalable Customer Journey Orchestration (CJO)
lewuathe
0
480
Next.js App Router
quramy
14
2.3k
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
180
FoodGram
iseruuuuu
0
230
Good first issues of TypeProf
mame
1
240
WebGLで始める コンピュータグラフィックス入門
heller77
0
370
TypeScriptで使いやすいOpenAPIの書き方
yukimochi_dwango
0
240
一文字エイリアスのすすめ
fujimura
0
190
Effectで作る堅牢でスケーラブルなAPIゲートウェイ / Robust and Scalable API Gateway Built on Effect
yasaichi
7
1.2k
TypeScriptの型とパフォーマンス (TSKaigi 2024)
ypresto
13
4.2k
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
123
39k
Music & Morning Musume
bryan
41
5.6k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Being A Developer After 40
akosma
67
580k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
Side Projects
sachag
451
41k
Design by the Numbers
sachag
274
18k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
12
1.1k
Clear Off the Table
cherdarchuk
85
310k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Robots, Beer and Maslow
schacon
PRO
155
7.9k
A designer walks into a library…
pauljervisheath
201
23k
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