Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Intro to React
Bruno Cunha
February 22, 2016
Programming
3
330
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
38
A Chain Is No Stronger Than Its Weakest Turbolink
bruncun
1
36
You Don't Know Hack - Intro to Mob Programming
bruncun
0
28
JS for Rails Developers (is jQuery OK?)
bruncun
0
25
Other Decks in Programming
See All in Programming
TypeScript 4.9のas const satisfiesが便利
tonkotsuboy_com
9
2.3k
Workshop on Jetpack compose
aldefy
0
140
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
0
410
社会人 20 年目エンジニア、発信で技術学びなおしてる話
e99h2121
1
140
AWSとCPUのムフフな関係
cmdemura
0
480
存在しないアセットへの参照と 未公開アセットでのネタバレに どう立ち向かうか / How to prevent missing assets and spoilers by assets
orgachem
0
170
Rust、何もわからない...#6発表資料
ryu19
0
140
ちょうぜつ改め21世紀ふつうのソフトウェア設計
tanakahisateru
7
6.5k
Glance App Widgetでウィジェットを作ろう / MoT TechTalk #15
mot_techtalk
0
130
Functional Data Engineering - A Blueprint for adopting functional principles in data pipeline
vananth22
0
190
(新米)エンジニアリングマネージャーのしごと #RSGT2023
murabayashi
9
5.9k
量子コンピュータ時代のプログラミングセミナー / 20221222_Amplify_seminar _route_optimization
fixstars
0
250
Featured
See All Featured
ReactJS: Keep Simple. Everything can be a component!
pedronauck
657
120k
What's new in Ruby 2.0
geeforr
336
30k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
24
4.6k
Clear Off the Table
cherdarchuk
79
290k
What's in a price? How to price your products and services
michaelherold
233
9.7k
Why Our Code Smells
bkeepers
PRO
326
55k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
349
27k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
6
840
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
152
13k
Rails Girls Zürich Keynote
gr2m
87
12k
Statistics for Hackers
jakevdp
785
210k
The Power of CSS Pseudo Elements
geoffreycrofte
52
4.3k
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