React 学習 Web サイト、拡張機能のインストール、エンジニアリングの作成

1. React 学習 Web サイト

官网：https://react.dev/

中国語のウェブサイト:https://zh-hans.react.dev/

上記の Web サイトには関数コンポーネントのみがあり、クラスコンポーネントはありません。クラスコンポーネントが含まれる公式 Web サイトは以下です。

クラスコンポーネント公式サイト：https://zh-hans.legacy.reactjs.org/

2. 拡張機能のインストール

ブラウザ拡張機能: <https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=zh-CN
vscode 拡張子:

vscode を開き、拡張機能をクリックし、js jsx スニペットを検索してインストールします

**JSX の構文を学びたい場合は、ここを参照してください: **http://t.csdnimg.cn/uSEDs

**拡張インストールの詳細については、こちらをご覧ください: **http://t.csdnimg.cn/WO3Dk

3. 反応工学

3.1 Webpack ビルド

環境は非常に重要です。これは以下の私の環境です

@babel/[email protected]
├── @babel/[email protected]
├── @babel/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├──[email protected]
└── [email protected]

Webpack によって正常にビルドされた React プロジェクトを作成する手順をステップごとに指定するには、以下の手順に従ってください。

次の手順を保存したい場合は、私のプロジェクトを直接プルできます。

Github プロジェクトのアドレス: https://github.com/Lumrnous/webpackReact.git

gitee プロジェクトのアドレス: https://gitee.com/wang-shuaiqi_1_0/webpack-react.git

プロジェクトの作成

//创建项目
mkdir 项目名
//进入项目
cd 项目名
//生成一个package.json文件
npm init -y

関連パッケージをインストールする

//开发包
npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin babel-loader @babel/core core-js @babel/preset-env @babel/preset-react webpack-merge

//生产包
npm i -S react react-dom

Webパックの設定

webpack.config.js ファイルを作成し、次の内容をそのファイルにコピーします

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

/** @type {import('webpack').Configuration} */
module.exports = {
    
    
  // 打包模式
  mode: 'development',
  // 入口
  entry: './src/index.js',
  // 出口
  output: {
    
    
    path: path.resolve('./dist'),
    filename: 'index.js',
    // 在下一次打包时，删除原来的dist目录
    clean: true
  },
  // 加载器
  module: {
    
    
    rules: [
      {
    
    
        test: /\.jsx?$/i,
        exclude: /node_modules/,
        // 此处没有写配置，则它会打目录下面有的babel.config.js配置文件
        loader: 'babel-loader'
      }
    ]
  },
  // 插件
  plugins: [
    new HtmlWebpackPlugin({
    
    
      template: path.resolve('./public/index.html'),
      inject: 'body'
    })
  ],
  resolve: {
    
    
    // 自动解析文件扩展名，在引入时自动补全
    extensions: ['.js', '.jsx']
  },
  // 开发服务器
  devServer: {
    
    
    host: '0.0.0.0',
    port: 3000,
    // 自动打开浏览器
    open: true
  }
}

babel.config.js

babel.config.js ファイルを作成し、次の内容をそのファイルにコピーします。

module.exports = {
    
    
  presets: [
    [
      '@babel/preset-env',
      {
    
    
        useBuiltIns: 'usage',
        corejs: 3,
        targets: {
    
    
          chrome: 90
        }
      }
    ],
    ['@babel/preset-react']
  ]
}

Index.html を作成する

パブリックフォルダーを作成し、そのフォルダー内にindex.htmlファイルを作成し、次の内容をコピーします。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>React学习</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

Index.js を作成する

srcフォルダーを作成し、そのファイル内にindex.jsファイルを作成し、次の内容をコピーします。

import React from 'react'
// react18之前的引入方式，不支持异步批处理
// import ReactDOM from 'react-dom'
// 在此模块下面引入的ReactDOM它是支持异步批处理的
import ReactDOM from 'react-dom/client'

// 根组件，根容器 --> 它就是一个标签
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(<App />)

App.jsxの作成

src ファイル内に App.jsx ファイルを作成し、次の内容をそこにコピーします

import React from 'react'

function App() {
  return (
    <div>
      <h1>hello react</h1>
    </div>
  )
}

export default App

package.jsonを変更する

package.json に移動し、次の内容を変更します。

