SlideShare a Scribd company logo

20190118_NetadashiMeetup#8_React2019

•
•
M
Makoto Mori

The document outlines the steps to create a basic React application using Create React App, including initializing the project, adding React and ReactDOM, creating components, routing, and deploying to Now. Key steps include generating a package.json, adding Babel and webpack for transpilation, and using Material UI for styling components. The application is then deployed to Now for hosting.

1 of 59
Download to read offline
  
もりしん #スマブラSP #人工知能 #React #ドラゴンボール #PWA #スタートアップ #仮想通貨 #Python
    
$ mkdir work  work
$ yarn init [-y]   work package.json
$ yarn add react react-dom       work node_modules package.json yarn.lock
$ mkdir public  work node_modules public package.json yarn.lock
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Netadashi</title> </head> <body> <article id="root">Hello</article> </body> </html> work node_modules public index.html package.json yarn.lock
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Netadashi</title> </head> <body> <article id="root">Hello</article> </body> </html> work node_modules public index.html package.json yarn.lock
$ mkdir src  work node_modules public index.html package.json yarn.lock src
import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <h1>World</h1>, document.querySelector('#root') ); work node_modules public index.html package.json yarn.lock src index.jsx
$ yarn add webpack webpack-cli       work node_modules public index.html package.json yarn.lock src index.jsx
const path = require('path'); module.exports = { entry: path.join(__dirname, 'src', 'index.jsx'), output: { filename: 'bundle.js', path: path.join(__dirname, 'public', 'assets', 'js') } }; work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock
$ webpack [--mode development] ERROR in C:/Netadashi/work/src/index.jsx 5:2 Module parse failed: Unexpected token (5:2) You may need an appropriate loader to handle this file type. | | ReactDOM.render( > <h1>World</h1>, | document.querySelector('#root') | ); error An unexpected error occurred: "Command failed.… work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock
$ yarn add @babel/core @babel/preset-react babel-loader         work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock
const path = require('path'); module.exports = { entry: path.join(__dirname, 'src', 'index.jsx'), output: { filename: 'bundle.js', path: path.join(__dirname, 'public', 'assets', 'js') }, module: { rules: [ { test: /¥.js[x]?$/, exclude: /node_modules/, use: { loader: 'babel-loader' } } ] } }; work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock
$ yarn add webpack-dev-server    work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock
... module: { rules: [ { test: /¥.js[x]?$/, exclude: /node_modules/, use: { loader: 'babel-loader' } } ] }, devServer: { contentBase: path.join(__dirname, 'public') } }; work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock
... "dependencies": { "@babel/core": "^7.2.2", "@babel/preset-env": "^7.2.3", "@babel/preset-react": "^7.0.0", "babel-loader": "^8.0.5", "react": "^16.7.0", "react-dom": "^16.7.0", "webpack": "^4.28.4", "webpack-cli": "^3.2.1", "webpack-dev-server": "^3.1.14" }, "scripts": { "dev": "webpack --mode development", "start": "webpack-dev-server --mode development" } } work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock
$ yarn [run] dev [--watch]  work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js bundle.js
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Netadashi</title> </head> <body> <article id="root">Hello</article> <script src="/assets/js/bundle.js"></script> </body> </html> work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js bundle.js
$ yarn [run] start   
$ yarn [run] start   
Congratulations…?
$ yarn add @material-ui/core  work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js bundle.js
import React from 'react'; import ReactDOM from 'react-dom'; const App = () => { return ( <> <h1>World</h1> </> ); }; ReactDOM.render( <App />, document.querySelector('#root') ); work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js bundle.js
import React from 'react'; import ReactDOM from 'react-dom'; import { Button, Typography } from '@material-ui/core'; const App = () => { return ( <> <Typography variant="h6">Neta</Typography> <Button variant="contained" color="primary">Dashi</Button> </> ); }; ReactDOM.render( <App />, document.querySelector('#root') ); work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js bundle.js
$ mkdir css  work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js bundle.js css
body { margin: 0; } work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js bundle.js css master.css
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="/assets/css/master.css"> <title>Netadashi</title> </head> <body> <article id="root">Loading...</article> <script src="/assets/js/bundle.js"></script> </body> </html> work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js bundle.js css master.css
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="/assets/css/master.css"> <title>Netadashi</title> </head> <body> <article id="root">Loading...</article> <script src="/assets/js/bundle.js"></script> </body> </html> work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js bundle.js css master.css
... const App = () => { return ( <> <Typography variant="h6">Neta</Typography> <section style={{ background: 'url(https://source.unsplash.com/random/500x500) center / cover', height: '80vw', width: '80vw' }} /> <Button variant="contained" color="primary" onClick={() => { location.reload(); }} > Dashi </Button> </> ); }; ... work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js bundle.js css master.css
... const App = () => { return ( <> <Typography variant="h6">Neta</Typography> <section style={{ background: 'url(https://source.unsplash.com/random/500x500) center / cover', height: '80vw', width: '80vw' }} /> <Button variant="contained" color="primary" onClick={() => { location.reload(); }} > Dashi </Button> </> ); }; ... work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js bundle.js css master.css
import React from 'react'; import ReactDOM from 'react-dom'; import { AppBar, Button, Toolbar, Typography } from '@material-ui/core'; const App = () => { return ( <> <AppBar position="static"> <Toolbar> <Typography variant="h6" color="inherit">Neta</Typography> </Toolbar> </AppBar> ... work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js bundle.js css master.css
import React from 'react'; import ReactDOM from 'react-dom'; import { AppBar, Button, Toolbar, Typography } from '@material-ui/core'; const App = () => { return ( <> <AppBar position="static"> <Toolbar> <Typography variant="h6" color="inherit">Neta</Typography> </Toolbar> </AppBar> ... work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js bundle.js css master.css
$ mkdir components    work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js css components
import React from 'react'; import { AppBar, Toolbar, Typography } from '@material-ui/core'; const Header = () => { return ( <> <AppBar position="static"> <Toolbar> <Typography variant="h6" color="inherit">Neta</Typography> </Toolbar> </AppBar> </> ); }; export default Header; work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js css components Header.jsx
... import { Button } from '@material-ui/core'; import Header from './components/Header.jsx'; const App = () => { return ( <> <Header /> <section style={{ background: 'url(https:// source.unsplash.com/random/500x500) center / cover', height: '80vw', width: '80vw' }} /> ... work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js css components Header.jsx
... import { Button, Grid } from '@material-ui/core'; import Header from './components/Header.jsx'; const App = () => { return ( <> <Header /> <Grid container alignItems="center" justify="center"> <Grid style={{ padding: 24 }}> <section style={{ background: 'url(https://source.unsplash.com/random/500x500) center / cover', height: '80vw', width: '80vw', border: 'solid 3vw #fff', boxShadow: '0 1vw 3vw #999' }} /> </Grid> </Grid> ... work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js css components Header.jsx
... import { Button, Grid } from '@material-ui/core'; import Header from './components/Header.jsx'; const App = () => { return ( <> <Header /> <Grid container alignItems="center" justify="center"> <Grid style={{ padding: 24 }}> <section style={{ background: 'url(https://source.unsplash.com/random/500x500) center / cover', height: '80vw', width: '80vw', border: 'solid 3vw #fff', boxShadow: '0 1vw 3vw #999' }} /> </Grid> </Grid> ... work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js css components Header.jsx
import React from 'react'; import { AppBar, Toolbar, Typography } from '@material-ui/core'; const Header = () => { return ( <> <AppBar position="static"> <Toolbar> <Typography variant="h6" color="inherit">Neta/Dash</Typography> </Toolbar> </AppBar> </> ); }; export default Header; work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js css components Header.jsx
... import { Fab, Grid, Icon } from '@material-ui/core'; import Header from './components/Header.jsx'; const App = () => { return ( <> <Header /> <Grid container alignItems="center" justify="center"> ... </Grid> <section style={{ position: 'fixed', right: '6vw', bottom: '6vw' }}> <Fab color="secondary" onClick={() => { location.reload(); }}> <Icon fontSize="large">directions_run</Icon> </Fab> </section> ... work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js css components Header.jsx
... import { Fab, Grid, Icon } from '@material-ui/core'; import Header from './components/Header.jsx'; const App = () => { return ( <> <Header /> <Grid container alignItems="center" justify="center"> ... </Grid> <section style={{ position: 'fixed', right: '6vw', bottom: '6vw' }}> <Fab color="secondary" onClick={() => { location.reload(); }}> <Icon fontSize="large">directions_run</Icon> </Fab> </section> ... work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js css components Header.jsx
$ yarn global add now    work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js css components Header.jsx
{ "name": "work", "version": "1.0.0", "main": "index.js", "license": "MIT", "dependencies": { "@babel/core": "^7.2.2", "@babel/preset-react": "^7.0.0", "@material-ui/core": "^3.9.0", "babel-loader": "^8.0.5", "react": "^16.7.0", "react-dom": "^16.7.0", "webpack": "^4.28.4", "webpack-cli": "^3.2.1", "webpack-dev-server": "^3.1.14" }, "scripts": { "dev": "webpack --mode development", "build": "webpack --mode production", "start": "webpack-dev-server --mode development" } } work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js css components Header.jsx
$ yarn [run] build  work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js css components Header.jsx
$ now  work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js css components Header.jsx

     
    
20190118_NetadashiMeetup#8_React2019

Recommended

Articulo java web
Articulo java webArticulo java web
Articulo java web
I.S.T. Santo Domingo
 
Google
GoogleGoogle
Googlesoon
 
Deploying
DeployingDeploying
Deployingsoon
 
Dandelion 0.10.0
Dandelion 0.10.0Dandelion 0.10.0
Dandelion 0.10.0
Thibault DUCHATEAU
 
Odoo - CMS performances optimization
Odoo - CMS performances optimizationOdoo - CMS performances optimization
Odoo - CMS performances optimization
Odoo
 
Diy frozen snow globe
Diy frozen snow globeDiy frozen snow globe
Diy frozen snow globeraveenashrynayr03
 
AtlasCamp 2010: Understanding the Atlassian Platform - Tim Pettersen
AtlasCamp 2010: Understanding the Atlassian Platform - Tim PettersenAtlasCamp 2010: Understanding the Atlassian Platform - Tim Pettersen
AtlasCamp 2010: Understanding the Atlassian Platform - Tim PettersenAtlassian
 
AtlasCamp 2013: Modernizing your Plugin UI
AtlasCamp 2013: Modernizing your Plugin UI AtlasCamp 2013: Modernizing your Plugin UI
AtlasCamp 2013: Modernizing your Plugin UI colleenfry
 

Recommended

Articulo java web
Articulo java webArticulo java web
Articulo java web
I.S.T. Santo Domingo
 
Google
GoogleGoogle
Googlesoon
 
Deploying
DeployingDeploying
Deployingsoon
 
Dandelion 0.10.0
Dandelion 0.10.0Dandelion 0.10.0
Dandelion 0.10.0
Thibault DUCHATEAU
 
Odoo - CMS performances optimization
Odoo - CMS performances optimizationOdoo - CMS performances optimization
Odoo - CMS performances optimization
Odoo
 
Diy frozen snow globe
Diy frozen snow globeDiy frozen snow globe
Diy frozen snow globeraveenashrynayr03
 
AtlasCamp 2010: Understanding the Atlassian Platform - Tim Pettersen
AtlasCamp 2010: Understanding the Atlassian Platform - Tim PettersenAtlasCamp 2010: Understanding the Atlassian Platform - Tim Pettersen
AtlasCamp 2010: Understanding the Atlassian Platform - Tim PettersenAtlassian
 
AtlasCamp 2013: Modernizing your Plugin UI
AtlasCamp 2013: Modernizing your Plugin UI AtlasCamp 2013: Modernizing your Plugin UI
AtlasCamp 2013: Modernizing your Plugin UI colleenfry
 
Progressive Downloads and Rendering
Progressive Downloads and RenderingProgressive Downloads and Rendering
Progressive Downloads and Rendering
Stoyan Stefanov
 
How to make a WordPress theme
How to make a WordPress themeHow to make a WordPress theme
How to make a WordPress theme
Hardeep Asrani
 
E2 appspresso hands on lab
E2 appspresso hands on labE2 appspresso hands on lab
E2 appspresso hands on labNAVER D2
 
Drupal as a web framework
Drupal as a web frameworkDrupal as a web framework
Drupal as a web framework
Adam Kalsey
 
Presentation
PresentationPresentation
Presentation
Manav Prasad
 
Jsp
JspJsp
Jsp
Manav Prasad
 
Html5 For Jjugccc2009fall
Html5 For Jjugccc2009fallHtml5 For Jjugccc2009fall
Html5 For Jjugccc2009fall
Shumpei Shiraishi
 
Php frameworks
Php frameworksPhp frameworks
Php frameworks
Anil Kumar Panigrahi
 
The Devil and HTML5
The Devil and HTML5The Devil and HTML5
The Devil and HTML5Myles Braithwaite
 
True Dreams Furniture
True Dreams FurnitureTrue Dreams Furniture
True Dreams Furniture
SimranGaur3
 
Make More Money With Advanced Custom Fields - WordCampYYC 2015
Make More Money With Advanced Custom Fields - WordCampYYC 2015Make More Money With Advanced Custom Fields - WordCampYYC 2015
Make More Money With Advanced Custom Fields - WordCampYYC 2015
buildstudio
 
Grails resources
Grails resourcesGrails resources
Grails resources
Colin Harrington
 
Summit2014 topic 0066 - 10 enhancements that require 10 lines of code
Summit2014 topic 0066 - 10 enhancements that require 10 lines of codeSummit2014 topic 0066 - 10 enhancements that require 10 lines of code
Summit2014 topic 0066 - 10 enhancements that require 10 lines of code
Angel Borroy López
 
2014 database - course 3 - PHP and MySQL
2014 database - course 3 - PHP and MySQL2014 database - course 3 - PHP and MySQL
2014 database - course 3 - PHP and MySQLHung-yu Lin
 
Zend
ZendZend
ZendMohamed Ramadan
 
Jsp Notes
Jsp NotesJsp Notes
Jsp Notes
Rajiv Gupta
 
Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...
Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...
Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...
IT Event
 
Django
DjangoDjango
DjangoMohamed Ramadan
 
Drupal Javascript for developers
Drupal Javascript for developersDrupal Javascript for developers
Drupal Javascript for developers
Dream Production AG
 
Django at the Disco
Django at the DiscoDjango at the Disco
Django at the Disco
Richard Leland
 
Enjoy the vue.js
Enjoy the vue.jsEnjoy the vue.js
Enjoy the vue.js
TechExeter
 
Desenvolvimento web com Ruby on Rails (parte 2)
Desenvolvimento web com Ruby on Rails (parte 2)Desenvolvimento web com Ruby on Rails (parte 2)
Desenvolvimento web com Ruby on Rails (parte 2)Joao Lucas Santana
 

More Related Content

What's hot

Progressive Downloads and Rendering
Progressive Downloads and RenderingProgressive Downloads and Rendering
Progressive Downloads and Rendering
Stoyan Stefanov
 
How to make a WordPress theme
How to make a WordPress themeHow to make a WordPress theme
How to make a WordPress theme
Hardeep Asrani
 
E2 appspresso hands on lab
E2 appspresso hands on labE2 appspresso hands on lab
E2 appspresso hands on labNAVER D2
 
Drupal as a web framework
Drupal as a web frameworkDrupal as a web framework
Drupal as a web framework
Adam Kalsey
 
Presentation
PresentationPresentation
Presentation
Manav Prasad
 
Html5 For Jjugccc2009fall
Html5 For Jjugccc2009fallHtml5 For Jjugccc2009fall
Html5 For Jjugccc2009fall
Shumpei Shiraishi
 
Php frameworks
Php frameworksPhp frameworks
Php frameworks
Anil Kumar Panigrahi
 
True Dreams Furniture
True Dreams FurnitureTrue Dreams Furniture
True Dreams Furniture
SimranGaur3
 
Make More Money With Advanced Custom Fields - WordCampYYC 2015
Make More Money With Advanced Custom Fields - WordCampYYC 2015Make More Money With Advanced Custom Fields - WordCampYYC 2015
Make More Money With Advanced Custom Fields - WordCampYYC 2015
buildstudio
 
Grails resources
Grails resourcesGrails resources
Grails resources
Colin Harrington
 
Summit2014 topic 0066 - 10 enhancements that require 10 lines of code
Summit2014 topic 0066 - 10 enhancements that require 10 lines of codeSummit2014 topic 0066 - 10 enhancements that require 10 lines of code
Summit2014 topic 0066 - 10 enhancements that require 10 lines of code
Angel Borroy López
 
2014 database - course 3 - PHP and MySQL
2014 database - course 3 - PHP and MySQL2014 database - course 3 - PHP and MySQL
2014 database - course 3 - PHP and MySQLHung-yu Lin
 
Jsp Notes
Jsp NotesJsp Notes
Jsp Notes
Rajiv Gupta
 
Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...
Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...
Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...
IT Event
 
Drupal Javascript for developers
Drupal Javascript for developersDrupal Javascript for developers
Drupal Javascript for developers
Dream Production AG
 
Django at the Disco
Django at the DiscoDjango at the Disco
Django at the Disco
Richard Leland
 

What's hot (20)

Progressive Downloads and Rendering
Progressive Downloads and RenderingProgressive Downloads and Rendering
Progressive Downloads and Rendering
 
How to make a WordPress theme
How to make a WordPress themeHow to make a WordPress theme
How to make a WordPress theme
 
E2 appspresso hands on lab
E2 appspresso hands on labE2 appspresso hands on lab
E2 appspresso hands on lab
 
Drupal as a web framework
Drupal as a web frameworkDrupal as a web framework
Drupal as a web framework
 
Presentation
PresentationPresentation
Presentation
 
Jsp
JspJsp
Jsp
 
Html5 For Jjugccc2009fall
Html5 For Jjugccc2009fallHtml5 For Jjugccc2009fall
Html5 For Jjugccc2009fall
 
Php frameworks
Php frameworksPhp frameworks
Php frameworks
 
The Devil and HTML5
The Devil and HTML5The Devil and HTML5
The Devil and HTML5
 
True Dreams Furniture
True Dreams FurnitureTrue Dreams Furniture
True Dreams Furniture
 
Make More Money With Advanced Custom Fields - WordCampYYC 2015
Make More Money With Advanced Custom Fields - WordCampYYC 2015Make More Money With Advanced Custom Fields - WordCampYYC 2015
Make More Money With Advanced Custom Fields - WordCampYYC 2015
 
Grails resources
Grails resourcesGrails resources
Grails resources
 
Summit2014 topic 0066 - 10 enhancements that require 10 lines of code
Summit2014 topic 0066 - 10 enhancements that require 10 lines of codeSummit2014 topic 0066 - 10 enhancements that require 10 lines of code
Summit2014 topic 0066 - 10 enhancements that require 10 lines of code
 
2014 database - course 3 - PHP and MySQL
2014 database - course 3 - PHP and MySQL2014 database - course 3 - PHP and MySQL
2014 database - course 3 - PHP and MySQL
 
Zend
ZendZend
Zend
 
Jsp Notes
Jsp NotesJsp Notes
Jsp Notes
 
Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...
Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...
Oleh Zasadnyy "Progressive Web Apps: line between web and native apps become ...
 
Django
DjangoDjango
Django
 
Drupal Javascript for developers
Drupal Javascript for developersDrupal Javascript for developers
Drupal Javascript for developers
 
Django at the Disco
Django at the DiscoDjango at the Disco
Django at the Disco
 

Similar to 20190118_NetadashiMeetup#8_React2019

Enjoy the vue.js
Enjoy the vue.jsEnjoy the vue.js
Enjoy the vue.js
TechExeter
 
Desenvolvimento web com Ruby on Rails (parte 2)
Desenvolvimento web com Ruby on Rails (parte 2)Desenvolvimento web com Ruby on Rails (parte 2)
Desenvolvimento web com Ruby on Rails (parte 2)Joao Lucas Santana
 
Node.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash CourseNode.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash Course
Aaron Silverman
 
Building iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoBuilding iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" Domino
Rob Bontekoe
 
Resource registries plone conf 2014
Resource registries plone conf 2014Resource registries plone conf 2014
Resource registries plone conf 2014
Ramon Navarro
 
Django Rest Framework and React and Redux, Oh My!
Django Rest Framework and React and Redux, Oh My!Django Rest Framework and React and Redux, Oh My!
Django Rest Framework and React and Redux, Oh My!
Eric Palakovich Carr
 
Resource Registries: Plone Conference 2014
Resource Registries: Plone Conference 2014Resource Registries: Plone Conference 2014
Resource Registries: Plone Conference 2014
Rob Gietema
 
Responsive Design: Mehr als CSS
Responsive Design: Mehr als CSSResponsive Design: Mehr als CSS
Responsive Design: Mehr als CSS
Walter Ebert
 
HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2James Pearce
 
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
crokitta
 
CSS framework By Palash
CSS framework By PalashCSS framework By Palash
CSS framework By Palash
PalashBajpai
 
Desenvolvimento web com jQuery Mobile
Desenvolvimento web com jQuery MobileDesenvolvimento web com jQuery Mobile
Desenvolvimento web com jQuery Mobile
Pablo Garrido
 
Bootstrap
BootstrapBootstrap
Bootstrap
Sarvesh Kushwaha
 
The new static resources framework
The new static resources frameworkThe new static resources framework
The new static resources framework
marcplmer
 
Introduction to Html5
Introduction to Html5Introduction to Html5
Introduction to Html5
www.netgains.org
 
JavaServer Pages
JavaServer Pages JavaServer Pages
JavaServer Pages
profbnk
 

Similar to 20190118_NetadashiMeetup#8_React2019 (20)

Enjoy the vue.js
Enjoy the vue.jsEnjoy the vue.js
Enjoy the vue.js
 
Desenvolvimento web com Ruby on Rails (parte 2)
Desenvolvimento web com Ruby on Rails (parte 2)Desenvolvimento web com Ruby on Rails (parte 2)
Desenvolvimento web com Ruby on Rails (parte 2)
 
WebAPI Odata Knockout
WebAPI Odata KnockoutWebAPI Odata Knockout
WebAPI Odata Knockout
 
Node.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash CourseNode.js & Twitter Bootstrap Crash Course
Node.js & Twitter Bootstrap Crash Course
 
smoke1272528461
smoke1272528461smoke1272528461
smoke1272528461
 
Building iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" DominoBuilding iPhone Web Apps using "classic" Domino
Building iPhone Web Apps using "classic" Domino
 
Resource registries plone conf 2014
Resource registries plone conf 2014Resource registries plone conf 2014
Resource registries plone conf 2014
 
Django Rest Framework and React and Redux, Oh My!
Django Rest Framework and React and Redux, Oh My!Django Rest Framework and React and Redux, Oh My!
Django Rest Framework and React and Redux, Oh My!
 
Resource Registries: Plone Conference 2014
Resource Registries: Plone Conference 2014Resource Registries: Plone Conference 2014
Resource Registries: Plone Conference 2014
 
Responsive Design: Mehr als CSS
Responsive Design: Mehr als CSSResponsive Design: Mehr als CSS
Responsive Design: Mehr als CSS
 
HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2HTML5 and the dawn of rich mobile web applications pt 2
HTML5 and the dawn of rich mobile web applications pt 2
 
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
Oracle Application Express & jQuery Mobile - OGh Apex Dag 2012
 
Frfrfrf
FrfrfrfFrfrfrf
Frfrfrf
 
CSS framework By Palash
CSS framework By PalashCSS framework By Palash
CSS framework By Palash
 
Desenvolvimento web com jQuery Mobile
Desenvolvimento web com jQuery MobileDesenvolvimento web com jQuery Mobile
Desenvolvimento web com jQuery Mobile
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
The new static resources framework
The new static resources frameworkThe new static resources framework
The new static resources framework
 
Practica n° 7
Practica n° 7Practica n° 7
Practica n° 7
 
Introduction to Html5
Introduction to Html5Introduction to Html5
Introduction to Html5
 
JavaServer Pages
JavaServer Pages JavaServer Pages
JavaServer Pages
 

More from Makoto Mori

20240227 完全に理解した LT 「mise いいよ mise」 / morishin
20240227 完全に理解した LT 「mise いいよ mise」 / morishin20240227 完全に理解した LT 「mise いいよ mise」 / morishin
20240227 完全に理解した LT 「mise いいよ mise」 / morishin
Makoto Mori
 
エンジニアの気持ちを完全に理解してくれている Cypress Cloud
エンジニアの気持ちを完全に理解してくれている Cypress Cloudエンジニアの気持ちを完全に理解してくれている Cypress Cloud
エンジニアの気持ちを完全に理解してくれている Cypress Cloud
Makoto Mori
 
20230228 React Tech Night TOKYO #3
20230228 React Tech Night TOKYO #320230228 React Tech Night TOKYO #3
20230228 React Tech Night TOKYO #3
Makoto Mori
 
20190623_SPAJAM2019_Sendai
20190623_SPAJAM2019_Sendai20190623_SPAJAM2019_Sendai
20190623_SPAJAM2019_Sendai
Makoto Mori
 
20180908_OSSDevCamp2018
20180908_OSSDevCamp201820180908_OSSDevCamp2018
20180908_OSSDevCamp2018
Makoto Mori
 
20170417_Netadashi_KubeCon
20170417_Netadashi_KubeCon20170417_Netadashi_KubeCon
20170417_Netadashi_KubeCon
Makoto Mori
 
20171004_CEATEC2017_DesignThinking
20171004_CEATEC2017_DesignThinking20171004_CEATEC2017_DesignThinking
20171004_CEATEC2017_DesignThinking
Makoto Mori
 

More from Makoto Mori (7)

20240227 完全に理解した LT 「mise いいよ mise」 / morishin
20240227 完全に理解した LT 「mise いいよ mise」 / morishin20240227 完全に理解した LT 「mise いいよ mise」 / morishin
20240227 完全に理解した LT 「mise いいよ mise」 / morishin
 
エンジニアの気持ちを完全に理解してくれている Cypress Cloud
エンジニアの気持ちを完全に理解してくれている Cypress Cloudエンジニアの気持ちを完全に理解してくれている Cypress Cloud
エンジニアの気持ちを完全に理解してくれている Cypress Cloud
 
20230228 React Tech Night TOKYO #3
20230228 React Tech Night TOKYO #320230228 React Tech Night TOKYO #3
20230228 React Tech Night TOKYO #3
 
20190623_SPAJAM2019_Sendai
20190623_SPAJAM2019_Sendai20190623_SPAJAM2019_Sendai
20190623_SPAJAM2019_Sendai
 
20180908_OSSDevCamp2018
20180908_OSSDevCamp201820180908_OSSDevCamp2018
20180908_OSSDevCamp2018
 
20170417_Netadashi_KubeCon
20170417_Netadashi_KubeCon20170417_Netadashi_KubeCon
20170417_Netadashi_KubeCon
 
20171004_CEATEC2017_DesignThinking
20171004_CEATEC2017_DesignThinking20171004_CEATEC2017_DesignThinking
20171004_CEATEC2017_DesignThinking
 

Recently uploaded

Pile Foundation by Venkatesh Taduvai (Sub Geotechnical Engineering II)-conver...
Pile Foundation by Venkatesh Taduvai (Sub Geotechnical Engineering II)-conver...Pile Foundation by Venkatesh Taduvai (Sub Geotechnical Engineering II)-conver...
Pile Foundation by Venkatesh Taduvai (Sub Geotechnical Engineering II)-conver...
AJAYKUMARPUND1
 
Student information management system project report ii.pdf
Student information management system project report ii.pdfStudent information management system project report ii.pdf
Student information management system project report ii.pdf
Kamal Acharya
 
Vaccine management system project report documentation..pdf
Vaccine management system project report documentation..pdfVaccine management system project report documentation..pdf
Vaccine management system project report documentation..pdf
Kamal Acharya
 
Courier management system project report.pdf
Courier management system project report.pdfCourier management system project report.pdf
Courier management system project report.pdf
Kamal Acharya
 
MCQ Soil mechanics questions (Soil shear strength).pdf
MCQ Soil mechanics questions (Soil shear strength).pdfMCQ Soil mechanics questions (Soil shear strength).pdf
MCQ Soil mechanics questions (Soil shear strength).pdf
Osamah Alsalih
 
Design and Analysis of Algorithms-DP,Backtracking,Graphs,B&B
Design and Analysis of Algorithms-DP,Backtracking,Graphs,B&BDesign and Analysis of Algorithms-DP,Backtracking,Graphs,B&B
Design and Analysis of Algorithms-DP,Backtracking,Graphs,B&B
Sreedhar Chowdam
 
Nuclear Power Economics and Structuring 2024
Nuclear Power Economics and Structuring 2024Nuclear Power Economics and Structuring 2024
Nuclear Power Economics and Structuring 2024
Massimo Talia
 
addressing modes in computer architecture
addressing modes in computer architectureaddressing modes in computer architecture
addressing modes in computer architecture
ShahidSultan24
 
Event Management System Vb Net Project Report.pdf
Event Management System Vb Net Project Report.pdfEvent Management System Vb Net Project Report.pdf
Event Management System Vb Net Project Report.pdf
Kamal Acharya
 
CME397 Surface Engineering- Professional Elective
CME397 Surface Engineering- Professional ElectiveCME397 Surface Engineering- Professional Elective
CME397 Surface Engineering- Professional Elective
karthi keyan
 
Immunizing Image Classifiers Against Localized Adversary Attacks
Immunizing Image Classifiers Against Localized Adversary AttacksImmunizing Image Classifiers Against Localized Adversary Attacks
Immunizing Image Classifiers Against Localized Adversary Attacks
gerogepatton
 
Gen AI Study Jams _ For the GDSC Leads in India.pdf
Gen AI Study Jams _ For the GDSC Leads in India.pdfGen AI Study Jams _ For the GDSC Leads in India.pdf
Gen AI Study Jams _ For the GDSC Leads in India.pdf
gdsczhcet
 
Halogenation process of chemical process industries
Halogenation process of chemical process industriesHalogenation process of chemical process industries
Halogenation process of chemical process industries
MuhammadTufail242431
 
AKS UNIVERSITY Satna Final Year Project By OM Hardaha.pdf
AKS UNIVERSITY Satna Final Year Project By OM Hardaha.pdfAKS UNIVERSITY Satna Final Year Project By OM Hardaha.pdf
AKS UNIVERSITY Satna Final Year Project By OM Hardaha.pdf
SamSarthak3
 
ethical hacking in wireless-hacking1.ppt
ethical hacking in wireless-hacking1.pptethical hacking in wireless-hacking1.ppt
ethical hacking in wireless-hacking1.ppt
Jayaprasanna4
 
Automobile Management System Project Report.pdf
Automobile Management System Project Report.pdfAutomobile Management System Project Report.pdf
Automobile Management System Project Report.pdf
Kamal Acharya
 
Standard Reomte Control Interface - Neometrix
Standard Reomte Control Interface - NeometrixStandard Reomte Control Interface - Neometrix
Standard Reomte Control Interface - Neometrix
Neometrix_Engineering_Pvt_Ltd
 
TECHNICAL TRAINING MANUAL GENERAL FAMILIARIZATION COURSE
TECHNICAL TRAINING MANUAL GENERAL FAMILIARIZATION COURSETECHNICAL TRAINING MANUAL GENERAL FAMILIARIZATION COURSE
TECHNICAL TRAINING MANUAL GENERAL FAMILIARIZATION COURSE
DuvanRamosGarzon1
 
Democratizing Fuzzing at Scale by Abhishek Arya
Democratizing Fuzzing at Scale by Abhishek AryaDemocratizing Fuzzing at Scale by Abhishek Arya
Democratizing Fuzzing at Scale by Abhishek Arya
abh.arya
 
LIGA(E)11111111111111111111111111111111111111111.ppt
LIGA(E)11111111111111111111111111111111111111111.pptLIGA(E)11111111111111111111111111111111111111111.ppt
LIGA(E)11111111111111111111111111111111111111111.ppt
ssuser9bd3ba
 

Recently uploaded (20)

Pile Foundation by Venkatesh Taduvai (Sub Geotechnical Engineering II)-conver...
Pile Foundation by Venkatesh Taduvai (Sub Geotechnical Engineering II)-conver...Pile Foundation by Venkatesh Taduvai (Sub Geotechnical Engineering II)-conver...
Pile Foundation by Venkatesh Taduvai (Sub Geotechnical Engineering II)-conver...
 
Student information management system project report ii.pdf
Student information management system project report ii.pdfStudent information management system project report ii.pdf
Student information management system project report ii.pdf
 
Vaccine management system project report documentation..pdf
Vaccine management system project report documentation..pdfVaccine management system project report documentation..pdf
Vaccine management system project report documentation..pdf
 
Courier management system project report.pdf
Courier management system project report.pdfCourier management system project report.pdf
Courier management system project report.pdf
 
MCQ Soil mechanics questions (Soil shear strength).pdf
MCQ Soil mechanics questions (Soil shear strength).pdfMCQ Soil mechanics questions (Soil shear strength).pdf
MCQ Soil mechanics questions (Soil shear strength).pdf
 
Design and Analysis of Algorithms-DP,Backtracking,Graphs,B&B
Design and Analysis of Algorithms-DP,Backtracking,Graphs,B&BDesign and Analysis of Algorithms-DP,Backtracking,Graphs,B&B
Design and Analysis of Algorithms-DP,Backtracking,Graphs,B&B
 
Nuclear Power Economics and Structuring 2024
Nuclear Power Economics and Structuring 2024Nuclear Power Economics and Structuring 2024
Nuclear Power Economics and Structuring 2024
 
addressing modes in computer architecture
addressing modes in computer architectureaddressing modes in computer architecture
addressing modes in computer architecture
 
Event Management System Vb Net Project Report.pdf
Event Management System Vb Net Project Report.pdfEvent Management System Vb Net Project Report.pdf
Event Management System Vb Net Project Report.pdf
 
CME397 Surface Engineering- Professional Elective
CME397 Surface Engineering- Professional ElectiveCME397 Surface Engineering- Professional Elective
CME397 Surface Engineering- Professional Elective
 
Immunizing Image Classifiers Against Localized Adversary Attacks
Immunizing Image Classifiers Against Localized Adversary AttacksImmunizing Image Classifiers Against Localized Adversary Attacks
Immunizing Image Classifiers Against Localized Adversary Attacks
 
Gen AI Study Jams _ For the GDSC Leads in India.pdf
Gen AI Study Jams _ For the GDSC Leads in India.pdfGen AI Study Jams _ For the GDSC Leads in India.pdf
Gen AI Study Jams _ For the GDSC Leads in India.pdf
 
Halogenation process of chemical process industries
Halogenation process of chemical process industriesHalogenation process of chemical process industries
Halogenation process of chemical process industries
 
AKS UNIVERSITY Satna Final Year Project By OM Hardaha.pdf
AKS UNIVERSITY Satna Final Year Project By OM Hardaha.pdfAKS UNIVERSITY Satna Final Year Project By OM Hardaha.pdf
AKS UNIVERSITY Satna Final Year Project By OM Hardaha.pdf
 
ethical hacking in wireless-hacking1.ppt
ethical hacking in wireless-hacking1.pptethical hacking in wireless-hacking1.ppt
ethical hacking in wireless-hacking1.ppt
 
Automobile Management System Project Report.pdf
Automobile Management System Project Report.pdfAutomobile Management System Project Report.pdf
Automobile Management System Project Report.pdf
 
Standard Reomte Control Interface - Neometrix
Standard Reomte Control Interface - NeometrixStandard Reomte Control Interface - Neometrix
Standard Reomte Control Interface - Neometrix
 
TECHNICAL TRAINING MANUAL GENERAL FAMILIARIZATION COURSE
TECHNICAL TRAINING MANUAL GENERAL FAMILIARIZATION COURSETECHNICAL TRAINING MANUAL GENERAL FAMILIARIZATION COURSE
TECHNICAL TRAINING MANUAL GENERAL FAMILIARIZATION COURSE
 
Democratizing Fuzzing at Scale by Abhishek Arya
Democratizing Fuzzing at Scale by Abhishek AryaDemocratizing Fuzzing at Scale by Abhishek Arya
Democratizing Fuzzing at Scale by Abhishek Arya
 
LIGA(E)11111111111111111111111111111111111111111.ppt
LIGA(E)11111111111111111111111111111111111111111.pptLIGA(E)11111111111111111111111111111111111111111.ppt
LIGA(E)11111111111111111111111111111111111111111.ppt
 

20190118_NetadashiMeetup#8_React2019

  • 1.
  • 4.
  • 5.
  • 8. $ yarn init [-y]   work package.json
  • 9. $ yarn add react react-dom       work node_modules package.json yarn.lock
  • 11. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Netadashi</title> </head> <body> <article id="root">Hello</article> </body> </html> work node_modules public index.html package.json yarn.lock
  • 12. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Netadashi</title> </head> <body> <article id="root">Hello</article> </body> </html> work node_modules public index.html package.json yarn.lock
  • 14. import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render( <h1>World</h1>, document.querySelector('#root') ); work node_modules public index.html package.json yarn.lock src index.jsx
  • 15. $ yarn add webpack webpack-cli       work node_modules public index.html package.json yarn.lock src index.jsx
  • 16. const path = require('path'); module.exports = { entry: path.join(__dirname, 'src', 'index.jsx'), output: { filename: 'bundle.js', path: path.join(__dirname, 'public', 'assets', 'js') } }; work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock
  • 17. $ webpack [--mode development] ERROR in C:/Netadashi/work/src/index.jsx 5:2 Module parse failed: Unexpected token (5:2) You may need an appropriate loader to handle this file type. | | ReactDOM.render( > <h1>World</h1>, | document.querySelector('#root') | ); error An unexpected error occurred: "Command failed.… work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock
  • 18. $ yarn add @babel/core @babel/preset-react babel-loader         work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock
  • 19. const path = require('path'); module.exports = { entry: path.join(__dirname, 'src', 'index.jsx'), output: { filename: 'bundle.js', path: path.join(__dirname, 'public', 'assets', 'js') }, module: { rules: [ { test: /¥.js[x]?$/, exclude: /node_modules/, use: { loader: 'babel-loader' } } ] } }; work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock
  • 20. $ yarn add webpack-dev-server    work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock
  • 21. ... module: { rules: [ { test: /¥.js[x]?$/, exclude: /node_modules/, use: { loader: 'babel-loader' } } ] }, devServer: { contentBase: path.join(__dirname, 'public') } }; work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock
  • 22. ... "dependencies": { "@babel/core": "^7.2.2", "@babel/preset-env": "^7.2.3", "@babel/preset-react": "^7.0.0", "babel-loader": "^8.0.5", "react": "^16.7.0", "react-dom": "^16.7.0", "webpack": "^4.28.4", "webpack-cli": "^3.2.1", "webpack-dev-server": "^3.1.14" }, "scripts": { "dev": "webpack --mode development", "start": "webpack-dev-server --mode development" } } work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock
  • 23. $ yarn [run] dev [--watch]  work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js bundle.js
  • 24. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>Netadashi</title> </head> <body> <article id="root">Hello</article> <script src="/assets/js/bundle.js"></script> </body> </html> work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js bundle.js
  • 25. $ yarn [run] start   
  • 26. $ yarn [run] start   
  • 28.
  • 29. $ yarn add @material-ui/core  work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js bundle.js
  • 30. import React from 'react'; import ReactDOM from 'react-dom'; const App = () => { return ( <> <h1>World</h1> </> ); }; ReactDOM.render( <App />, document.querySelector('#root') ); work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js bundle.js
  • 31. import React from 'react'; import ReactDOM from 'react-dom'; import { Button, Typography } from '@material-ui/core'; const App = () => { return ( <> <Typography variant="h6">Neta</Typography> <Button variant="contained" color="primary">Dashi</Button> </> ); }; ReactDOM.render( <App />, document.querySelector('#root') ); work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js bundle.js
  • 34. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="/assets/css/master.css"> <title>Netadashi</title> </head> <body> <article id="root">Loading...</article> <script src="/assets/js/bundle.js"></script> </body> </html> work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js bundle.js css master.css
  • 35. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="/assets/css/master.css"> <title>Netadashi</title> </head> <body> <article id="root">Loading...</article> <script src="/assets/js/bundle.js"></script> </body> </html> work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js bundle.js css master.css
  • 36.
  • 37.
  • 38.
  • 39.
  • 40. ... const App = () => { return ( <> <Typography variant="h6">Neta</Typography> <section style={{ background: 'url(https://source.unsplash.com/random/500x500) center / cover', height: '80vw', width: '80vw' }} /> <Button variant="contained" color="primary" onClick={() => { location.reload(); }} > Dashi </Button> </> ); }; ... work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js bundle.js css master.css
  • 41. ... const App = () => { return ( <> <Typography variant="h6">Neta</Typography> <section style={{ background: 'url(https://source.unsplash.com/random/500x500) center / cover', height: '80vw', width: '80vw' }} /> <Button variant="contained" color="primary" onClick={() => { location.reload(); }} > Dashi </Button> </> ); }; ... work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js bundle.js css master.css
  • 42. import React from 'react'; import ReactDOM from 'react-dom'; import { AppBar, Button, Toolbar, Typography } from '@material-ui/core'; const App = () => { return ( <> <AppBar position="static"> <Toolbar> <Typography variant="h6" color="inherit">Neta</Typography> </Toolbar> </AppBar> ... work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js bundle.js css master.css
  • 43. import React from 'react'; import ReactDOM from 'react-dom'; import { AppBar, Button, Toolbar, Typography } from '@material-ui/core'; const App = () => { return ( <> <AppBar position="static"> <Toolbar> <Typography variant="h6" color="inherit">Neta</Typography> </Toolbar> </AppBar> ... work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js bundle.js css master.css
  • 45. import React from 'react'; import { AppBar, Toolbar, Typography } from '@material-ui/core'; const Header = () => { return ( <> <AppBar position="static"> <Toolbar> <Typography variant="h6" color="inherit">Neta</Typography> </Toolbar> </AppBar> </> ); }; export default Header; work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js css components Header.jsx
  • 46. ... import { Button } from '@material-ui/core'; import Header from './components/Header.jsx'; const App = () => { return ( <> <Header /> <section style={{ background: 'url(https:// source.unsplash.com/random/500x500) center / cover', height: '80vw', width: '80vw' }} /> ... work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js css components Header.jsx
  • 47. ... import { Button, Grid } from '@material-ui/core'; import Header from './components/Header.jsx'; const App = () => { return ( <> <Header /> <Grid container alignItems="center" justify="center"> <Grid style={{ padding: 24 }}> <section style={{ background: 'url(https://source.unsplash.com/random/500x500) center / cover', height: '80vw', width: '80vw', border: 'solid 3vw #fff', boxShadow: '0 1vw 3vw #999' }} /> </Grid> </Grid> ... work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js css components Header.jsx
  • 48. ... import { Button, Grid } from '@material-ui/core'; import Header from './components/Header.jsx'; const App = () => { return ( <> <Header /> <Grid container alignItems="center" justify="center"> <Grid style={{ padding: 24 }}> <section style={{ background: 'url(https://source.unsplash.com/random/500x500) center / cover', height: '80vw', width: '80vw', border: 'solid 3vw #fff', boxShadow: '0 1vw 3vw #999' }} /> </Grid> </Grid> ... work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js css components Header.jsx
  • 49. import React from 'react'; import { AppBar, Toolbar, Typography } from '@material-ui/core'; const Header = () => { return ( <> <AppBar position="static"> <Toolbar> <Typography variant="h6" color="inherit">Neta/Dash</Typography> </Toolbar> </AppBar> </> ); }; export default Header; work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js css components Header.jsx
  • 50. ... import { Fab, Grid, Icon } from '@material-ui/core'; import Header from './components/Header.jsx'; const App = () => { return ( <> <Header /> <Grid container alignItems="center" justify="center"> ... </Grid> <section style={{ position: 'fixed', right: '6vw', bottom: '6vw' }}> <Fab color="secondary" onClick={() => { location.reload(); }}> <Icon fontSize="large">directions_run</Icon> </Fab> </section> ... work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js css components Header.jsx
  • 51. ... import { Fab, Grid, Icon } from '@material-ui/core'; import Header from './components/Header.jsx'; const App = () => { return ( <> <Header /> <Grid container alignItems="center" justify="center"> ... </Grid> <section style={{ position: 'fixed', right: '6vw', bottom: '6vw' }}> <Fab color="secondary" onClick={() => { location.reload(); }}> <Icon fontSize="large">directions_run</Icon> </Fab> </section> ... work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js css components Header.jsx
  • 52. $ yarn global add now    work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js css components Header.jsx
  • 53. { "name": "work", "version": "1.0.0", "main": "index.js", "license": "MIT", "dependencies": { "@babel/core": "^7.2.2", "@babel/preset-react": "^7.0.0", "@material-ui/core": "^3.9.0", "babel-loader": "^8.0.5", "react": "^16.7.0", "react-dom": "^16.7.0", "webpack": "^4.28.4", "webpack-cli": "^3.2.1", "webpack-dev-server": "^3.1.14" }, "scripts": { "dev": "webpack --mode development", "build": "webpack --mode production", "start": "webpack-dev-server --mode development" } } work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js css components Header.jsx
  • 54. $ yarn [run] build  work node_modules public index.html package.json webpack.config.js src index.jsx yarn.lock assets js css components Header.jsx
  • 56.