[Reactファミリーバケット]Reactスキャフォールディングを理解して使用し、Reactプロジェクトを作成します

1.create-react-appを使用してReactスキャフォールディングを初期化します

1.反応する足場の紹介

1.役割は、プログラマーがテンプレートプロジェクトをすばやく構築できるようにすることです。2。Reactは、
reactプロジェクトを作成するためのスキャフォールディングライブラリを提供します。create-react-app3.
プロジェクトの全体的な技術アーキテクチャはreact + webpack + es6 + eslintです。4
。機能:モジュール化、コンポーネント化、エンジニアリング

2.プロジェクトを作成して開始します

npmリポジトリをグローバルにインストールします。npmi-g create-react-app
create-react-appコマンドを使用して、新しいプロジェクトを作成します。create-react-apphello-react
プロジェクトフォルダーに移動します。cdhello-react
プロジェクトを開始します。 :npm start

ここに画像の説明を挿入

3.ファイルディレクトリの説明

ここに画像の説明を挿入

ここに画像の説明を挿入

2.プロジェクトドキュメントを簡素化する

(1)删除public和src文件夹里的内容
(2)在public中新建index.html文件

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- %PUBLIC_URL%表示public文件夹的路径 -->
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <!-- 开启理想视口,用于做移动端网页的适配 -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

(3)安装vscode扩展:ES7+ React/Redux/React-Native snippets

(4)在src文件夹下新建App.jsx或者App.js文件,输入快捷命令:rcc

//App.js
//输入rcc 或者rfc ,快捷生成函数式或类式组件
import React, {
    
     Component } from 'react';

export default class APP extends Component {
    
    
  render() {
    
    
    return <div>Hello React</div>;
  }
}

(5)在src文件夹下新建index.js文件

//index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

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

(6)在终端使用npm start运行
ここに画像の説明を挿入

上記は、Reactスキャフォールディングを使用してReactプロジェクトを作成する内容です。「ReactFamilyBucket」列に注意してください
の通常のプロジェクトに共通する問題筆記試験の知識を共有し、CSDNであなたと面接し、一緒に進歩します。さあ。

おすすめ

転載: blog.csdn.net/weixin_46318413/article/details/122607873
おすすめ