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
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
10
1.8k
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
210
Open source software: how to live long and go far
gaelvaroquaux
0
620
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
最近のVS Codeで気になるニュース 2025/01
74th
1
250
CI改善もDatadogとともに
taumu
0
110
DROBEの生成AI活用事例 with AWS
ippey
0
130
プログラミング言語学習のススメ / why-do-i-learn-programming-language
yashi8484
0
120
WebDriver BiDiとは何なのか
yotahada3
1
140
GAEログのコスト削減
mot_techtalk
0
110
AWSマネコンに複数のアカウントで入れるようになりました
yuhta28
2
160
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
480
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.4k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.3k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Facilitating Awesome Meetings
lara
51
6.2k
Designing for humans not robots
tammielis
250
25k
How STYLIGHT went responsive
nonsquared
98
5.3k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
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