React 学习笔记-01

使用 Facebook 官方推出的 脚手架工具 create-react-app 零配置 快速搭建react 开发环境.

npm install -g create-react-app

---

使用create-react-app 创建项目

create-react-app [projectName]
cd projectName
npm start //启动项目

启动完成 打开http://localhost:3000/ 查看

---

创建完成后是看不到任何 webpack 配置项的,需要

npm run eject

弹出配置项.

Note: this is a one-way operation. Once you eject, you can’t go back!
注意:这是单向操作。一旦你弹射出来，你就不能回去了!
If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
如果您不满意构建工具和配置选项，您可以随时弹出。这个命令将从您的项目中删除单个构建依赖项。它将复制所有的配置文件和传递性依赖项(Webpack、Babel、ESLint等)，这样您就可以完全控制它们。除了eject之外的所有命令都仍然有效，但是它们会指向复制的脚本，以便您可以调整它们。

完成后目录结构如下:

image.png

打开package.json 添加 proxy字段 开发环境下dev-server将会自动转发请求：

"proxy":"http://localhost:8080"

---

安装 sass/less 预处理器

npm install --save-dev less

打开 webpack.config.dev.js

exclude: [/\.js$/, /\.html$/, /\.json$/, /\.less$/],
//添加less-loader
{
  test: /\.less$/,
  loader: 'style!css!postcss!less'
},

antd的引入及配置

首先安装 antd

npm install --save antd