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
Defying Serverless Constraints: Real-life Serverless Workarounds
allanchua101
0
10
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
810
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
170
Other Decks in Technology
See All in Technology
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
17
45k
ユーザーストーリーマッピングから始めるアジャイルチームと並走するQA / Starting QA with User Story Mapping
katawara
0
260
Helm , Kustomize に代わる !? 次世代 k8s パッケージマネージャー Glasskube 入門 / glasskube-entry
parupappa2929
0
270
OpenID BizDay#17 KYC WG活動報告(法人) / 20250219-BizDay17-KYC-legalidentity
oidfj
0
350
PHPで印刷所に入稿できる名札データを作る / Generating Print-Ready Name Tag Data with PHP
tomzoh
0
140
人はなぜISUCONに夢中になるのか
kakehashi
PRO
6
1.7k
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
100
The Future of SEO: The Impact of AI on Search
badams
0
240
脳波を用いた嗜好マッチングシステム
hokkey621
0
170
あれは良かった、あれは苦労したB2B2C型SaaSの新規開発におけるCloud Spanner
hirohito1108
2
770
Classmethod AI Talks(CATs) #17 司会進行スライド(2025.02.19) / classmethod-ai-talks-aka-cats_moderator-slides_vol17_2025-02-19
shinyaa31
0
160
TAMとre:Capセキュリティ編 〜拡張脅威検出デモを添えて〜
fujiihda
2
360
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Bootstrapping a Software Product
garrettdimon
PRO
306
110k
Visualization
eitanlees
146
15k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
The Invisible Side of Design
smashingmag
299
50k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
RailsConf 2023
tenderlove
29
1k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
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)