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
40
Defying Serverless Constraints: Real-life Serverless Workarounds
allanchua101
0
73
Sneak Peek at Kali Linux
allanchua101
0
170
Node JS for Architects Part 1
allanchua101
0
300
Traditional, N-Tier & Microservices
allanchua101
0
100
Things You Need to Know to Become a Serverless API Ninja
allanchua101
1
860
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
第9回情シス転職ミートアップ_テックタッチ株式会社
forester3003
0
160
解析の定理証明実践@Lean 4
dec9ue
0
110
TechLION vol.41~MySQLユーザ会のほうから来ました / techlion41_mysql
sakaik
0
150
OpenHands🤲にContributeしてみた
kotauchisunsun
0
220
本当に使える?AutoUpgrade の新機能を実践検証してみた
oracle4engineer
PRO
1
130
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全 / 20250625-aws-summit-aws-policy
opelab
7
780
AIエージェントの継続的改善のためオブザーバビリティ
pharma_x_tech
6
1.4k
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全
opelab
9
2.2k
In Praise of "Normal" Engineers (LDX3)
charity
3
1.2k
PHP開発者のためのSOLID原則再入門 #phpcon / PHP Conference Japan 2025
shogogg
1
390
AIの最新技術&テーマをつまんで紹介&フリートークするシリーズ #1 量子機械学習の入門
tkhresk
0
130
LinkX_GitHubを基点にした_AI時代のプロジェクトマネジメント.pdf
iotcomjpadmin
0
160
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
245
12k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
790
Automating Front-end Workflow
addyosmani
1370
200k
Producing Creativity
orderedlist
PRO
346
40k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
660
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
For a Future-Friendly Web
brad_frost
179
9.8k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Site-Speed That Sticks
csswizardry
10
650
Faster Mobile Websites
deanohume
307
31k
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)