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
450
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
50
A Chain Is No Stronger Than Its Weakest Turbolink
bruncun
1
45
You Don't Know Hack - Intro to Mob Programming
bruncun
0
56
JS for Rails Developers (is jQuery OK?)
bruncun
0
34
Other Decks in Programming
See All in Programming
Vibe Codingの幻想を超えて-生成AIを現場で使えるようにするまでの泥臭い話.ai
fumiyakume
18
9.1k
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1.1k
AIのメモリー
watany
11
910
「App Intent」よくわからんけどすごい!
rinngo0302
1
120
Yes, You Can Work on Rails & any other Gem
kaspth
0
110
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
2
130
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1.2k
slogパッケージの深掘り
integral0515
0
120
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
260
Workers を定期実行する方法は一つじゃない
rokuosan
0
130
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
660
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
39
14k
Featured
See All Featured
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Into the Great Unknown - MozCon
thekraken
40
1.9k
Embracing the Ebb and Flow
colly
86
4.8k
Facilitating Awesome Meetings
lara
54
6.5k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Agile that works and the tools we love
rasmusluckow
329
21k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
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