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
An introduction to React development
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
Eugene Oskin
January 20, 2018
Programming
0
39
An introduction to React development
Eugene Oskin
January 20, 2018
Tweet
Share
More Decks by Eugene Oskin
See All by Eugene Oskin
REST API. Django, Ruby on Rails, Play! Framework
evgeneoskin
0
92
Introduction to gRPC
evgeneoskin
0
98
GrailInventory – Advanced Backend Development
evgeneoskin
0
38
Bracing Calculator
evgeneoskin
1
69
emotional intelligence, part 2
evgeneoskin
0
40
Office temperature
evgeneoskin
0
35
Parse platform
evgeneoskin
0
100
Hubot
evgeneoskin
0
52
An introduction to iOS development
evgeneoskin
0
43
Other Decks in Programming
See All in Programming
Oxlint JS plugins
kazupon
1
930
CSC307 Lecture 04
javiergs
PRO
0
660
IFSによる形状設計/デモシーンの魅力 @ 慶應大学SFC
gam0022
1
300
なぜSQLはAIぽく見えるのか/why does SQL look AI like
florets1
0
460
プロダクトオーナーから見たSOC2 _SOC2ゆるミートアップ#2
kekekenta
0
210
AI時代の認知負荷との向き合い方
optfit
0
160
なるべく楽してバックエンドに型をつけたい!(楽とは言ってない)
hibiki_cube
0
140
SourceGeneratorのススメ
htkym
0
190
Vibe Coding - AI 驅動的軟體開發
mickyp100
0
170
360° Signals in Angular: Signal Forms with SignalStore & Resources @ngLondon 01/2026
manfredsteyer
PRO
0
120
Implementation Patterns
denyspoltorak
0
280
AIエージェント、”どう作るか”で差は出るか? / AI Agents: Does the "How" Make a Difference?
rkaga
4
2k
Featured
See All Featured
技術選定の審美眼(2025年版) / Understanding the Spiral of Technologies 2025 edition
twada
PRO
117
110k
Product Roadmaps are Hard
iamctodd
PRO
55
12k
Context Engineering - Making Every Token Count
addyosmani
9
650
The AI Search Optimization Roadmap by Aleyda Solis
aleyda
1
5.2k
Designing Experiences People Love
moore
144
24k
We Have a Design System, Now What?
morganepeng
54
8k
Tell your own story through comics
letsgokoyo
1
810
Ruling the World: When Life Gets Gamed
codingconduct
0
140
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
57
Faster Mobile Websites
deanohume
310
31k
[RailsConf 2023] Rails as a piece of cake
palkan
59
6.3k
The Illustrated Guide to Node.js - THAT Conference 2024
reverentgeek
0
250
Transcript
An introduction to React development
What is React?
Glossary • Component • JSx • Functional programming • State
• React Redux • React Router
I will not talk about • testing - e2e, unit
• Deployment • ReactNative • ReactVR • ServerSide Rendering
How to start • CodePen • JSFiddle • etc •
Create-react-app • StackBlitz • Stafolds / Project templates
Simple React app structure app $ tree . ├── components
│ ├── App.jsx │ └── Note.jsx ├── index.jsx └── main.css
Architecture
ToolKit • Browser • VCCode :rocket: • Yarn • ES8
• Eslint • Flow • Webpack • jest
None
React Router
React Router index.js import React from 'react' import { render
} from 'react-dom' import { BrowserRouter } from 'react-router-dom' import App from './components/App'; render(( <BrowserRouter> <App /> </BrowserRouter> ), document.getElementById('root'));
React Router inside the App import { Roster, Schedule }
from './components' const Main = () => ( <main> <Switch> <Route exact path='/' component={Home}/> <Route path='/roster' component={Roster}/> </Switch> </main> ) export default Main
React Redux
Redux Redux is a predictable state container for JavaScript apps.
None
None
State { todos: [{ text: 'Learn Redux', completed: true },
{ text: 'Learn React', completed: false }], visibilityFilter: 'SHOW_COMPLETED' }
Actions { type: 'ADD_TODO', text: 'Go to swimming pool' }
{ type: 'TOGGLE_TODO', index: 1 } { type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }
None
References • React Router Tutorial • Redux Glossary • EggHead
courses • Create-react-app • CodePen • JSFiddle