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
[ReactJS How to Workshop] Day 01
Search
Khánh Trần
September 24, 2016
Programming
1
49
[ReactJS How to Workshop] Day 01
Slide for my workshop about ReactJS at geekup.vn
Khánh Trần
September 24, 2016
Tweet
Share
More Decks by Khánh Trần
See All by Khánh Trần
Docker-Compose workshop
rualatngua
2
210
ReactJS - The Container component pattern
rualatngua
0
54
Seneca workshop
rualatngua
0
130
Other Decks in Programming
See All in Programming
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
120
Micro Frontends for Java Microservices - Devnexus 2024
mraible
PRO
0
490
try!Swift Tokyo 2024 参加報告 LT
akidon0000
1
220
CA.swift19 恋するAIアプリ開発の裏側
oskmr
0
360
Hanami and htmx
bkuhlmann
0
210
はてなにおける CSS Modules、及び CSS Modules に足りないもの / CSS Modules in Hatena, and CSS Modules missing parts
mizdra
7
920
Anthropic Cookbook のおすすめレシピ
schroneko
7
880
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
730
Code Reviews
bkuhlmann
4
890
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
730
見た目から始める生産性向上
ikumatadokoro
7
820
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
170
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
Design by the Numbers
sachag
274
18k
Navigating Team Friction
lara
178
13k
Building Adaptive Systems
keathley
31
1.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
322
20k
Build your cross-platform service in a week with App Engine
jlugia
225
17k
A Philosophy of Restraint
colly
197
16k
Six Lessons from altMBA
skipperchong
21
3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
40
4.4k
What’s in a name? Adding method to the madness
productmarketing
PRO
16
2.6k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
Transcript
ReactJS How to
Today topics • Set-up and Run 1st demo • ES6
Crash course • Project structure & Workflow • Components & JSX Syntax • And Components ... and components
Set-up and Run 1st demo npm install -g create-react-app create-react-app
my-app cd my-app/ npm start Open Demo
ES6 Crash course An JavaScript file is a module... //
file foo.js const COLOR_THEME = 'Ocean'; function sayHello(name) { console.log(`Hello ${name}`); } class Foo { sum(a, b) { return a + b; } } export default Foo; export {COLOR_THEME, sayHello};
ES6 Crash course Export and export default export default Foo;
export {COLOR_THEME, sayHello};
ES6 Crash course Import from a module import Foo, {sayHello,
COLOR_THEME} from './foo'; //don't need .js for import js // or only default class Foo import Foo from './foo'; // or rename to new name import Foo as Bar from './foo'; // or only sayHello function import {sayHello}
ES6 Crash course Arrow Function function sum(a, b) { return
a + b; } const sum = (a, b) => a + b; const arr = [4, 5, 8, 2, 1, 3, 9, 7]; // filter odd number only console.log( arr.filter(number => number % 2 === 0) );
Project Structure & Workflow
Its dead simple to add new component React Color npm
install react-color --save import React from 'react'; import { SketchPicker } from 'react-color'; class Component extends React.Component { render() { return <SketchPicker />; } }
index.js import React from 'react'; import ReactDOM from 'react-dom'; import
App from './App'; ReactDOM.render( <App />, document.getElementById('root') );
packages.json 1. dependencies 2. devDependencies 3. scripts npm install --save
react-color npm install --save-dev chancejs
Render component import React, { Component } from 'react'; import
logo from './logo.svg'; import './App.css'; class App extends Component { render() { return ( <div className="App"> <div className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h2>Welcome to React</h2> </div> <p className="App-intro"> To get started, edit <code>src/App.js</code> and save to reload. </p> </div> ); } } export default App;
Development Tools 1. Webpack • Handling all assets • Leverage
Import css/sass/image/svg • Post process 2. Babel: translsate ES6 to ES5 3. Npm: npm start and npm build
Let make a Button From Class component... import React from
'react'; class Button extends React.Component { render () { const {text, onClick} = this.props; return ( <button onClick={onClick}>{text}</button> ); } } export default Button;
Let make a Button ... to Function component import React
from 'react'; const Button = ({ text, onClick }) => { <button onClick={onClick}>{text}</button> } export default Button;
Learning Resources • How to develop apps bootstrapped with Create
React App. • Grommet getting start • React JS and why it's awesome • Ecosystem
What next? • Lifecycle methods • Props and State •
Routing • Manage Application State with Mobx • Handle form • Testing with Jest • Styling & Responsive