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
Introduction to React
Search
Allan Chua
January 29, 2022
Technology
0
100
Introduction to React
A short introduction to react
Allan Chua
January 29, 2022
Tweet
Share
More Decks by Allan Chua
See All by Allan Chua
Defying Serverless API Constraints (API Days 2025)
allanchua101
0
55
Defying Serverless Constraints: Real-life Serverless Workarounds
allanchua101
0
83
Sneak Peek at Kali Linux
allanchua101
0
170
Node JS for Architects Part 1
allanchua101
0
300
Traditional, N-Tier & Microservices
allanchua101
0
110
Things You Need to Know to Become a Serverless API Ninja
allanchua101
1
890
Ocelot Pluggable Gateway
allanchua101
0
1.5k
API Gateway in a Nutshell 2019
allanchua101
0
1.5k
JavaScript API Proxy Pattern
allanchua101
0
610
Other Decks in Technology
See All in Technology
ブロックテーマ時代における、テーマの CSS について考える Toro_Unit / 2025.09.13 @ Shinshu WordPress Meetup
torounit
0
130
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3.2k
LLM時代のパフォーマンスチューニング:MongoDB運用で試したコンテキスト活用の工夫
ishikawa_pro
0
170
新規プロダクトでプロトタイプから正式リリースまでNext.jsで開発したリアル
kawanoriku0
1
160
バイブスに「型」を!Kent Beckに学ぶ、AI時代のテスト駆動開発
amixedcolor
2
580
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
oracle4engineer
PRO
0
170
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
aeonpeople
0
250
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
130
プラットフォーム転換期におけるGitHub Copilot活用〜Coding agentがそれを加速するか〜 / Leveraging GitHub Copilot During Platform Transition Periods
aeonpeople
1
210
なぜスクラムはこうなったのか?歴史が教えてくれたこと/Shall we explore the roots of Scrum
sanogemaru
5
1.6k
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
190
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
260
Featured
See All Featured
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
A Modern Web Designer's Workflow
chriscoyier
696
190k
Balancing Empowerment & Direction
lara
3
620
Product Roadmaps are Hard
iamctodd
PRO
54
11k
For a Future-Friendly Web
brad_frost
180
9.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
Producing Creativity
orderedlist
PRO
347
40k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
810
Art, The Web, and Tiny UX
lynnandtonic
303
21k
We Have a Design System, Now What?
morganepeng
53
7.8k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
Transcript
An Introduction to Chua Allan Gabriel Louis Valencia React JS
Table of Contents • What is React • Supported Platforms
• Origin / History • Core Philosophy • Why react • Pre-requisites • Popular Tools • UI Frameworks • How it differentiates with Vue & Angular • How to create a project • Basic Usage • Demo App
Did you know how they flew it?
Did you know how they flew it?
What is React JS? A JavaScript library for building user
interfaces
Supported Platforms Web Mobile Desktop
Origin / History Jordan Walke Software Engineer Worked at Facebook
Created React Scaled to Instagram @ 2012 Open-sourced @ 2013 Most Productionized Framework @ 2022
Core Philosophy Component-Based Declarative Learn-Once; Write Anywhere
Why react? Reusable Components Performance enhancements Can be used for
mobile apps Unidirectional data flow Simple development of dynamic websites Small Learning Curve
Unidirectional vs Bidirectional
Pre-requisites
Popular Tools Developer Tools Reactide Storybook Bundle Analyzer Why Did
You Render Jest Formik and Yup React Hook Form React Sight React Proto
Material UI UI Frameworks Bootstrap UI Ant Design
Vue & Angular Comparison with
Unidirectional Data Flow Bidirectional
Dashboards & Read Only Great for building Forms and Design
Systems
Maintainability & Stability GOOD POOR
Stars in Github
Job Postings
How to create a project
Without react
With React
Thanks to Component Syntax
State is the king
Events are propagated by the root
Demo
Learning Materials - React GITHUB Page (Link) - React Website
(Link) - React Learning Tutorial (Link) - Material UI (Link) - Carbon (Link) - React in 10 hours Free Code Camp (Link) - React for Beginners (Link) - React Full Course (Link) - React TypeScript (Link)