Build a React PWA with Material UI and Webpack

もりしん
#スマブラSP #人工知能
#React #ドラゴンボール
#PWA #スタートアップ
#仮想通貨 #Python

$ 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

$ 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>
</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 add @material-ui/core

work
node_modules
public
index.html
package.json
webpack.config.js
src
index.jsx
yarn.lock
assets
js
bundle.js

const App = () => {
return (
<>
<h1>World</h1>
</>
);
};
ReactDOM.render(
<App />,
);
work
node_modules
public
index.html
package.json
webpack.config.js
src
index.jsx
yarn.lock
assets
js
bundle.js

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 />,
);
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>
<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">
</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

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 { AppBar, Toolbar, Typography } from '@material-ui/core';
const Header = () => {
return (
<>
<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';
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 { AppBar, Toolbar, Typography } from '@material-ui/core';
const Header = () => {
return (
<>
<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';
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

Build a React PWA with Material UI and Webpack

Build a React PWA with Material UI and Webpack

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Ähnlich wie Build a React PWA with Material UI and Webpack

Ähnlich wie Build a React PWA with Material UI and Webpack (20)

Mehr von Makoto Mori

Mehr von Makoto Mori (7)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Build a React PWA with Material UI and Webpack