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
95
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
Sneak Peek at Kali Linux
allanchua101
0
160
Node JS for Architects Part 1
allanchua101
0
290
Traditional, N-Tier & Microservices
allanchua101
0
90
Things You Need to Know to Become a Serverless API Ninja
allanchua101
1
770
Ocelot Pluggable Gateway
allanchua101
0
1.4k
API Gateway in a Nutshell 2019
allanchua101
0
1.4k
JavaScript API Proxy Pattern
allanchua101
0
600
API Gateways - Dealing with Distributed Backends
allanchua101
0
160
API Gateways in a Nutshell
allanchua101
0
130
Other Decks in Technology
See All in Technology
プロダクト開発を加速させるためのQA文化の築き方 / How to build QA culture to accelerate product development
mii3king
1
260
ブラックフライデーで購入したPixel9で、Gemini Nanoを動かしてみた
marchin1989
1
530
LINEスキマニにおけるフロントエンド開発
lycorptech_jp
PRO
0
330
Amazon SageMaker Unified Studio(Preview)、Lakehouse と Amazon S3 Tables
ishikawa_satoru
0
150
KubeCon NA 2024 Recap: How to Move from Ingress to Gateway API with Minimal Hassle
ysakotch
0
200
NilAway による静的解析で「10 億ドル」を節約する #kyotogo / Kyoto Go 56th
ytaka23
3
380
私なりのAIのご紹介 [2024年版]
qt_luigi
1
120
宇宙ベンチャーにおける最近の情シス取り組みについて
axelmizu
0
110
マルチプロダクト開発の現場でAWS Security Hubを1年以上運用して得た教訓
muziyoshiz
3
2.3k
あの日俺達が夢見たサーバレスアーキテクチャ/the-serverless-architecture-we-dreamed-of
tomoki10
0
460
非機能品質を作り込むための実践アーキテクチャ
knih
5
1.3k
WACATE2024冬セッション資料(ユーザビリティ)
scarletplover
0
200
Featured
See All Featured
How to Ace a Technical Interview
jacobian
276
23k
Scaling GitHub
holman
458
140k
YesSQL, Process and Tooling at Scale
rocio
169
14k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
2
170
Raft: Consensus for Rubyists
vanstee
137
6.7k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
29
2k
Typedesign – Prime Four
hannesfritz
40
2.4k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
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)