Author: blog

webpackとは？

WebpackはNode.jsでサーバーサイドで動かすモジュールハンドラー
-npmはJSライブラリのバージョン管理
-Bowerはフロントエンドのライブラリ管理
-Gulp:タスクランナー
-webpackはJSファイルのコーディングで手助け(JS,CSSのバンドリング)
https://webpack.js.org/

ん？npmとは違うのね。
Webpackもlessやsassのコンパイラツールのようなもの。
え？それなら、gulpはいらない？？
gulpはsassのコンパイル

webpackは自分で書いたJSとライブラリのjsを一つにまとめる
JSで読み込むライブラリもまとめる
JS, CSS、画像ファイルをDataURI(base64)で一つのjsにまとめる

うん、なんかイマイチよくわからない。
複数のJSファイルをまとめられる、ってことはわかった。
Babelも用いる

とりあえず、npm initから
[vagrant@localhost front]$ npm init -y
Wrote to /home/vagrant/front/package.json:

{
“name”: “front”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″
},
“keywords”: [],
“author”: “”,
“license”: “ISC”
}

# インストール
$ npm i -D webpack webpack-cli

main.js

import { hello } from "./sub";

hello();

sub/sub.js

export function hello(){
    alert("hello method exection");
}

[vagrant@localhost front]$ npx webpack
Hash: e9a08af5f50ea936c82f
Version: webpack 4.41.2
Time: 163ms
Built at: 2019-11-19 23:43:38
Asset Size Chunks Chunk Names
main.js 982 bytes 0 [emitted] main
Entrypoint main = main.js
[0] ./src/index.js + 1 modules 104 bytes {0} [built]
| ./src/index.js 41 bytes [built]
| ./src/sub.js 63 bytes [built]

WARNING in configuration
The ‘mode’ option has not been set, webpack will fallback to ‘production’ for this value. Set ‘mode’ option to ‘development’ or ‘production’ to enable defaults for each environment.
You can also set it to ‘none’ to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="main.js"></script>
</head>
<body>

</body>
</html>

なんだこりゃ、あーこれか。webpackで書かれてたのか。なるほどねー
main.js

!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,r){"use strict";r.r(t),alert("hello method exection")}]);

React.jsでカレンダー機能を作りたい

カレンダー機能の要件
– 大画面で表示用
– formのカレンダーはdate pickerを使用する

react-calendarというlibraryがあるので、これをまず試したい
https://github.com/wojtekmaj/react-calendar

Installation
Add React-Calendar to your project by executing npm install react-calendar or yarn add react-calendar.

# npmでインストール
の前に、

[vagrant@localhost calendar]$ npm -v
1.3.6
[vagrant@localhost calendar]$ node -v
v0.10.48

その前にnodeとnpmをアップグレードしたい
[vagrant@localhost calendar]$ ll /etc/yum.repos.d/ | grep node
-rw-r–r–. 1 root root 464 9月 19 14:20 2014 nodesource-el.repo
[vagrant@localhost calendar]$ cat /etc/yum.repos.d/nodesource-el.repo
[nodesource]
name=Node.js Packages for Enterprise Linux 6 – $basearch
baseurl=https://rpm.nodesource.com/pub/el/6/$basearch

removeして最新を入れたい
$ sudo yum -y remove nodejs
$ sudo rm /etc/yum.repos.d/nodesource-el.repo

$ sudo yum install https://rpm.nodesource.com/pub_11.x/el/7/x86_64/nodesource-release-el7-1.noarch.rpm
$ ls -1 /etc/yum.repos.d
$ sudo yum install nodejs -y

[vagrant@localhost calendar]$ node -v
v11.15.0
[vagrant@localhost calendar]$ npm -v
6.7.0

react-calendarインストール
npm install react-calendar

あれ、その前にもう一回React.jsとwebpackを学ばないといかんやん。
ぎゃーーーーーーー

React.js 8

function TodoHeader(props){
            const remaining = props.todos.filter(todo => {
                return !todo.isDone;
        });
            return (
                <h1>
                    My Todos
                    <span>({remaining.length}/{props.todos.length})</span>
                </h1>
            );
    }

