create-react-app-入门

create-react-app

FaceBook官方发布了一个无需配置，用于快速构建开发环境的脚手架工具:https://github.com/facebook/create-react-app

1.首先基于npm在全局安装create-react-app

$ npm install -g create-react-app

2.在指定目录中创建一个react项目工程

$ create-react-app my-app

my-app是自己设置的项目名称

3.进入到指定的项目文件，启动项目

$ cd my-app
$ npm run start 或者 $ yarn start(前提是在全局安装了yarn)

生产的结构目录

my-app
  |--build      //构建目录，遵循发布系统规范
  |   |-- index.html    //静态页面
  |   |-- static        //资源文件
  |
  |-- node_modules      //项目组件文件夹：所有安装的组件都在这
  |
  |--src                //源码目录
  |   |--index.js       //入口文件(还生成了其它的文件，但是没啥用，我们可以直接的删除掉)
  |
  |--public             //静态页面目录
  |   |--index.html     //主页面(还生成了其它的文件，但是没啥用，我们可以直接的删除掉)
  |
  |-- .gitignore        //git提交的忽略文件，我们一般还需要再手动增加.idea(通过webstorm编辑工具进行开发，生成的文件)
  |--package.json   //项目依赖项及项目基础信息
  |--README.md      //项目描述
  |-- ...

生成的package.json

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {  //=>生产依赖项
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "1.1.0"
  },
  "scripts": {   //=>可执行脚本
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

/*
 * 可执行脚本注释:
 *   $ npm run start  启动服务，自动编译项目，可以实现边开发，边自动编译刷新，看到最新开发的效果
 *   
 *   $ npm run build  把项目整体进行编译，最后再bulid目录中生成项目编译后的文件，我们上传服务器的就是这些文件
 *   
 *   $ npm run test   使用Jest作为测试运行程序（不常用） 
 *    
 *   $ npm run eject  下文具体介绍使用
 *   
 *   当然以上操作也可以基于yarn来完成
 */

4.安装react-router-dom

$ npm i react-router-dom -s

在package.json的dependencies既可以看到