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
Eugene Oskin
January 20, 2018
Programming
0
34
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
71
Introduction to gRPC
evgeneoskin
0
60
GrailInventory – Advanced Backend Development
evgeneoskin
0
32
Bracing Calculator
evgeneoskin
1
63
emotional intelligence, part 2
evgeneoskin
0
34
Office temperature
evgeneoskin
0
31
Parse platform
evgeneoskin
0
96
Hubot
evgeneoskin
0
47
An introduction to iOS development
evgeneoskin
0
37
Other Decks in Programming
See All in Programming
try! Swift Tokyo 2024 参加報告 / try! Swift Tokyo 2024 Report
hironytic
0
210
TYPO3 v13 – The road to LTS: What's new and new APIs
luisasofie_xoxo
0
210
try! Swift Tokyo 初参加報告LT
hinakko2
0
220
Ruby Pattern Matching
bkuhlmann
0
930
Goのmultiple errorsについて (2024年4月版)
syumai
4
1k
Amazon SQSコンシューマー疎結合への旅 - 出張! #DevelopersIO IT技術ブログの中の人が語る勉強会 #3
quiver
0
280
サイコロで理解する統計的仮説検定の考え方
tatamiya
4
970
GitHub Actionsで泣かないためにやっておきたい設定 / Recommended GHA settings to avoid crying
pinkumohikan
3
540
AmperとFleetを使ったAndroidアプリ
yoppie
0
220
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
980
エンターテイメント業界で利用されるAWS
demuyan
0
210
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
230
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
23
4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
Facilitating Awesome Meetings
lara
42
5.6k
What's in a price? How to price your products and services
michaelherold
237
11k
Typedesign – Prime Four
hannesfritz
36
2.1k
Building Your Own Lightsaber
phodgson
99
5.7k
Teambox: Starting and Learning
jrom
128
8.4k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
GraphQLの誤解/rethinking-graphql
sonatard
51
9.2k
Why Our Code Smells
bkeepers
PRO
331
56k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
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