<script type="text/babel">
        (() => {

        const todos = [];

        function TodoHeader(props) {
        const remaining = props.todos.filter(todo => {
          return !todo.isDone;
        });
            return (
                <h1>
                    <button onClick={props.purge}>Purge</button>
                    My Todos
                    <span>({remaining.length}/{props.todos.length})</span>
                </h1>
            );
    }

        function TodoItem(props){
            return (
                <li key={props.todo.id}>
                    <label>
                    <input type="checkbox"
                        checked={props.todo.isDone}
                        onChange={() => props.checkTodo(props.todo)}
                    />
                    <span className={props.todo.isDone ? 'done' : ''}>
                    {props.todo.title}
                    </span>
                    </label>
                    <span className="cmd" onClick={() => props.deleteTodo(props.todo)}>[x]</span>
                </li>
            );
    }

        function TodoList(props){
            const todos = props.todos.map(todo => {
                return(
                    <TodoItem
                        key={todo.id}
                        todo={todo}
                        checkTodo={props.checkTodo}
                        deleteTodo={props.deleteTodo}
                    />

                );
        });
            return (
                <ul>
                    {props.todos.length ? todos: <li>nothing to do</li>}
                </ul>
            );
    }
        function TodoForm(props){
            return (
                <form onSubmit={props.addTodo}>
                        <input type="text" value={props.item} onChange={props.updateItem}/>
                        <input type="submit" value="Add"/>
                </form>
            );
    }

        function getUniqueId(){
            return new Date().getTime().toString(36) + '-' + Math.random().toString(36);
    }


        class App extends React.Component {
            constructor(){
                super();
                this.state = {
                todos: todos,
                item: ''
            };
            this.checkTodo = this.checkTodo.bind(this);
            this.deleteTodo = this.deleteTodo.bind(this);
            this.updateItem = this.updateItem.bind(this);
            this.addTodo = this.addTodo.bind(this);
            this.purge = this.purge.bind(this);
        }

         purge() {
          if (!confirm('are you sure?')) {
            return;
          }

          const todos = this.state.todos.filter(todo => {
            return !todo.isDone;
          });
          this.setState({
            todos: todos
          });
        }

        addTodo(e){
            e.preventDefault();

            if(this.state.item.trim()===''){
            return;
        }

            const item = {
                id: getUniqueId(),
                title: this.state.item,
                isDone: false
        };

        const todos = this.state.todos.slice();
        todos.push(item);
        this.setState({
            todos: todos,
            item: ''
    });
    }

        deleteTodo(todo){
            if (!confirm('are you sure?')) {
                return;
        }

            const todos = this.state.todos.slice();
            const pos = this.state.todos.indexOf(todo);

            todos.splice(pos, 1);
            this.setState({
            todos: todos
        });
    }

        checkTodo(todo){
            const todos = this.state.todos.map(todo => {
            return {id: todo.id, title: todo.title, isDone: todo.isDone};
        });

        const pos = this.state.todos.map(todo=>{
            return todo.id;
    }).indexOf(todo.id);

    todos[pos].isDone = !todos[pos].isDone;
    this.setState({
        todos: todos
});
    }


            updateItem(e){
                this.setState({
                item: e.target.value
            })
        }

            componentDidUpdate(){
                localStorage.setItem('todos', JSON.stringify(this.state.todos));
        }

        componentDidMount(){
                this.setState({
                    todos: JSON.parse(localStorage.getItem('todos')) || []
            });
        }

            render(){
             return (
                <div className="container">
                    <TodoHeader
                        todos={this.state.todos}
                        purge={this.purge}
                    />
                    <TodoList
                    todos={this.state.todos}
                    checkTodo={this.checkTodo}
                    deleteTodo={this.deleteTodo}
                     />
                    <TodoForm
                        item={this.state.item}
                        updateItem={this.updateItem}
                        addTodo={this.addTodo}
                    />
                </div>
             );
        }

    }
        ReactDOM.render(
            <App/>,
            document.getElementById('root')
        );
    })();
    </script>

