[ReactJS How to Workshop] Day 01

Slide for my workshop about ReactJS at geekup.vn

Transcript

1. ReactJS How to
2. Today topics • Set-up and Run 1st demo • ES6 Crash course • Project structure & Workflow • Components & JSX Syntax • And Components ... and components
3. Set-up and Run 1st demo npm install -g create-react-app create-react-app my-app cd my-app/ npm start Open Demo
4. 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};
5. ES6 Crash course Export and export default export default Foo; export {COLOR_THEME, sayHello};
6. 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}
7. 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) );
8. Project Structure & Workflow
9. 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 />; } }
10. index.js import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render( <App />, document.getElementById('root') );
11. packages.json 1. dependencies 2. devDependencies 3. scripts npm install --save react-color npm install --save-dev chancejs
12. 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;
13. 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
14. 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;
15. Let make a Button ... to Function component import React from 'react'; const Button = ({ text, onClick }) => { <button onClick={onClick}>{text}</button> } export default Button;
16. Learning Resources • How to develop apps bootstrapped with Create React App. • Grommet getting start • React JS and why it's awesome • Ecosystem
17. What next? • Lifecycle methods • Props and State • Routing • Manage Application State with Mobx • Handle form • Testing with Jest • Styling & Responsive