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
What's new in Adaptive Android development
fornewid
0
110
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
slogパッケージの深掘り
integral0515
0
150
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
10k
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
240
The Evolution of Enterprise Java with Jakarta EE 11 and Beyond
ivargrimstad
0
510
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
220
LLMは麻雀を知らなすぎるから俺が教育してやる
po3rin
2
850
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
4
630
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
7
980
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
820
はじめてのWeb API体験 ー 飲食店検索アプリを作ろうー
akinko_0915
0
170
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
Building Applications with DynamoDB
mza
95
6.5k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
The Cult of Friendly URLs
andyhume
79
6.5k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Embracing the Ebb and Flow
colly
86
4.8k
Documentation Writing (for coders)
carmenintech
72
4.9k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Become a Pro
speakerdeck
PRO
29
5.4k
Making Projects Easy
brettharned
116
6.3k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
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