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
380
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
雑に思考を整理する技術と効能
konifar
58
28k
Front-end application development, Symfony-style(s)
dunglas
2
1.9k
Changed Rules: Architectures with Lightweight Stores
manfredsteyer
PRO
0
240
코틀린으로 멀티플랫폼 만들기
pangmoo
0
140
Tailwind CSSを本気でカスタマイズする方法
fsubal
13
5k
Elm 0.19.0 Changes
bkuhlmann
0
490
使ってみよう Azure AI Document Intelligence
kosmosebi
2
260
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
920
try! Swift Tokyo 2024のLT枠に採択されたプロポーザルを出すときに考えていたこと
ski
0
350
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
600
PHPはいつから死んでいるかの調査
chiroruxx
1
350
PHPの次期バージョンはこの時期どうなっているのか - Internalsの開発体制について - PHPカンファレンス小田原
youkidearitai
PRO
1
190
Featured
See All Featured
Being A Developer After 40
akosma
56
580k
Typedesign – Prime Four
hannesfritz
36
2.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
243
20k
Music & Morning Musume
bryan
41
5.6k
Into the Great Unknown - MozCon
thekraken
10
990
Building Adaptive Systems
keathley
30
1.9k
Design by the Numbers
sachag
274
18k
Faster Mobile Websites
deanohume
298
30k
Become a Pro
speakerdeck
PRO
10
4.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
39
4.4k
Building a Scalable Design System with Sketch
lauravandoore
455
32k
We Have a Design System, Now What?
morganepeng
42
6.7k
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