React簡(jiǎn)介

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

React特點(diǎn)

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

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

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

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

image.png

image.png

image.png

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

image.png

node_moudules

是項(xiàng)目依賴包存放位置贰盗。當(dāng)我們運(yùn)行npm install安裝package.json中的依賴包是许饿，該文件夾會(huì)自動(dòng)創(chuàng)建，所有的依賴包會(huì)安裝到該文件夾中舵盈。

public

主要的作用是html入口文件的存放陋率。當(dāng)然我們也可以存放其他公用的靜態(tài)資源球化，如圖片，css等瓦糟。其中的index.html文件就是我們的項(xiàng)目入口html文件筒愚。

src

組件的存放目錄。在create-react-app 創(chuàng)建的項(xiàng)目中菩浙，每一個(gè)單獨(dú)的文件都可以被看成一個(gè)單獨(dú)的模塊锨能，單獨(dú)的image，單獨(dú)的css芍耘，單獨(dú)的js等，而所有的組件都存在src目錄中熄阻，其中index.js是js的入口文件斋竞。

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

安裝和初始化

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

然后我們進(jìn)入項(xiàng)目并啟動(dòng)拗小。

$ cd demo
$ yarn start

此時(shí)瀏覽器會(huì)訪問 http://localhost:3000/ ，看到Welcome to React
的界面就算成功了樱哼。就是剛剛我們成功創(chuàng)建項(xiàng)目并啟動(dò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;
}

...

接下來我們要做的就是啟動(dòng)我們的項(xiàng)目：

$ cd demo
$ yarn start

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

image.png

個(gè)人總結(jié)

圖片發(fā)自簡(jiǎn)書App