从零一起学react(7)---Create React App简介

前言

还记得第一篇文章中安装的Create React App吗，如果当时没有安装，可以使用如下代码安装：

npm install -g create-react-app
create-react-app my-app
//create-react-app能够帮你自动创建基于Webpack+ES6的最简易的React项目模板
cd my-app
npm start

简单使用

Create React App的使用我也不算非常了解，这里先进行简单介绍，至少知道该如何使用。
安装完成后，输入命令npm start可以启动配置，这样自动会进入开发模式，此时热替换是处于自动激活状态，你也可以实时地在界面或者命令行中看到错误提示。

当你开发完成，可以输入npm run build来编译得到生产环境，此时代码会被编译到build目录下，此时会自动将整个应用打包发布，它会自动使用Webpack控件进行优化与压缩。

我们可以看到如下的目录结构：

my-app/
  node_modules/           //依赖的包
  public/
    index.html              //页面模板
    favicon.ico
    manifest.json
  src/              //开发源码
    App.css
    App.js          //
    App.test.js
    index.css
    index.js        //js入口文件
    logo.svg
    registerServiceWorker.js
  package.json
  package-lock.json
  README.md
  build/            //如果运行了`npm run build`

目前我们只看index.js和App.js两个文件即可。打开这两个文件，我们基本上可以完全看懂。
在这里，我们用import引入其他文件，
如引入库文件import React from 'react';
引入css文件import './index.css';
引入其他js文件中的组件import App from './App';

App.js文件中最后export是为了导出App组件。index.js中获取id为root，可以在public/index.html文件中找到或修改。

现在我们可以把之前学习的代码在Create React App中进行尝试了。