Reactの導入

まっちま

2021年6月28日 09:49

React Appの作成

npx create-react-app アプリ名
cd アプリ名
cd start
Ctrl + C：停止

React Appの作成：TypeScriptの場合

npx create-react-app アプリ名 --template typescript

TypeScriptとは？：JavaScriptに対して、省略も可能な静的型付けとクラスベースオブジェクト指向を加えたモノ。

既存のHTMLにReactを導入する方法

1.DOMコンテナを導入

<div id="like_button_container"></div>

2.<script>を追加

<!-- Load React. -->
 <!-- Note: when deploying, replace "development.js" with "production.min.js". -->

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

 <!-- Load our React component. ステップ3で使うコンポーネント-->
<script src="like_button.js"></script>

3.React コンポーネントを作成

like_button.js

'use strict';

const e = React.createElement;

class LikeButton extends React.Component {
constructor(props) {
  super(props);
  this.state = { liked: false };
}

render() {
  if (this.state.liked) {
    return 'You liked this.';
  }

  return e(
    'button',
    { onClick: () => this.setState({ liked: true }) },
    'Like'
  );
}
}

const domContainer = document.querySelector('#like_button_container');
ReactDOM.render(e(LikeButton), domContainer);

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <title>add React</title>
</head>
<body>
  <h1>Hello, World</h1>

  <!-- 1.HTMLにDOMコンテナを追加 -->
  <div id="like_button_container"></div>

  <script src="./js/common.js"></script>

  <!-- 2.script タグを追加する -->
  <!-- Load React. -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>

  <!-- Load our React component. -->
  <script src="like_button.js"></script>
</body>
</html>

この記事が気に入ったらサポートをしてみませんか？