├── .babelrc
├── .gitignore
├── LICENSE
├── README.md
├── development.js
├── dist
├── bundle.js
└── index.html
├── package-lock.json
├── package.json
├── src
├── index.html
└── index.jsx
└── webpack.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | "@babel/preset-env", "@babel/preset-react"
4 | ]
5 | }
6 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018 akira kudo
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## Usage
2 |
3 | See this article https://qiita.com/akirakudo/items/77c3cd49e2bf39da79dd
4 |
5 | ### download files to your
6 |
7 | ```
8 | git clone https://github.com/akirakudo/react-es6-tutorial
9 | ```
10 |
11 | ### install packages
12 |
13 | ```
14 | npm install
15 | ```
16 |
17 | ### run webserver
18 |
19 | ```
20 | npm start
21 | ```
22 |
23 | ### access from your web browser
24 | localhost:8080
25 |
--------------------------------------------------------------------------------
/development.js:
--------------------------------------------------------------------------------
1 | import path from 'path'
2 | import HtmlWebpackPlugin from 'html-webpack-plugin'
3 |
4 | const src = path.resolve(__dirname, 'src')
5 | const dist = path.resolve(__dirname, 'dist')
6 |
7 | export default {
8 | mode: 'development',
9 | entry: src + '/index.jsx',
10 |
11 | output: {
12 | path: dist,
13 | filename: 'bundle.js'
14 | },
15 |
16 | module: {
17 | rules: [
18 | {
19 | test: /\.jsx$/,
20 | exclude: /node_modules/,
21 | loader: 'babel-loader'
22 | }
23 | ]
24 | },
25 |
26 | resolve: {
27 | extensions: ['.js','jsx']
28 | },
29 |
30 | plugins: [
31 | new HtmlWebpackPlugin({
32 | template: src + '/index.html',
33 | filename: 'index.html'
34 | })
35 | ]
36 | }
37 |
--------------------------------------------------------------------------------
/dist/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | React Test
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-es6-tutorial",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "scripts": {
7 | "test": "echo \"Error: no test specified\" && exit 1",
8 | "start": "webpack-dev-server"
9 | },
10 | "repository": {
11 | "type": "git",
12 | "url": "git+https://github.com/akirakudo/react-es6-tutorial.git"
13 | },
14 | "keywords": [],
15 | "author": "",
16 | "license": "ISC",
17 | "bugs": {
18 | "url": "https://github.com/akirakudo/react-es6-tutorial/issues"
19 | },
20 | "homepage": "https://github.com/akirakudo/react-es6-tutorial#readme",
21 | "devDependencies": {
22 | "@babel/core": "^7.6.0",
23 | "@babel/preset-env": "^7.6.0",
24 | "@babel/preset-react": "^7.0.0",
25 | "@babel/register": "^7.6.0",
26 | "babel-loader": "^8.0.6",
27 | "html-webpack-plugin": "^3.2.0",
28 | "webpack": "^4.40.2",
29 | "webpack-cli": "^3.3.9",
30 | "webpack-dev-server": "^3.8.1"
31 | },
32 | "dependencies": {
33 | "react": "^16.9.0",
34 | "react-dom": "^16.9.0"
35 | }
36 | }
37 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | React Test
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/src/index.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { render } from 'react-dom'
3 |
4 | class App extends React.Component {
5 |
6 | constructor(props) {
7 | super(props)
8 | this.state = { message: 'something' }
9 | }
10 |
11 | onChange(e) {
12 | this.setState( { message: e.target.value } )
13 | }
14 |
15 | render() {
16 | return (
17 |
18 |
19 |
{ this.state.message }
20 |