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
56
Defying Serverless Constraints: Real-life Serverless Workarounds
allanchua101
0
85
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
900
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
許しとアジャイル
jnuank
1
130
Trust as Infrastructure
bcantrill
0
350
定期的な価値提供だけじゃない、スクラムが導くチームの共創化 / 20251004 Naoki Takahashi
shift_evolve
PRO
3
330
バイブコーディングと継続的デプロイメント
nwiizo
2
440
20201008_ファインディ_品質意識を育てる役目は人かAIか___2_.pdf
findy_eventslides
1
520
ACA でMAGI システムを社内で展開しようとした話
mappie_kochi
1
290
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
3
400
Large Vision Language Modelを用いた 文書画像データ化作業自動化の検証、運用 / shibuya_AI
sansan_randd
0
110
データエンジニアがこの先生きのこるには...?
10xinc
0
450
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
pfn
PRO
2
900
Why Governance Matters: The Key to Reducing Risk Without Slowing Down
sarahjwells
0
110
Adminaで実現するISMS/SOC2運用の効率化 〜 アカウント管理編 〜
shonansurvivors
2
330
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
232
18k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
54
3k
Rails Girls Zürich Keynote
gr2m
95
14k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
It's Worth the Effort
3n
187
28k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Site-Speed That Sticks
csswizardry
11
880
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
Fireside Chat
paigeccino
40
3.7k
The World Runs on Bad Software
bkeepers
PRO
71
11k
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)