vue和react的介绍

这几年前端框架发展的不错，出了不少框架，像微软自己的knockoutjs,angular,vue和最近比较火的react等，之前我有写过前两者的相关文章，今天主要说一下后两者。

介绍

1. 是一个用于构建用户界面的 javascript 库。
2. 主要用于构建ui，很多人认为 react 是 mvc 中的 v（视图）。
3. 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

特点

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

大叔的vue和react开源项目

1. vue:
2. react:

helloworld程序

vue hello world

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <div id="app">
    {{ message }}
  </div>
<script>
  var app = new vue({
    el: '#app',
    data: {
      message: 'hello vue!'
    }
  })
</script>

react hello world

// 安装环境
npm install -g cnpm --registry=https://registry.npm.taobao.org
npm config set registry https://registry.npm.taobao.org
cnpm install -g create-react-app
// 建立react项目
npx create-react-app my-app
cd my-app
npm start
// 修改app.js文件，加入个性化元素
// app.js是程序的入口，在这里面可以引用其它的模块（组件component）
import react, { component } from "react";
import "./app.css";

class app extends component {
  constructor(props) {
    super(props);
    this.state = {
      total: 0,
      next: null,
      operation: null
    };
  }

  render() {
    return (
      <div classname="component-app">
        <h1>hello world!</h1>
        <p>总数：{this.state.total}</p>
      </div>
    );
  }
}

export default app;

本文章主要是一个vue和react介绍和入门的文章，以后给再深入介绍！