"scripts": {
    
    
    "start": "webpack serve"
  },

スタートアッププロジェクト

npm start

hello React がブラウザページに表示されれば、プロジェクトはビルドされています。

開発環境と本番環境があるのでシーン分割が可能

シーン分割

プロジェクトの下に config フォルダーを作成し、このフォルダー内に 3 つのフォルダーを作成します。base.config.js (基本的なプロジェクト構成)\prod.config.js (運用環境)\dev.config.js (開発環境)

Base.config.js ファイルの内容は次のとおりです。

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

/** @type {import('webpack').Configuration} */
module.exports = {
    
    
  // 打包模式
  mode: 'development',
  // 入口
  entry: './src/index.js',
  // 出口
  output: {
    
    
    path: path.resolve('./dist'),
    filename: 'index.js',
    // 在下一次打包时，删除原来的dist目录
    clean: true
  },
  // 加载器
  module: {
    
    
    rules: [
      {
    
    
        test: /\.jsx?$/i,
        exclude: /node_modules/,
        // 此处没有写配置，则它会打目录下面有的babel.config.js配置文件
        loader: 'babel-loader'
      }
    ]
  },
  // 插件
  plugins: [
    new HtmlWebpackPlugin({
    
    
      template: path.resolve('./public/index.html'),
      inject: 'body'
    })
  ],
  resolve: {
    
    
    // 自动解析文件扩展名，在引入时自动补全
    extensions: ['.js', '.jsx']
  },
  
}

dev.config.js ファイルの内容は次のとおりです。

//需要安装webpack-merge  npm i -D webpack-merge
const {
    
     merge } = require('webpack-merge')
const baseConfig = require('./base.config')
const config = {
    
    
  // 开发服务器
  devServer: {
    
    
    host: '0.0.0.0',
    port: 3000,
    // 自动打开浏览器
    open: true
  }
}

module.exports = merge(baseConfig, config)

prod.config.js ファイルの内容は次のとおりです。

const {
    
     merge } = require('webpack-merge')
const baseConfig = require('./base.config')
const config = {
    
    }

module.exports = merge(baseConfig, config)

package.jsonの内容を変更する

"scripts": {
    
    
    "start": "webpack serve --config ./config/dev.config.js"
  },

プロジェクトを実行する

npm start

実行環境を変更する場合は、package.json ファイルを変更するだけで済みます。

3.2 正式な足場の構築

注: ノード環境は 16.14 以降である必要があります。

//终端中输入命令既可以查看node环境
node --version

**ノード環境の構築について知り、ノードのバージョンをすぐに切り替えたい場合は、**http://t.csdnimg.cn/sNI2T を参照してください。

環境はとても重要です、これが私の環境です

├── [email protected]
├── @testing-library/[email protected]
├── @testing-library/[email protected]
├── @testing-library/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

次の手順を保存したい場合は、私のプロジェクトをプルしてください

Github プロジェクトのアドレス: https://github.com/Lumrnous/Reactcli.git

gitee プロジェクトのアドレス: https://gitee.com/wang-shuaiqi_1_0/reactcli.git

プロジェクトの作成

npx create-react-app 项目名

プロジェクト名はすべて小文字であり、スペースや大文字は使用できません。

プロジェクトを実行する

//进入项目
cd 项目名
//运行
npm start

プロジェクトの作成後、開発を容易にするためにいくつかのファイルを削除する必要があります

公共

favicon.ico\index.html\robots.txt ファイルを公開ファイルに保存します。

Index.html の内容は以下のとおりです。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React学习</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

他のファイルはデフォルト

送信元

App.js\index.js ファイルを保存します。 App.js ファイルを App.jsx に変更します。

App.jsxの内容は以下のとおりです。

function App() {
  return (
    <div className="App">
     <h3>hello world</h3>
    </div>
  );
}

export default App;

Index.js の内容は以下のとおりです。

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

.gitignore

このファイルの最後に、次の内容を追加します

package-lock.json

プロジェクトを実行する

npm start

ページに hello world が表示されたら、成功を意味します。

この時点で、React エンジニアリングプロジェクトの構築全体が完了し、webpack の構築と cli の構築が完了します。

4. 補足

学習サイクルが長すぎるため、学習とノートの管理を容易にするために、後で React 学習コラムを設置します。