Mais conteúdo relacionado
Semelhante a 20190118_NetadashiMeetup#8_React2019 (20)
20190118_NetadashiMeetup#8_React2019
- 9. $ yarn add react react-dom
work
node_modules
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
- 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