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
53
[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
230
ReactJS - The Container component pattern
rualatngua
0
62
Seneca workshop
rualatngua
0
140
Other Decks in Programming
See All in Programming
Design Foundational Data Engineering Observability
sucitw
3
200
Flutter with Dart MCP: All You Need - 박제창 2025 I/O Extended Busan
itsmedreamwalker
0
150
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
OSS開発者という働き方
andpad
5
1.7k
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
4.3k
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
570
MCPとデザインシステムに立脚したデザインと実装の融合
yukukotani
4
1.5k
AIでLINEスタンプを作ってみた
eycjur
1
230
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
190
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
240
概念モデル→論理モデルで気をつけていること
sunnyone
3
300
rage against annotate_predecessor
junk0612
0
170
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Building an army of robots
kneath
306
46k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
How to Ace a Technical Interview
jacobian
279
23k
The Cult of Friendly URLs
andyhume
79
6.6k
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