既存のサイトにReactを導入する

www.webopixel.net

インストール

npm init -y
npm i -D webpack webpack-cli typescript ts-loader
npm i -S react react-dom
npm i -D @types/react @types/react-dom

package.jsonのscriptsにbuildとstartを追加

package.json

"scripts": {
+    "build": "webpack --mode=production",
+    "start": "webpack -w --mode=development"
},

tsconfig.json生成

$ touch tsconfig.json

tsconfig.jsonを編集

{
    "compilerOptions": {
        "sourceMap": true,
        "target": "es5",
        "module": "es2015",
        "strict": true,
        "strictNullChecks": true,
        "noUnusedLocals": true,
        "noUnusedParameters": false,
        "noImplicitReturns": true,
        "moduleResolution": "node",
        "esModuleInterop": true,
        "allowSyntheticDefaultImports": true,
        "jsx": "react",
        "lib": ["es2020", "dom"]
    }
}

webpack.config.json生成

$ touch webpack.config.js

webpack.config.jsonを編集

const path = require('path')
const assetsDir = path.resolve(__dirname, 'public_html/assets');
 
module.exports = {
    entry: assetsDir + "/src/app.tsx",
    output: {
        path: assetsDir + "/dist",
        filename: 'app.js'
    },
    module: {
        rules: [
            {
            test: /\.tsx?$/,
            use: "ts-loader",
            },
        ],
    },
    resolve: {
    extensions: [".ts", ".tsx", ".js"]
    },
};

ビルドのテスト

$ mkdir -p public_html/assets/src
$ touch public_html/assets/src/app.tsx
app.tsx

import React from 'react'
import { render } from 'react-dom'
 
const App = () => {
    return (
        <div>
            <div>Hello React</div>
        </div>
    )
}
 
render(<App/>, document.querySelector('#app'))

ビルド

$ npm run build　
（または　$ npm run start）

public_html/assets/distディレクトリにapp.jsが生成されている

app.jsの読み込み
public_html/index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>部分React</title>
</head>
<body>
    <div id="app"></div>
    <script src="assets/dist/app.js" charset="utf-8"></script>
</body>
</html>

.gitignoreの設定

https://raw.githubusercontent.com/facebook/react/main/.gitignore

.gitignore

.DS_STORE
node_modules
scripts/flow/*/.flowconfig
.flowconfig
*~
*.pyc
.grunt
_SpecRunner.html
__benchmarks__
build/
remote-repo/
coverage/
.module-cache
fixtures/dom/public/react-dom.js
fixtures/dom/public/react.js
test/the-files-to-test.generated.js
*.log*
chrome-user-data
*.sublime-project
*.sublime-workspace
.idea
*.iml
.vscode
*.swp
*.swo

packages/react-devtools-core/dist
packages/react-devtools-extensions/chrome/build
packages/react-devtools-extensions/chrome/*.crx
packages/react-devtools-extensions/chrome/*.pem
packages/react-devtools-extensions/firefox/build
packages/react-devtools-extensions/firefox/*.xpi
packages/react-devtools-extensions/firefox/*.pem
packages/react-devtools-extensions/shared/build
packages/react-devtools-extensions/.tempUserDataDir
packages/react-devtools-inline/dist
packages/react-devtools-shell/dist
packages/react-devtools-timeline/dist

気をつけること

  • app.jsをロードするときはDOMの末尾でロードする（先頭に追加するとJavaScriptコードが走らない）
  • render()内の<div class="hoge">は<div className="hoge">に書き換える
  • styleはJavaScriptオブジェクトに変更する。たとえば<div style="visibility: hidden;">は<div style={{visibility: 'hidden'}}<とする。