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
440
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
49
A Chain Is No Stronger Than Its Weakest Turbolink
bruncun
1
42
You Don't Know Hack - Intro to Mob Programming
bruncun
0
47
JS for Rails Developers (is jQuery OK?)
bruncun
0
32
Other Decks in Programming
See All in Programming
定理証明プラットフォーム lapisla.net
abap34
1
1.7k
AWS Lambda functions with C# 用の Dev Container Template を作ってみた件
mappie_kochi
0
240
Domain-Driven Transformation
hschwentner
2
1.9k
Djangoアプリケーション 運用のリアル 〜問題発生から可視化、最適化への道〜 #pyconshizu
kashewnuts
1
230
Conform を推す - Advocating for Conform
mizoguchicoji
3
680
GAEログのコスト削減
mot_techtalk
0
110
Bedrock Agentsレスポンス解析によるAgentのOps
licux
2
720
SwiftUI Viewの責務分離
elmetal
PRO
0
150
ファインディの テックブログ爆誕までの軌跡
starfish719
2
1.1k
iOSエンジニアから始める visionOS アプリ開発
nao_randd
3
120
技術を根付かせる / How to make technology take root
kubode
1
240
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
30
11k
Featured
See All Featured
Visualization
eitanlees
146
15k
Side Projects
sachag
452
42k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Building an army of robots
kneath
302
45k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Why Our Code Smells
bkeepers
PRO
335
57k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Writing Fast Ruby
sferik
628
61k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
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