react基础（一）

写在前面的话

react 作为目前前端的主流框架，各大公司也都在使用。react是一套基于视图层的框架，核心库只关注于视图层，跟vue一致（vue参照了react）。react专注于组件化开发，使用jsx语法（javascript xml – 类xml语法—-要求所有写的视图代码必须包含在同一个父级标签中—-vue中的template），内涵虚拟DOM（ 所有内容并不是一开始就写到了index.html中，使用jsx语法构建，最后渲染到了index.html页面中），使用diff算法（ 状态的改变，会引起视图的二次渲染，比较状态树变化的算法），会比vue更加适合团队开发模式，以至于react成了一项必备技能。我个人其实是一直在使用vue，不过为了迎合市场也开始了react的学习之路，接下来我会将react、redux、react-router一步一步来进行整理。

01-构建项目

01-1 create-react-app 快速构建项目

creat-react-app优点

• 无需配置：官方的配置堪称完美，几乎不用你再配置任何东西，就可以上手开发项目。
• 高集成性：集成了对React，JSX，ES6和Flow的支持。
• 自带服务：集成了开发服务器，你可以实现开发预览一体化。
• 热更新：保存自动更新，让你的开发更简单。
• 全兼容性：自动处理CSS的兼容问题，无需添加-webkit前缀。
• 自动发布：集成好了发布成品功能，编译后直接发布，并且包含了sourcemaps功能。

creat-react-app的安装

windows系统下：

npm install -g create-react-app

创建react项目

安装完成后，就可以使用create-react-app来生成react项目的项目目录– projectName：项目名称

create-react-app projectName

启动项目

然后进入到项目内 通过npm来安装项目依赖

npm start

01-2 generator-react-webpack 快速构建项目

我也是第一次使用它，各种百度后发现它其实是基于webpack构建的，只不过是进一步完善了webpack，它可以支持ES6，并且集成了Babel-Loader等。简单来说使用它之后省去了我们自己手动配置webpack,对于我这种不熟悉webpack配置的小白来说极其方便。

generator-react-webpack优点

• 基于webpack构建，可以很容易的配置自己需要的webpack。
• 支持ES6，集成了Babel-Loader。
• 支持不同风格的CSS（sass，less，stylus）。
• 支持PostCSS转换样式。
• 集成了esLint功能。
• 可以轻松配置单元测试，比如Karma和Mocha
• 包含热加载

generator-react-webpack的安装

在全局安装yeoman 和 generator-react-webpack

npm install -g yo
npm install -g generator-react-webpack

初始化项目目录，使用generator-react-webpack生成项目目录

mkdir react_demo
cd react_deom
yo react-webpack

项目运行

npm start

react项目目录介绍