More than 5 years have passed since last update.

React を Javascript で使ってみる

Last updated at 2019-10-13Posted at 2019-09-06

こんにちは
「Node.jsもES2015も使わないReact入門」の記事を見つけたので、自分でもそっくり真似してみました。「±数字」の部分をクリックすると count の値が増減します。React Hooks を使っています。

react.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Minimal React</title>
  </head>
  <body>
    <div id="app"></app>
    <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>
<script>
let CounterApp = () => {
  let mySetCount = n => {
	let col = n>0?"blue":"red";
    return React.createElement("span", {
      style:{color:col, border:"1px solid " + col},
      onClick: () => setCount(count + n),
    }, (n>0?"+":"") + String(n))
  }
  const [count, setCount] = React.useState(0);
  return React.createElement("span", null,
    React.createElement("span", {style: {textDecoration: "underline"}}, "count: " + count),
    React.createElement("span", null, " ← "),
    mySetCount(2),
    mySetCount(1),
    mySetCount(-1),
    mySetCount(-2),
  )
}

var rootElement = React.createElement(CounterApp, null)
ReactDOM.render(rootElement, document.getElementById("app"))
    </script>
  </body>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up