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: https://github.com/bfyxzls/vue
2. react: https://github.com/bfyxzls/reactjs

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介紹和入門的文章，以后給再深入介紹！