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
99
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
35
Defying Serverless Constraints: Real-life Serverless Workarounds
allanchua101
0
67
Sneak Peek at Kali Linux
allanchua101
0
170
Node JS for Architects Part 1
allanchua101
0
290
Traditional, N-Tier & Microservices
allanchua101
0
100
Things You Need to Know to Become a Serverless API Ninja
allanchua101
1
850
Ocelot Pluggable Gateway
allanchua101
0
1.5k
API Gateway in a Nutshell 2019
allanchua101
0
1.4k
JavaScript API Proxy Pattern
allanchua101
0
610
Other Decks in Technology
See All in Technology
OSMnx Galleryの紹介
mopinfish
0
150
TypeScript と歩む OpenAPI の discriminator / OpenAPI discriminator with TypeScript
kaminashi
1
150
プロジェクトマネジメント実践論|現役エンジニアが語る!~チームでモノづくりをする時のコツとは?~
mixi_engineers
PRO
3
190
AIに実況させる / AI Streamer
motemen
3
1.4k
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.2k
OTel meets Wasm: プラグイン機構としてのWebAssemblyから見る次世代のObservability
lycorptech_jp
PRO
1
310
RDRA3.0を知ろう
kanzaki
2
440
Bill One 開発エンジニア 紹介資料
sansan33
PRO
4
12k
Introduction to Bill One Development Engineer
sansan33
PRO
0
240
Javaアプリケーションの配布とパッケージング / Distribution and packaging of Java applications
hogelog
1
380
大事なのは、AIの精度だけじゃない!〜1円のズレも許されない経理領域とAI〜
jun_nemoto
11
5.2k
他チームへ越境したら、生データ提供ソリューションのクエリ費用95%削減へ繋がった話 / Cross-Team Impact: 95% Off Raw Data Query Costs
yamamotoyuta
0
250
Featured
See All Featured
Writing Fast Ruby
sferik
628
61k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.4k
Rails Girls Zürich Keynote
gr2m
94
13k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Building Adaptive Systems
keathley
41
2.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
How STYLIGHT went responsive
nonsquared
100
5.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
21k
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)