ysmdsty/css__style.css Secret

## css__style.css
body {
    font-size: 16px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.box {
  width: 100px;
  height: 100px;
  background-color: skyblue;
}

.container {
    width: 600px;
    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: 10px;
    margin: 0 10px 15px;
}

.container div {
    text-align: left;
    padding: 10px;
    margin: 10px;
    font-size: 15px;
    font-weight: bold;
}

## index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>React</title>
  <link rel="stylesheet" href="css/styles.css">
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

  <!-- Don't use this in production: -->
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
  (() => {
    // - class name
    // <div className='box'>
    // - style
    // <div style={{width: 100, height: 100, backgroundColor: 'skyblue'}}>

    // function showMessage() {}
    var showMessage = () => { alert('Hello World'); }
    var showColor= (e, props) => {
      e.preventDefault();
      alert(props.color);
    }

    var ClickPlane = (props) => {
      return (
        <li style={{backgroundColor:props.color}}>
          <a href="#" onClick={e => showColor(e, {color: props.color})}>
            {props.color}
          </a>
        </li>
      )
    };


    class App extends React.Component {
      constructor() {
        super();
        this.state = {
          counters: [
            {id: 'id1', count: 0, color: 'red'},
            {id: 'id2', count: 0, color: 'blue'},
            {id: 'id3', count: 0, color: 'green'},
          ],
          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 => counter.id).indexOf(counter.id);
          counters[pos].count++;
          return {
            counters: counters,
            total: prevState.total + 1,
          };
        });
      }
      render() {
        return (
          <div className='container'>
            <ul>
              <ClickPlane color='red'/>
              <ClickPlane color='blue'/>
              <ClickPlane color='green'/>
            </ul>
            <div>TOTAL: 0</div>
            <CounterList
              counters={this.state.counters}
              countUp={this.countUp}
            />
            <div>TOTAL: {this.state.total}</div>
          </div>
        )
      }
    }

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

    class Counter extends React.Component {
      constructor(props) {
        super(props);
        this.countUp = this.countUp.bind(this);
      }
      countUp() {
        this.props.countUp(this.props.counter)
      }
      render() {
        return (
          <li style={{backgroundColor:this.props.counter.color}} onClick={this.countUp}>
            {this.props.counter.id}: {this.props.counter.count}
          </li>
        );
      }
    }

    // JSX
    const value = 'world'
    ReactDOM.render(
      <div>
        <div className='box' onClick={showMessage}>
          <p>Hello! {value.toUpperCase()}</p>
        </div>
        <App/>
      </div>,
      document.getElementById('root')
    );
  })();
  </script>
</body>
</html>
	body {
	font-size: 16px;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	}

	.box {
	width: 100px;
	height: 100px;
	background-color: skyblue;
	}

	.container {
	width: 600px;
	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: 10px;
	margin: 0 10px 15px;
	}

	.container div {
	text-align: left;
	padding: 10px;
	margin: 10px;
	font-size: 15px;
	font-weight: bold;
	}
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<title>React</title>
	<link rel="stylesheet" href="css/styles.css">
	<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

	<!-- Don't use this in production: -->
	<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
	</head>
	<body>
	<div id="root"></div>
	<script type="text/babel">
	(() => {
	// - class name
	// <div className='box'>
	// - style
	// <div style={{width: 100, height: 100, backgroundColor: 'skyblue'}}>

	// function showMessage() {}
	var showMessage = () => { alert('Hello World'); }
	var showColor= (e, props) => {
	e.preventDefault();
	alert(props.color);
	}

	var ClickPlane = (props) => {
	return (
	<li style={{backgroundColor:props.color}}>
	<a href="#" onClick={e => showColor(e, {color: props.color})}>
	{props.color}
	</a>
	</li>
	)
	};


	class App extends React.Component {
	constructor() {
	super();
	this.state = {
	counters: [
	{id: 'id1', count: 0, color: 'red'},
	{id: 'id2', count: 0, color: 'blue'},
	{id: 'id3', count: 0, color: 'green'},
	],
	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 => counter.id).indexOf(counter.id);
	counters[pos].count++;
	return {
	counters: counters,
	total: prevState.total + 1,
	};
	});
	}
	render() {
	return (
	<div className='container'>
	<ul>
	<ClickPlane color='red'/>
	<ClickPlane color='blue'/>
	<ClickPlane color='green'/>
	</ul>
	<div>TOTAL: 0</div>
	<CounterList
	counters={this.state.counters}
	countUp={this.countUp}
	/>
	<div>TOTAL: {this.state.total}</div>
	</div>
	)
	}
	}

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

	class Counter extends React.Component {
	constructor(props) {
	super(props);
	this.countUp = this.countUp.bind(this);
	}
	countUp() {
	this.props.countUp(this.props.counter)
	}
	render() {
	return (
	<li style={{backgroundColor:this.props.counter.color}} onClick={this.countUp}>
	{this.props.counter.id}: {this.props.counter.count}
	</li>
	);
	}
	}

	// JSX
	const value = 'world'
	ReactDOM.render(
	<div>
	<div className='box' onClick={showMessage}>
	<p>Hello! {value.toUpperCase()}</p>
	</div>
	<App/>
	</div>,
	document.getElementById('root')
	);
	})();
	</script>
	</body>
	</html>