20190118_NetadashiMeetup#8_React2019
•
0 likes•201 views
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.
Report
Share
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
Recommended for you
More Related Content
What's hot
What's hot (20)
Similar to 20190118_NetadashiMeetup#8_React2019
Similar to 20190118_NetadashiMeetup#8_React2019 (20)
More from Makoto Mori
Recently uploaded
Recently uploaded (20)
20190118_NetadashiMeetup#8_React2019
- 2.
- 3. もりしん #スマブラSP #人工知能 #React #ドラゴンボール #PWA #スタートアップ #仮想通貨 #Python
- 6.
- 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
- 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
- 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.
- 57.
- 58.