React脚手架

由于现在前端项目越来越复杂。原来是直接饮用CSS文件，现在有less，sass文件，通过预处理器编译成css文件。现在js都是模块化开发，成千上百的js文件之间的引用关系也是很复杂的。

​ 因为项目的复杂性所以前端三大框架都引入了脚手架，帮组开发者快速生成基本的项目结构，开发者在此基础上进行自己的项目开发。前端三大框架的脚手架工具如下：

• Vue的脚手架：vue-cli
• Angular的脚手架：angular-cli
• React的脚手架：creat-react-app

安装脚手架

• 首先，需要安装node环境

  可以在node的官网下载并直接安装（傻瓜式），下一步下一步即可。

Snip20200903_6.png

安装完成之后需要在命令行中查看是否安装成功。输入node --version 和 npm --sersion

Npm 全称 Node Package Manager， 即node包管理器；主要是管理项目开发中所需要的包，比如axios，redux，react， react-dom等。

另外还有一种包管理器，就是yarn。React脚手架默认使用yarn；可以通过npm install yarn -g完成安装。同样需要在终端中查看是否安装成功，输入yarn --version

• Yarn 和 Npm命令对比

npm	yarn
npm install	yarn install
npm install [package]	yarn add [package]
npm install --save [package]	yarn add [package]
npm install --save-dev [package]	yarn add [package] [--dev/-D]
npm rebuild	yarn install --force
npm uninstall [package]	yarn remove [package]
npm uninstall --save [package]	yarn remove [package]
npm uninstall --save-dev [package]	yarn remove [package]
npm uninstall --save-option [package]	yarn remove [package]
npm cache clean	yarn cache clean
rm -rf node_modules && npm install	yarn upgrade

最后通过 npm install -g create-react-app 命令安装React脚手架，至此脚手架工具就安装好了。

创建React 项目

通过create-react-app 项目名 创建项目，注意，项目名中不能有大写字母

create-react-app my-project

然后进入my-project目录下: cd my-project， 再执行yarn start命令。

项目的目录结构如下：

开始写代码

我的项目文件（js)都放在src目录下，按照你自己的方式创建目录模块化开发。

src/index.js中已经引入了App组件，当然也可以更改为自己创建的组件。

我们可以使用index中默认的代码，然后再App组件中编写自己的代码。

1. 创建Header部分

   import React, { Component } from 'react'
   
   class Header extends Component {
     render() {
       return (
         <div>
           <h2>头部内容</h2>
         </div>
       );
     }
   }
   
   export default Header;
   

2. 创建Content部分

   import React, { Component } from 'react'
   
   class Content extends Component {
   
     render() {
       return (
         <div>
           <h2>中间部分，内容区域</h2>
         </div>
       );
     }
   }
   
   export default Content;
   

3. 创建Footer部分

   import React, { Component } from 'react'
   
   class Footer extends Component {
     render() {
       return (
         <div>
           <h2>底部内容</h2>
         </div>
       );
     }
   }
   
   export default Footer;
   

4. 在App.js中引用，并使用这三个组件

   import React from 'react';
   import './App.css';
   
   import Header from './Head'
   import Footer from './Footer'
   import Content from './Content'
   
   class App extends React.Component {
     render() {
       return (
         <div>
           <Header />
           <Content />
           <Footer />
         </div>
       )
     }
   }
   export default App;