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
Front-End Web Development in React
Search
Aayush Kapoor
July 01, 2018
Programming
2
91
Front-End Web Development in React
Aayush Kapoor
July 01, 2018
Tweet
Share
Other Decks in Programming
See All in Programming
SODA - FACT BOOK(JP)
sodainc
1
8.6k
kiroとCodexで最高のSpec駆動開発を!!数時間で web3ネイティブなミニゲームを作ってみたよ!
mashharuki
0
860
NIKKEI Tech Talk#38
cipepser
0
140
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.5k
AI Coding Meetup #3 - 導入セッション / ai-coding-meetup-3
izumin5210
0
3.4k
EMこそClaude Codeでコード調査しよう
shibayu36
0
340
Google Opalで使える37のライブラリ
mickey_kubo
3
130
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
190
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
420
monorepo の Go テストをはやくした〜い!~最小の依存解決への道のり~ / faster-testing-of-monorepos
convto
2
530
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
190
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
950
Featured
See All Featured
Designing for humans not robots
tammielis
254
26k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
Raft: Consensus for Rubyists
vanstee
140
7.2k
The Language of Interfaces
destraynor
162
25k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
630
It's Worth the Effort
3n
187
28k
Producing Creativity
orderedlist
PRO
347
40k
Visualization
eitanlees
149
16k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Transcript
Front-End Web Development in React
What is ? Introduction 1 2
Q: “How do you eat an Elephant?” A: “One bite
at a time”. 3 AKA: When things seem daunting, break them down into smaller chunks. Eventually, those chunks will become understandable.
React Component 4
5 A Component is essentially anything that looks like <UppercaseTag>
6
7
8
9
React Component Data 10 props state Component
What are Props? 11
What is State? 12
Props 1. Data that is passed into a component. 2.
They are READ-ONLY in nature. React Props vs State State 1. Data that is managed by the component. 2. It is CHANGEABLE in nature. 13
Data only flows down in tree React Data Flow 14
React Inter-Component Communication 15 Parent Component Child Component Child Component
React One Way Data Flow 16 Props Immutable & Passed-on
Data State Mutable & Private Data
How to ? Introduction 2 17
React with JSX 18 ➔ Feels like HTML inside JS
➔ Compiles down to JavaScript ➔ It is Fast due to Optimisations
React with JSX Example 19
React Component Lifecycle 20 ➔ componentDidMount() ➔ componentDidUpdate() ➔ componentWillMount()
➔ render()
React Component Structure 21
React Project Structure 22 ➔ Great-grandparent ◆ Grandparent • Parent
◦ Child ◦ Child ◆ Grandparent • Parent ◦ Child ◦ Child