初识React

react.png

React的核心思想是：封装组件，再由组件构成复杂页面，同时各个组件维护自己的状态和UI，当状态发生变化，自动重新渲染整个组件。

React 是一个用于构建用户界面的JavaScript库，它起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。

React主要用于构建UI，而且性能出众，代码逻辑简单，所以我打算好好研究一下，既满足了自己的好奇心，也提高一下自己的技术水平。

在学习的过程中我参考了阮大大的React教程和React 官方文档

React特点

1. 声明式设计 : 以声明式编写UI，可以让你的代码更加可靠，且方便调试
2. 高效 : React通过对DOM的模拟，最大限度的减少与DOM的交互
3. 灵活 : 提供了可以调用其他第三方框架或库的接口
4. JSX : JSX是JavaScript语法的扩展，建议开发过程中使用它
5. 组件 : 通过React构建拥有各自状态的组件，再由组件构成更加复杂的界面，代码更加容易得到复用
6. 单向响应的数据流 : React实现了单向响应的数据流，减少了重复代码

创建新应用

1.React可以直接下载使用，下载包中提供了很多学习的实例，可以去官网下载最新版

2.使用create-react-app构建React开发环境(需要安装node.js，另一系列文章中会提到node的安装，大家也可自行搜索安装方法)

create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境
create-react-app 自动创建的项目是基于 Webpack + ES6

执行以下命令创建新项目:

---

npm install -g create-react-app

create-react-app my-app

cd my-app
npm start

---

在浏览器中打开 http://localhost:3000/ ，结果如下图所示：

image.png

项目的目录结构如下所示 :

project.png

尝试修改src/App.js文件里的代码 :

App.js.png

修改之后再打开 http://localhost:3000/ (一般会自动刷新), 会发现输出结果已经改变：

browser.png

当你准备好将其部署到生产环境中时，运行 npm run build 将会在 build 文件夹中创建一个优化好的应用

该文章同步在:
CSDN Blog: http://blog.csdn.net/levinhax/article/details/76651535
Github Page: https://github.com/levinhax