React.js 7

<script type="text/babel">
        (() => {

        const todos = [
            {id: 0, title: 'Task 0', isDone: false},
            {id: 1, title: 'Task 1', isDone: false},
            {id: 2, title: 'Task 2', isDone: true}
        ];

        function TodoItem(props){
            return (
                <li key={props.todo.id}>
                    <label>
                    <input type="checkbox"
                        checked={props.todo.isDone}
                        onChange={() => props.checkTodo(props.todo)}
                    />
                    <span className={props.todo.isDone ? 'done' : ''}>
                    {props.todo.title}
                    </span>
                    </label>
                </li>
            );
    }

        function TodoList(props){
            const todos = props.todos.map(todo => {
                return(
                    <TodoItem
                        key={todo.id}
                        todo={todo}
                        checkTodo={props.checkTodo}
                    />

                );
        });
            return (
                <ul>
                    {todos}
                </ul>
            );
    }


        class App extends React.Component {
            constructor(){
                super();
                this.state = {
                todos: todos
            };
            this.checkTodo = this.checkTodo.bind(this);
        }

        checkTodo(todo){
            const todos = this.state.todos.map(todo => {
            return {id: todo.id, title: todo.title, isDone: todo.isDone};
        });

        const pos = this.state.todos.map(todo=>{
            return todo.id;
    }).indexOf(todo.id);

    todos[pos].isDone = !todos[pos].isDone;
    this.setState({
        todos: todos
});
    }

            render(){
             return (
                <div>
                    <h1>My Todo</h1>
                    <TodoList
                    todos={this.state.todos}
                    checkTodo={this.checkTodo}
                     />
                </div>
             );
        }

    }
        ReactDOM.render(
            <App/>,
            document.getElementById('root')
        );
    })();
    </script>

<script type="text/babel">
        (() => {

        const todos = [
            {id: 0, title: 'Task 0', isDone: false},
            {id: 1, title: 'Task 1', isDone: false},
            {id: 2, title: 'Task 2', isDone: true}
        ];

        function TodoItem(props){
            return (
                <li key={props.todo.id}>
                    <label>
                    <input type="checkbox"
                        checked={props.todo.isDone}
                        onChange={() => props.checkTodo(props.todo)}
                    />
                    <span className={props.todo.isDone ? 'done' : ''}>
                    {props.todo.title}
                    </span>
                    </label>
                    <span className="cmd" onClick={() => props.deleteTodo(props.todo)}>[x]</span>
                </li>
            );
    }

        function TodoList(props){
            const todos = props.todos.map(todo => {
                return(
                    <TodoItem
                        key={todo.id}
                        todo={todo}
                        checkTodo={props.checkTodo}
                        deleteTodo={props.deleteTodo}
                    />

                );
        });
            return (
                <ul>
                    {todos}
                </ul>
            );
    }


        class App extends React.Component {
            constructor(){
                super();
                this.state = {
                todos: todos
            };
            this.checkTodo = this.checkTodo.bind(this);
            this.deleteTodo = this.deleteTodo.bind(this);
        }

        checkTodo(todo){
            const todos = this.state.todos.map(todo => {
            return {id: todo.id, title: todo.title, isDone: todo.isDone};
        });

        const pos = this.state.todos.map(todo=>{
            return todo.id;
    }).indexOf(todo.id);

    todos[pos].isDone = !todos[pos].isDone;
    this.setState({
        todos: todos
});
    }

            render(){
             return (
                <div className="container">
                    <h1>My Todo</h1>
                    <TodoList
                    todos={this.state.todos}
                    checkTodo={this.checkTodo}
                    deleteTodo={this.deleteTodo}
                     />
                </div>
             );
        }

    }
        ReactDOM.render(
            <App/>,
            document.getElementById('root')
        );
    })();
    </script>

