React 初探（八）

概述

如何快速搭建一个 React 项目？React 项目中各个文件夹的作用？以上两个问题是这次的重点。

快速搭建一个 React 项目

首先需要安装 create-react-app

npm i -g create-react-app

之后使用 create-react-app 创建 react 应用

create-react-app my-app

cd my-app
yarn start 

之后便打开了一个 3000 端口的页面，这就是我们得到的第一个 react 项目。

React 项目中各个文件夹作用

当打开刚刚的 react 项目，来看一下目录

• README.md -> 对于项目的介绍
• package.json -> 定义项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等）。npm install 命令根据这个配置文件自动下载所需要的模块，也就是配置项目所需要的运行和开发环境( )
• yarn.lock -> 此文件会记录安装的每个依赖的版本
• .gitignore -> 要忽略的文件，这些文件将不会上传到 github
• src -> 即 source，源代码
• public -> 静态资源，该目录下的资源不会被 webpack 处理，他们会被拷贝到 build 文件夹下
• build -> 打包之后的代码
• node_modules -> 存放 npm 安装的工具包或模块

src 目录下的结构

• index.js -> 入口文件，将整个程序启动起来
• App.js -> 写主要逻辑的文件
• serviceWorker.js -> 用于在生产环境中为用户在本地创建一个 service worker 来缓存资源到本地，提升应用的访问速度

index.js 文件

import React from 'react';   // 引入 React
import ReactDOM from 'react-dom';   //  引入 react-dom
import './index.css';     // 引入 css
import App from './App';    // 引入 App
import * as serviceWorker from './serviceWorker';

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

serviceWorker.unregister();