SlideShare uma empresa Scribd 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.

Engenharia
1 de 59
Baixar para ler 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

Recomendados

Articulo java web
Articulo java webArticulo java web
Articulo java web
I.S.T. Santo Domingo
 
Google
GoogleGoogle
Google
soon
 
Deploying
DeployingDeploying
Deploying
soon
 
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 globe
raveenashrynayr03
 
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 Pettersen
Atlassian
 
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
 

Recomendados

Articulo java web
Articulo java webArticulo java web
Articulo java web
I.S.T. Santo Domingo
 
Google
GoogleGoogle
Google
soon
 
Deploying
DeployingDeploying
Deploying
soon
 
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 globe
raveenashrynayr03
 
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 Pettersen
Atlassian
 
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 lab
NAVER 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 HTML5
Myles 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 MySQL
Hung-yu Lin
 
Zend
ZendZend
Zend
Mohamed 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
Django
Mohamed 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
 

Mais conteúdo relacionado

Mais procurados

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 lab
NAVER 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 HTML5
Myles 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 MySQL
Hung-yu Lin
 
Zend
ZendZend
Zend
Mohamed 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
Django
Mohamed 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
 

Mais procurados (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
 

Semelhante a 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
 
WebAPI Odata Knockout
WebAPI Odata KnockoutWebAPI Odata Knockout
WebAPI Odata Knockout
Sudeep Mukherjee
 
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
 
smoke1272528461
smoke1272528461smoke1272528461
smoke1272528461
mxsmoketest
 
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 2
James 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
 
Frfrfrf
FrfrfrfFrfrfrf
Frfrfrf
Nelinho Pereira
 
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
 
Practica n° 7
Practica n° 7Practica n° 7
Practica n° 7
rafobarrientos
 
Introduction to Html5
Introduction to Html5Introduction to Html5
Introduction to Html5
www.netgains.org
 
JavaServer Pages
JavaServer Pages JavaServer Pages
JavaServer Pages
profbnk
 

Semelhante a 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
 

Mais de 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
 

Mais de 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
 

Último

Software Engineering and Project Management - Introduction, Modeling Concepts...
Software Engineering and Project Management - Introduction, Modeling Concepts...Software Engineering and Project Management - Introduction, Modeling Concepts...
Software Engineering and Project Management - Introduction, Modeling Concepts...
Prakhyath Rai
 
Bayesian Decision Theory details ML.pptx
Bayesian Decision Theory details ML.pptxBayesian Decision Theory details ML.pptx
Bayesian Decision Theory details ML.pptx
amrita chaturvedi
 
UNIT 4 LINEAR INTEGRATED CIRCUITS-DIGITAL ICS
UNIT 4 LINEAR INTEGRATED CIRCUITS-DIGITAL ICSUNIT 4 LINEAR INTEGRATED CIRCUITS-DIGITAL ICS
UNIT 4 LINEAR INTEGRATED CIRCUITS-DIGITAL ICS
vmspraneeth
 
An Introduction to the Compiler Designss
An Introduction to the Compiler DesignssAn Introduction to the Compiler Designss
An Introduction to the Compiler Designss
ElakkiaU
 
Object Oriented Analysis and Design - OOAD
Object Oriented Analysis and Design - OOADObject Oriented Analysis and Design - OOAD
Object Oriented Analysis and Design - OOAD
PreethaV16
 
一比一原版(爱大毕业证书)爱荷华大学毕业证如何办理
一比一原版(爱大毕业证书)爱荷华大学毕业证如何办理一比一原版(爱大毕业证书)爱荷华大学毕业证如何办理
一比一原版(爱大毕业证书)爱荷华大学毕业证如何办理
nedcocy
 
Gas agency management system project report.pdf
Gas agency management system project report.pdfGas agency management system project report.pdf
Gas agency management system project report.pdf
Kamal Acharya
 
smart pill dispenser is designed to improve medication adherence and safety f...
smart pill dispenser is designed to improve medication adherence and safety f...smart pill dispenser is designed to improve medication adherence and safety f...
smart pill dispenser is designed to improve medication adherence and safety f...
um7474492
 
SCALING OF MOS CIRCUITS m .pptx
SCALING OF MOS CIRCUITS m .pptxSCALING OF MOS CIRCUITS m .pptx
SCALING OF MOS CIRCUITS m .pptx
harshapolam10
 
Pressure Relief valve used in flow line to release the over pressure at our d...
Pressure Relief valve used in flow line to release the over pressure at our d...Pressure Relief valve used in flow line to release the over pressure at our d...
Pressure Relief valve used in flow line to release the over pressure at our d...
cannyengineerings
 
Data Driven Maintenance | UReason Webinar
Data Driven Maintenance | UReason WebinarData Driven Maintenance | UReason Webinar
Data Driven Maintenance | UReason Webinar
UReason
 
Introduction to Computer Networks & OSI MODEL.ppt
Introduction to Computer Networks & OSI MODEL.pptIntroduction to Computer Networks & OSI MODEL.ppt
Introduction to Computer Networks & OSI MODEL.ppt
Dwarkadas J Sanghvi College of Engineering
 
4. Mosca vol I -Fisica-Tipler-5ta-Edicion-Vol-1.pdf
4. Mosca vol I -Fisica-Tipler-5ta-Edicion-Vol-1.pdf4. Mosca vol I -Fisica-Tipler-5ta-Edicion-Vol-1.pdf
4. Mosca vol I -Fisica-Tipler-5ta-Edicion-Vol-1.pdf
Gino153088
 
AI + Data Community Tour - Build the Next Generation of Apps with the Einstei...
AI + Data Community Tour - Build the Next Generation of Apps with the Einstei...AI + Data Community Tour - Build the Next Generation of Apps with the Einstei...
AI + Data Community Tour - Build the Next Generation of Apps with the Einstei...
Paris Salesforce Developer Group
 
Software Engineering and Project Management - Software Testing + Agile Method...
Software Engineering and Project Management - Software Testing + Agile Method...Software Engineering and Project Management - Software Testing + Agile Method...
Software Engineering and Project Management - Software Testing + Agile Method...
Prakhyath Rai
 
Applications of artificial Intelligence in Mechanical Engineering.pdf
Applications of artificial Intelligence in Mechanical Engineering.pdfApplications of artificial Intelligence in Mechanical Engineering.pdf
Applications of artificial Intelligence in Mechanical Engineering.pdf
Atif Razi
 
5g-5G SA reg. -standalone-access-registration.pdf
5g-5G SA reg. -standalone-access-registration.pdf5g-5G SA reg. -standalone-access-registration.pdf
5g-5G SA reg. -standalone-access-registration.pdf
devtomar25
 
ITSM Integration with MuleSoft.pptx
ITSM Integration with MuleSoft.pptxITSM Integration with MuleSoft.pptx
ITSM Integration with MuleSoft.pptx
VANDANAMOHANGOUDA
 
一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理
uqyfuc
 
Optimizing Gradle Builds - Gradle DPE Tour Berlin 2024
Optimizing Gradle Builds - Gradle DPE Tour Berlin 2024Optimizing Gradle Builds - Gradle DPE Tour Berlin 2024
Optimizing Gradle Builds - Gradle DPE Tour Berlin 2024
Sinan KOZAK
 

Último (20)

Software Engineering and Project Management - Introduction, Modeling Concepts...
Software Engineering and Project Management - Introduction, Modeling Concepts...Software Engineering and Project Management - Introduction, Modeling Concepts...
Software Engineering and Project Management - Introduction, Modeling Concepts...
 
Bayesian Decision Theory details ML.pptx
Bayesian Decision Theory details ML.pptxBayesian Decision Theory details ML.pptx
Bayesian Decision Theory details ML.pptx
 
UNIT 4 LINEAR INTEGRATED CIRCUITS-DIGITAL ICS
UNIT 4 LINEAR INTEGRATED CIRCUITS-DIGITAL ICSUNIT 4 LINEAR INTEGRATED CIRCUITS-DIGITAL ICS
UNIT 4 LINEAR INTEGRATED CIRCUITS-DIGITAL ICS
 
An Introduction to the Compiler Designss
An Introduction to the Compiler DesignssAn Introduction to the Compiler Designss
An Introduction to the Compiler Designss
 
Object Oriented Analysis and Design - OOAD
Object Oriented Analysis and Design - OOADObject Oriented Analysis and Design - OOAD
Object Oriented Analysis and Design - OOAD
 
一比一原版(爱大毕业证书)爱荷华大学毕业证如何办理
一比一原版(爱大毕业证书)爱荷华大学毕业证如何办理一比一原版(爱大毕业证书)爱荷华大学毕业证如何办理
一比一原版(爱大毕业证书)爱荷华大学毕业证如何办理
 
Gas agency management system project report.pdf
Gas agency management system project report.pdfGas agency management system project report.pdf
Gas agency management system project report.pdf
 
smart pill dispenser is designed to improve medication adherence and safety f...
smart pill dispenser is designed to improve medication adherence and safety f...smart pill dispenser is designed to improve medication adherence and safety f...
smart pill dispenser is designed to improve medication adherence and safety f...
 
SCALING OF MOS CIRCUITS m .pptx
SCALING OF MOS CIRCUITS m .pptxSCALING OF MOS CIRCUITS m .pptx
SCALING OF MOS CIRCUITS m .pptx
 
Pressure Relief valve used in flow line to release the over pressure at our d...
Pressure Relief valve used in flow line to release the over pressure at our d...Pressure Relief valve used in flow line to release the over pressure at our d...
Pressure Relief valve used in flow line to release the over pressure at our d...
 
Data Driven Maintenance | UReason Webinar
Data Driven Maintenance | UReason WebinarData Driven Maintenance | UReason Webinar
Data Driven Maintenance | UReason Webinar
 
Introduction to Computer Networks & OSI MODEL.ppt
Introduction to Computer Networks & OSI MODEL.pptIntroduction to Computer Networks & OSI MODEL.ppt
Introduction to Computer Networks & OSI MODEL.ppt
 
4. Mosca vol I -Fisica-Tipler-5ta-Edicion-Vol-1.pdf
4. Mosca vol I -Fisica-Tipler-5ta-Edicion-Vol-1.pdf4. Mosca vol I -Fisica-Tipler-5ta-Edicion-Vol-1.pdf
4. Mosca vol I -Fisica-Tipler-5ta-Edicion-Vol-1.pdf
 
AI + Data Community Tour - Build the Next Generation of Apps with the Einstei...
AI + Data Community Tour - Build the Next Generation of Apps with the Einstei...AI + Data Community Tour - Build the Next Generation of Apps with the Einstei...
AI + Data Community Tour - Build the Next Generation of Apps with the Einstei...
 
Software Engineering and Project Management - Software Testing + Agile Method...
Software Engineering and Project Management - Software Testing + Agile Method...Software Engineering and Project Management - Software Testing + Agile Method...
Software Engineering and Project Management - Software Testing + Agile Method...
 
Applications of artificial Intelligence in Mechanical Engineering.pdf
Applications of artificial Intelligence in Mechanical Engineering.pdfApplications of artificial Intelligence in Mechanical Engineering.pdf
Applications of artificial Intelligence in Mechanical Engineering.pdf
 
5g-5G SA reg. -standalone-access-registration.pdf
5g-5G SA reg. -standalone-access-registration.pdf5g-5G SA reg. -standalone-access-registration.pdf
5g-5G SA reg. -standalone-access-registration.pdf
 
ITSM Integration with MuleSoft.pptx
ITSM Integration with MuleSoft.pptxITSM Integration with MuleSoft.pptx
ITSM Integration with MuleSoft.pptx
 
一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理一比一原版(USF毕业证)旧金山大学毕业证如何办理
一比一原版(USF毕业证)旧金山大学毕业证如何办理
 
Optimizing Gradle Builds - Gradle DPE Tour Berlin 2024
Optimizing Gradle Builds - Gradle DPE Tour Berlin 2024Optimizing Gradle Builds - Gradle DPE Tour Berlin 2024
Optimizing Gradle Builds - Gradle DPE Tour Berlin 2024
 

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.