序文
この記事では、scaffoldを使用してreactプロジェクトを構築する方法を説明します。新しく作成されたreactプロジェクトの場合、プロジェクトディレクトリ内のファイルは何をし、それらの機能は何ですか？以下を見てみましょう〜
足場に反応する
- 糸を使用してcreate-react-appをローカルにインストールします。
npm i -g yarn #全局安装yarn
yarn -v #查看yarn版本号
- npxを使用して関連パッケージをローカルにインストールする方法
yarn init -y #初始化项目
yarn add -D create-react-app #使用本地安装
npx create-react-app --version #查看脚手架版本
npxは、現在の依存関係パッケージ内の実行可能ファイルを自動的に検索します。ファイルが見つからない場合は、環境変数に移動して検索します。それでも見つからない場合は、インストールに役立ちます。
- npxでreactプロジェクトを作成する
npx create-react-app react-demo1
ここでは、create-react-appをグローバルにインストールする必要はありません。npxが実行できます。
- create-react-appをグローバルにインストールします。ここで見てみましょう
npm i -g create-react-app // 全局安装
create-react-app --version 查看版本号
create-react-app react-demo // 初始化项目
npm run イジェクト/ヤーンイジェクトは、すべての依存ファイルと対応する依存関係（webpack、babelなど）をプロジェクトにコピーします。これは一方向の操作です。一度イジェクトされると、npmrunejectの操作は元に戻せません。元のreactプロジェクトは、webpackに関連するすべての構成を非表示にし、ejectコマンドを実行した後、関連するすべての構成アイテムを公開します。
図に示すように、プロジェクトは正常に作成されました。
npmstartを使用してプロジェクトを実行します。
プロジェクトディレクトリ
プロジェクトが正常に作成されたら、プロジェクトのディレクトリを見てみましょう。
--node_modules 项目依赖文件
--public 静态资源目录
目录里的index.html 是项目的入口文件
manifest.json 缓存文件,即使没有网,离线了也能够打开页面
robots.txt 给搜索引擎看的
--src 项目源码核心
index.js 是项目的入口
reportWebVitals.js 前端性能检测工具
setupTests.js 单元测试的
--package.json 项目配置文件
パブリックディレクトリでは、ファイルindex.htmlとアイコンfavicon.icoのみを保持できます。srcディレクトリでは、他のファイルを削除して、index.jsとApp.jsのみを保持できます。現時点では、プロジェクトは非常に単純です。次のクラスコンポーネントを使用して作成することもできます。
// import React from 'react';等同于下面的写法
import ReactDOM from 'react-dom';
import App from './App'
ReactDOM.render(
<App />,
document.getElementById('root')
);
App.js
import React, {
Component } from 'react'
export class App extends Component {
render() {
return (
<div>
<h1>
hello react
</h1>
</div>
)
}
}
export default App
このようにして、reactプロジェクトディレクトリの最も単純なバージョンを取得し、それを実行して以下を表示します。
