React.js

了解react.js

    React 是一个用于构建用户界面的 JAVASCRIPT 库。

React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。
React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。
React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

React特点

    1.声明式设计 −React采用声明范式，可以轻松描述应用。
    2.高效 −React通过对DOM的模拟，最大限度地减少与      DOM的交互。
    3.灵活 −React可以与已知的库或框架很好地配合。
    4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
    5.组件 − 通过 React 构建组件，使得代码更加容易得到        复用，能够很好的应用在大项目的开发中。
    6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

React 安装

    1. React 的版本为 15.4.2，你可以在官网 [http://facebook.github.io/react/](http://facebook.github.io/react/) 下载最新版。
    2.通过 npm 使用 React
          $npm install -g cnpm --registry=https://registry.npm.taobao.o
          $npm config set registry https://registry.npm.taobao.org
      这样就可以使用 cnpm 命令来安装模块了：
          $ cnpm install [name]    

使用 create-react-app 快速构建 React 开发环境

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

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

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

安装成功后.png

项目的目录结构如下：

  my-app/
  README.md
  node_modules/
  package.json
  .gitignore
  public/
    favicon.ico
    index.html
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

尝试修改 src/App.js 文件代码：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
 
class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>欢迎观看颜文字的简书</h2>
        </div>
        <p className="App-intro">
          你可以在 <code>src/App.js</code> 文件中修改。
        </p>
      </div>
    );
  }
}
 
export default App;

修改后，打开 http://localhost:3000/ （一般自动刷新），输出结果如下：

修改后.png

                            联系邮箱:1095541234@qq.com