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
94
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
150
Node JS for Architects Part 1
allanchua101
0
290
Traditional, N-Tier & Microservices
allanchua101
0
85
Things You Need to Know to Become a Serverless API Ninja
allanchua101
1
750
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
150
API Gateways in a Nutshell
allanchua101
0
120
Other Decks in Technology
See All in Technology
Nix入門パラダイム編
asa1984
2
200
Figma Dev Modeで進化するデザインとエンジニアリングの協働 / figma-with-engineering
cyberagentdevelopers
PRO
1
430
生成AIの強みと弱みを理解して、生成AIがもたらすパワーをプロダクトの価値へ繋げるために実践したこと / advance-ai-generating
cyberagentdevelopers
PRO
1
180
フルカイテン株式会社 採用資料
fullkaiten
0
36k
GitHub Universe: Evaluating RAG apps in GitHub Actions
pamelafox
0
170
マネジメント視点でのre:Invent参加 ~もしCEOがre:Inventに行ったら~
kojiasai
0
460
Oracle Cloud Infrastructureデータベース・クラウド:各バージョンのサポート期間
oracle4engineer
PRO
27
12k
【技術書典17】OpenFOAM(自宅で極める流体解析)2次元円柱まわりの流れ
kamakiri1225
0
210
オーティファイ会社紹介資料 / Autify Company Deck
autifyhq
9
120k
グローバル展開を見据えたサービスにおける機械翻訳プラクティス / dp-ai-translating
cyberagentdevelopers
PRO
1
150
大規模データ基盤チームのオンプレTiDB運用への挑戦 / dpu-tidb
cyberagentdevelopers
PRO
1
110
プロダクト成長に対応するプラットフォーム戦略:Authleteによる共通認証基盤の移行事例 / Building an authentication platform using Authlete and AWS
kakehashi
1
150
Featured
See All Featured
Making Projects Easy
brettharned
115
5.9k
A Philosophy of Restraint
colly
203
16k
Typedesign – Prime Four
hannesfritz
39
2.4k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
32
1.8k
Scaling GitHub
holman
458
140k
Side Projects
sachag
452
42k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.6k
BBQ
matthewcrist
85
9.3k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
290
Adopting Sorbet at Scale
ufuk
73
9k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
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)