React簡介

React是一個用于構(gòu)建用戶界面的JavaScript庫。
React主要用于構(gòu)建UI，很多人認為React是MVC中的V（視圖）。
React起源于Facebook內(nèi)部的項目，用來架設(shè)Instagram網(wǎng)站。
React擁有較高的性能，代碼邏輯簡單，因此越來越多的人開始關(guān)注并使用它。

React特點

1.聲明式設(shè)計 ?React采用聲明范式，可以輕松描述應(yīng)用。
2.高效 ?React通過對DOM的模擬，最大限度地減少與DOM的交互。
3.靈活 ?React可以與已知的庫或框架很好地配合。
4.JSX ? JSX 是 JavaScript 語法的擴展。React 開發(fā)不一定使用 JSX ，但我們建議使用它。
5.組件 ? 通過 React 構(gòu)建組件，使得代碼更加容易得到復(fù)用，能夠很好的應(yīng)用在大項目的開發(fā)中。
6.單向響應(yīng)的數(shù)據(jù)流 ? React 實現(xiàn)了單向響應(yīng)的數(shù)據(jù)流，從而減少了重復(fù)代碼，這也是它為什么比傳統(tǒng)數(shù)據(jù)綁定更簡單。

學(xué)習(xí)React我們需要以下 的知識：HTML CSS JavaScript

首先是React的開發(fā)環(huán)境的搭建

在這里由于是初學(xué)者，所以我在這里使用的是官方的方法：
Create React App 是開始構(gòu)建新的React單頁面的最佳途徑。它可以幫我們配置開發(fā)環(huán)境，以便我們可以使用最新的 JavaScript 特性，還能提供很棒的開發(fā)體驗，并為生產(chǎn)環(huán)境優(yōu)化我們的應(yīng)用。
在開始之前我們首先要安裝nodejs，這是一個管理
首先我先進入Windows命令行： （Win + R）鍵并輸入cmd

image.png

image.png

image.png

進到剛剛我們創(chuàng)建好的項目文件目錄下：

image.png

node_moudules

是項目依賴包存放位置。當我們運行npm install安裝package.json中的依賴包是，該文件夾會自動創(chuàng)建，所有的依賴包會安裝到該文件夾中。

public

主要的作用是html入口文件的存放。當然我們也可以存放其他公用的靜態(tài)資源，如圖片，css等。其中的index.html文件就是我們的項目入口html文件。

src

組件的存放目錄。在create-react-app 創(chuàng)建的項目中，每一個單獨的文件都可以被看成一個單獨的模塊，單獨的image，單獨的css，單獨的js等，而所有的組件都存在src目錄中，其中index.js是js的入口文件。

下面介紹如何引入antd-design組件庫：

安裝和初始化

我們需要在命令行中安裝 create-react-app 工具，你可能還需要安裝 yarn。
$ npm install -g create-react-app yarn
我們其實可以不適用yarn的，但是官方向我們推薦了yarn,所以我們還是按照官方的方法去做。
接下來我們新建一個項目。
$ create-react-app demo
工具會自動初始化一個腳手架并安裝 React 項目的各種必要依賴，如果在過程中出現(xiàn)網(wǎng)絡(luò)問題，請嘗試配置代理或使用其他 npm registry。

然后我們進入項目并啟動。

$ cd demo
$ yarn start

此時瀏覽器會訪問 http://localhost:3000/ ，看到Welcome to React
的界面就算成功了。就是剛剛我們成功創(chuàng)建項目并啟動之后的界面，接下來我們要做的就是引入antd組件庫。

引入antd

現(xiàn)在從yarn或npm安裝并引入antd。
$ yarn add antd
修改 src/App.js，引入 antd 的按鈕組件。

import React, { Component } from 'react';
import Button from 'antd/lib/button';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <Button type="primary">Button</Button>
      </div>
    );
  }
}

export default App;

修改 src/App.css，在文件頂部引入antd/dist/antd.css。

@import '~antd/dist/antd.css';

.App {
  text-align: center;
}

...

接下來我們要做的就是啟動我們的項目：

$ cd demo
$ yarn start

等待瀏覽器成功打開并顯示如下畫面之后就表示我們成功地引入了antd組件庫。

image.png

個人總結(jié)

圖片發(fā)自簡書App