function TodoList(props){
            const todos = props.todos.map(todo => {
                return(
                    <TodoItem
                        key={todo.id}
                        todo={todo}
                        checkTodo={props.checkTodo}
                        deleteTodo={props.deleteTodo}
                    />

                );
        });
            return (
                <ul>
                    {props.todos.length ? todos: <li>nothing to do</li>}
                </ul>
            );
    }


        class App extends React.Component {
            constructor(){
                super();
                this.state = {
                todos: todos
            };
            this.checkTodo = this.checkTodo.bind(this);
            this.deleteTodo = this.deleteTodo.bind(this);
        }

        deleteTodo(todo){
            if (!confirm('are you sure?')) {
                return;
        }

            const todos = this.state.todos.slice();
            const pos = this.state.todos.indexOf(todo);

            todos.splice(pos, 1);
            this.setState({
            todos: todos
        });
    }

function TodoItem(props){
            return (
                <li key={props.todo.id}>
                    <label>
                    <input type="checkbox"
                        checked={props.todo.isDone}
                        onChange={() => props.checkTodo(props.todo)}
                    />
                    <span className={props.todo.isDone ? 'done' : ''}>
                    {props.todo.title}
                    </span>
                    </label>
                    <span className="cmd" onClick={() => props.deleteTodo(props.todo)}>[x]</span>
                </li>
            );
    }

        function TodoList(props){
            const todos = props.todos.map(todo => {
                return(
                    <TodoItem
                        key={todo.id}
                        todo={todo}
                        checkTodo={props.checkTodo}
                        deleteTodo={props.deleteTodo}
                    />

                );
        });
            return (
                <ul>
                    {props.todos.length ? todos: <li>nothing to do</li>}
                </ul>
            );
    }
        function TodoForm(props){
            return (
                <form>
                        <input type="text" value={props.item} onChange={props.updateItem}/>
                        <input type="submit" value="Add"/>
                </form>
            );
    }


        class App extends React.Component {
            constructor(){
                super();
                this.state = {
                todos: todos,
                item: ''
            };
            this.checkTodo = this.checkTodo.bind(this);
            this.deleteTodo = this.deleteTodo.bind(this);
            this.updateItem = this.updateItem.bind(this);
        }

        deleteTodo(todo){
            if (!confirm('are you sure?')) {
                return;
        }

            const todos = this.state.todos.slice();
            const pos = this.state.todos.indexOf(todo);

            todos.splice(pos, 1);
            this.setState({
            todos: todos
        });
    }

        checkTodo(todo){
            const todos = this.state.todos.map(todo => {
            return {id: todo.id, title: todo.title, isDone: todo.isDone};
        });

        const pos = this.state.todos.map(todo=>{
            return todo.id;
    }).indexOf(todo.id);

    todos[pos].isDone = !todos[pos].isDone;
    this.setState({
        todos: todos
});
    }


            updateItem(e){
                this.setState({
                item: e.target.value
            })
        }

            render(){
             return (
                <div className="container">
                    <h1>My Todo</h1>
                    <TodoList
                    todos={this.state.todos}
                    checkTodo={this.checkTodo}
                    deleteTodo={this.deleteTodo}
                     />
                    <TodoForm
                        item={this.state.item}
                        updateItem={this.updateItem}
                    />
                </div>
             );
        }

    }

<script type="text/babel">
        (() => {

        const todos = [];

        function TodoItem(props){
            return (
                <li key={props.todo.id}>
                    <label>
                    <input type="checkbox"
                        checked={props.todo.isDone}
                        onChange={() => props.checkTodo(props.todo)}
                    />
                    <span className={props.todo.isDone ? 'done' : ''}>
                    {props.todo.title}
                    </span>
                    </label>
                    <span className="cmd" onClick={() => props.deleteTodo(props.todo)}>[x]</span>
                </li>
            );
    }

        function TodoList(props){
            const todos = props.todos.map(todo => {
                return(
                    <TodoItem
                        key={todo.id}
                        todo={todo}
                        checkTodo={props.checkTodo}
                        deleteTodo={props.deleteTodo}
                    />

                );
        });
            return (
                <ul>
                    {props.todos.length ? todos: <li>nothing to do</li>}
                </ul>
            );
    }
        function TodoForm(props){
            return (
                <form onSubmit={props.addTodo}>
                        <input type="text" value={props.item} onChange={props.updateItem}/>
                        <input type="submit" value="Add"/>
                </form>
            );
    }

        function getUniqueId(){
            return new Date().getTime().toString(36) + '-' + Math.random().toString(36);
    }


        class App extends React.Component {
            constructor(){
                super();
                this.state = {
                todos: todos,
                item: ''
            };
            this.checkTodo = this.checkTodo.bind(this);
            this.deleteTodo = this.deleteTodo.bind(this);
            this.updateItem = this.updateItem.bind(this);
            this.addTodo = this.addTodo.bind(this);
        }

        addTodo(e){
            e.preventDefault();

            if(this.state.item.trim()===''){
            return;
        }

            const item = {
                id: getUniqueId(),
                title: this.state.item,
                isDone: false
        };

        const todos = this.state.todos.slice();
        todos.push(item);
        this.setState({
            todos: todos,
            item: ''
    });
    }

        deleteTodo(todo){
            if (!confirm('are you sure?')) {
                return;
        }

            const todos = this.state.todos.slice();
            const pos = this.state.todos.indexOf(todo);

            todos.splice(pos, 1);
            this.setState({
            todos: todos
        });
    }

        checkTodo(todo){
            const todos = this.state.todos.map(todo => {
            return {id: todo.id, title: todo.title, isDone: todo.isDone};
        });

        const pos = this.state.todos.map(todo=>{
            return todo.id;
    }).indexOf(todo.id);

    todos[pos].isDone = !todos[pos].isDone;
    this.setState({
        todos: todos
});
    }


            updateItem(e){
                this.setState({
                item: e.target.value
            })
        }

            render(){
             return (
                <div className="container">
                    <h1>My Todo</h1>
                    <TodoList
                    todos={this.state.todos}
                    checkTodo={this.checkTodo}
                    deleteTodo={this.deleteTodo}
                     />
                    <TodoForm
                        item={this.state.item}
                        updateItem={this.updateItem}
                        addTodo={this.addTodo}
                    />
                </div>
             );
        }

    }
        ReactDOM.render(
            <App/>,
            document.getElementById('root')
        );
    })();
    </script>

各パーツをそれぞれコンポートネントとして切り分ける。

React.js 6

<script type="text/babel">
        (() => {

        const todos = [
            {id: 0, title: 'Task 0', isDone: false},
            {id: 1, title: 'Task 1', isDone: false},
            {id: 2, title: 'Task 2', isDone: true}
        ];

        function TodoList(props){
            const todos = props.todos.map(todo => {
                return(
                    <li key={todo.id}>{todo.title}</li>
                );
        });
            return (
                <ul>
                    {todos}
                </ul>
            );
    }


        class App extends React.Component {
            constructor(){
                super();
                this.state = {
                todos: todos
            };
        }

            render(){
             return (
                <div>
                    <h1>My Todo</h1>
                    <TodoList todos={this.state.todos} />
                </div>
             );
        }

    }
        ReactDOM.render(
            <App/>,
            document.getElementById('root')
        );
    })();
    </script>

constで定義したstateを渡してますね。

<script type="text/babel">
        (() => {

        const todos = [
            {id: 0, title: 'Task 0', isDone: false},
            {id: 1, title: 'Task 1', isDone: false},
            {id: 2, title: 'Task 2', isDone: true}
        ];

        function TodoItem(props){
            return (
                <li key={props.todo.id}>
                    {props.todo.title}
                </li>
            );
    }

        function TodoList(props){
            const todos = props.todos.map(todo => {
                return(
                    <TodoItem
                        key={todo.id}
                        todo={todo}
                    />

                );
        });
            return (
                <ul>
                    {todos}
                </ul>
            );
    }


        class App extends React.Component {
            constructor(){
                super();
                this.state = {
                todos: todos
            };
        }

            render(){
             return (
                <div>
                    <h1>My Todo</h1>
                    <TodoList todos={this.state.todos} />
                </div>
             );
        }

    }
        ReactDOM.render(
            <App/>,
            document.getElementById('root')
        );
    })();
    </script>

function TodoItem(props){
            return (
                <li key={props.todo.id}>
                    <label>
                    <input type="checkbox"
                        checked={props.todo.isDone}
                    />
                    {props.todo.title}
                    </label>
                </li>
            );
    }

React.js 5

<script type="text/babel">
        (() =>{

            function Counter(props){

            function countUp(){
                alert('count up!');
            }
            return(
                <li style={{backgroundColor:props.color}} onClick={countUp}>
                0
                </li>
            );
        }

            ReactDOM.render(
                <div className="container">
                    <ul>
                        <Counter color="red"/>
                        <Counter color="yellow"/>
                        <Counter color="blue"/>
                    </ul>
                </div>,
                document.getElementById('root')
            );
    })();
    </script>

function Counter(props){

            function countUp(color){
                alert(color);
            }
            return(
                <li style={{backgroundColor:props.color}} onClick={() =>
                    countUp(props.color)}>
                0
                </li>
            );
        }

<script type="text/babel">
        (() =>{


            class Counter extends React.Component {
                render(){
                    return(
                        <li style={{backgroundColor:this.props.color}}>
                            0
                        </li>
                    );
            }
        }

            ReactDOM.render(
                <div className="container">
                    <ul>
                        <Counter color="red"/>
                        <Counter color="yellow"/>
                        <Counter color="blue"/>
                    </ul>
                </div>,
                document.getElementById('root')
            );
    })();
    </script>

<script type="text/babel">
        (() =>{


            class Counter extends React.Component {
                constructor(props){
                super(props);
                this.state = {
                    count: 10
            };
            }

                render(){
                    return(
                        <li style={{backgroundColor:this.props.color}}>
                            {this.state.count}
                        </li>
                    );
            }
        }

            ReactDOM.render(
                <div className="container">
                    <ul>
                        <Counter color="red"/>
                        <Counter color="yellow"/>
                        <Counter color="blue"/>
                    </ul>
                </div>,
                document.getElementById('root')
            );
    })();
    </script>

class Counter extends React.Component {
                constructor(props){
                super(props);
                this.state = {
                    count: 10,
                    message: 'hello!'
            };
            }


<script type="text/babel">
        (() =>{


            class Counter extends React.Component {
                constructor(props){
                super(props);
                this.state = {
                    count: 0
                };
                this.countUp = this.countUp.bind(this);
            }
                countUp(){
                    this.setState(prevState =>{
                        return {
                        count: prevState.count + 1
                    };
                });
            }

                render(){
                    return(
                        <li style={{backgroundColor:this.props.color}} onClick={this.countUp}>
                            {this.state.count}
                        </li>
                    );
            }
        }

            ReactDOM.render(
                <div className="container">
                    <ul>
                        <Counter color="red"/>
                        <Counter color="yellow"/>
                        <Counter color="blue"/>
                    </ul>
                </div>,
                document.getElementById('root')
            );
    })();
    </script>

<script type="text/babel">
        (() =>{


            function Counter(props){
            return(
                        <li style={{backgroundColor:props.counter.color}}>
                            {props.counter.id}:{props.counter.count}
                        </li>
                );

            }

            class App extends React.Component {
                constructor(){
                    super();
                    this.state = {
                    counters: [
                        {id: 'A', count: 0, color: 'red'},
                        {id: 'B', count: 0, color: 'yellow'},
                        {id: 'C', count: 0, color: 'blue'}
                    ]

                };
            }
                render(){
                return (
                    <div className="container">
                        <ul>
                            <Counter counter={this.state.counters&#91;0&#93;}/>
                            <Counter counter={this.state.counters&#91;1&#93;}/>
                            <Counter counter={this.state.counters&#91;2&#93;}/>
                        </ul>
                        <div>Total Inventory: 3</div>
                    </div>
                )
            }
        }

            ReactDOM.render(
                <App/>,
                document.getElementById('root')
            );
    })();
    </script>

<script type="text/babel">
        (() =>{


            function Counter(props){
            return(
                        <li style={{backgroundColor:props.counter.color}}>
                            {props.counter.id}:{props.counter.count}
                        </li>
                );

            }

            function CounterList(props){
                const counters = props.counters.map(counter => {
                    return(
                        <Counter counter={counter}/>
                    );
            });
                return (
                    <ul>
                        {counters}
                    </ul>
                );
        }

            class App extends React.Component {
                constructor(){
                    super();
                    this.state = {
                    counters: [
                        {id: 'A', count: 0, color: 'red'},
                        {id: 'B', count: 0, color: 'yellow'},
                        {id: 'C', count: 0, color: 'blue'}
                    ]

                };
            }
                render(){
                return (
                    <div className="container">
                         <CounterList counters={this.state.counters}/>
                        <div>Total Inventory: 3</div>
                    </div>
                )
            }
        }

            ReactDOM.render(
                <App/>,
                document.getElementById('root')
            );
    })();
    </script>

function CounterList(props){
                const counters = props.counters.map(counter => {
                    return(
                        <Counter
                        counter={counter}
                        key={counter.id}/>
                    );
            });

<script type="text/babel">
        (() =>{


            function Counter(props){
            return(
                        <li style={{backgroundColor:props.counter.color}} onClick={() => props.countUp(props.counter)}>
                            {props.counter.id}:{props.counter.count}
                        </li>
                );

            }

            function CounterList(props){
                const counters = props.counters.map(counter => {
                    return(
                        <Counter
                        counter={counter}
                        key={counter.id}
                        countUp={props.countUp}
                        />
                    );
            });
                return (
                    <ul>
                        {counters}
                    </ul>
                );
        }

            class App extends React.Component {
                constructor(){
                    super();
                    this.state = {
                    counters: [
                        {id: 'A', count: 0, color: 'red'},
                        {id: 'B', count: 0, color: 'yellow'},
                        {id: 'C', count: 0, color: 'blue'}
                    ]

                };
                this.countUp = this.countUp.bind(this);
            }

            countUp(counter){
                this.setState(prevState =>{
                    const counters = prevState.counters.map(counter => {
                    return {id: counter.id, count: counter.count, color: counter.color};
                });
                const pos = counters.map(counter => {
                    return counter.id;
            }). indexOf(counter.id);
                counters[pos].count++;
                return {
                counters: counters
            };
            });
        }
                render(){
                return (
                    <div className="container">
                         <CounterList
                         counters={this.state.counters}
                            countUp={this.countUp}
                         />
                        <div>Total Inventory: 3</div>
                    </div>
                )
            }
        }

            ReactDOM.render(
                <App/>,
                document.getElementById('root')
            );
    })();
    </script>

<script type="text/babel">
        (() =>{


            function Counter(props){
            return(
                        <li style={{backgroundColor:props.counter.color}} onClick={() => props.countUp(props.counter)}>
                            {props.counter.id}:{props.counter.count}
                        </li>
                );

            }

            function CounterList(props){
                const counters = props.counters.map(counter => {
                    return(
                        <Counter
                        counter={counter}
                        key={counter.id}
                        countUp={props.countUp}
                        />
                    );
            });
                return (
                    <ul>
                        {counters}
                    </ul>
                );
        }

            class App extends React.Component {
                constructor(){
                    super();
                    this.state = {
                    counters: [
                        {id: 'A', count: 0, color: 'red'},
                        {id: 'B', count: 0, color: 'yellow'},
                        {id: 'C', count: 0, color: 'blue'}
                    ],
                    total: 0

                };
                this.countUp = this.countUp.bind(this);
            }

            countUp(counter){
                this.setState(prevState =>{
                    const counters = prevState.counters.map(counter => {
                    return {id: counter.id, count: counter.count, color: counter.color};
                });
                const pos = counters.map(counter => {
                    return counter.id;
            }). indexOf(counter.id);
                counters[pos].count++;
                return {
                counters: counters,
                total: prevState.total + 1
            };
            });
        }
                render(){
                return (
                    <div className="container">
                         <CounterList
                         counters={this.state.counters}
                            countUp={this.countUp}
                         />
                        <div>Total Inventory: {this.state.total}</div>
                    </div>
                )
            }
        }

            ReactDOM.render(
                <App/>,
                document.getElementById('root')
            );
    })();
    </script>

なるほど、component単位でJavaScriptで作っていくってわけね。少し理解した。

React.js 4

<script type="text/babel">
        (() =>{

            function Counter(){
            return <div>0</div>
        }

            ReactDOM.render(
                <div>
                    <Counter/>
                    <Counter/>
                    <Counter/>
                </div>,
                document.getElementById('root')
            );
    })();
    </script>

<script type="text/babel">
        (() =>{

            function Counter(props){
            return <div>0 {props.color}</div>
        }

            ReactDOM.render(
                <div>
                    <Counter color="red"/>
                    <Counter color="yellow"/>
                    <Counter color="blue"/>
                </div>,
                document.getElementById('root')
            );
    })();
    </script>

<script type="text/babel">
        (() =>{

            function Counter(props){
            return <div style={{backgroundColor:props.color}}>0</div>
        }

            ReactDOM.render(
                <div>
                    <Counter color="red"/>
                    <Counter color="yellow"/>
                    <Counter color="blue"/>
                </div>,
                document.getElementById('root')
            );
    })();
    </script>

<script type="text/babel">
        (() =>{

            function Counter(props){
            return <li style={{backgroundColor:props.color}}>0</li>
        }

            ReactDOM.render(
                <div className="container">
                    <ul>
                        <Counter color="red"/>
                        <Counter color="yellow"/>
                        <Counter color="blue"/>
                    </ul>
                </div>,
                document.getElementById('root')
            );
    })();
    </script>

[ccs]
body {
font-size:16px;
font-family: Verdana, sans-serif;
}

.container {
width: 330px;
margin: 20px auto;
}

.container ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap:wrap;
}

.container li {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
cursor: pointer;
user-select: none;
border-radius: 5px;
margin: 0 5px 10px;
}
[/ccs]

React.js 3

camelcaseでclassを書くこともできる。

<script type="text/babel">
        (() =>{

            ReactDOM.render(
                <div className="box"></div>,
                document.getElementById('root')
            );
    })();
    </script>

inlineもok

<script type="text/babel">
        (() =>{

            ReactDOM.render(
                <div style={{width:150, height:100, backgroundColor:'blue'}}></div>,
                document.getElementById('root')
            );
    })();
    </script>

onClick

<script type="text/babel">
        (() =>{

            function showMessage(){
                alert('this is alert!');
        }

            ReactDOM.render(
                <div style={{width:150, height:100, backgroundColor:'blue'}} onClick={showMessage}></div>,
                document.getElementById('root')
            );
    })();
    </script>

うぉ、なんかすげー疲れた。。
あれ、今の所は、レンダリングやalertなど特段JSで処理できることばかりだから、React.jsを使う場面がいまいち想像つかないぞ。。

React.js 2

JSXで渡せるのは一つだけ。
XMLベースのため、hrなど閉じタグのないタグはエラーになる。

<div id="root"></div> <!-- 部品を表示 -->
    <script type="text/babel">
        (() =>{
            const name = "yamada";
            ReactDOM.render(
                <p>React, {name.toUpperCase()}</p>, document.getElementById('root')
            );
    })();
    </script>

React, YAMADA

複数の要素を渡す場合は、親要素で囲う

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>React</title>
    <script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div id="root"></div> <!-- 部品を表示 -->
    <script type="text/babel">
        (() =>{
            const name = "Yamada";
            ReactDOM.render(
                <div>
                    <p>React, {name.toUpperCase()}</p>
                    <p>{name.toLowerCase()}</p>
                </div>,
                document.getElementById('root')
            );
    })();
    </script>
</body>
</html>

React, YAMADA
yamada