React我的入門總結《一》

時間 2019-12-05

標籤 react 我的入門總結欄目 React 简体版

原文原文鏈接

前言

首先我說說我爲何學React，React能夠說是三大框架中思想最爲先進的一款，在國內Vue雖然很火，可是Vue也開始引入了React的一些思想，好比虛擬DOM，接着Vue3.0還會引入JSX，React很是注重組件化和複用性，學習React能夠比之前更熟悉一些架構知識。

工做時間也有3個多月了，該學會寫東西總結了，最近利用工做時間學習React，今天又有空寫一下總結，怕過了一段時間忘記，這篇文章我是看了 React小書總結下來的，若是有人跟我同樣是React入門的話，建議去React小書學起，從腳手架學起真的是快不少，咱們老師教咱們學東西首先要學會用，再學原理。

這篇文章不適合大神看，若是有大神想指導能夠在下面發佈評論。

概念

React是個幫你構建頁面UI的庫，他至關於MVC裏面的View，React將咱們界面分紅各個獨立的小塊，每一個小塊都是一個組件，而這些組件能夠互相嵌套丶結合，而後就造成了頁面css

腳手架安裝(Create-react-app)

因爲React要配合其餘工具和庫輔助，例如編譯須要babel，組織代碼須要redux等第三方狀態管理工具，寫單頁面應用須要應用到React-router，這也至關於React的全家桶。html

使用npm安裝Create-react-app

npm install -g create-react-app前端
使用create-react-app建立項目

create-react-app my-app
node

我第一次使用時報了一個這樣的錯誤，而後我上網查才知道是使用腳手架建立項目時要下載許多依賴文件，而後它是默認使用npm下載的，這時候主要將npm切換成cnpm就能夠解決了。
- npm config set registry https://registry.npm.taobao.org //將npm切換成cnpm
- 還有一解決方法就是找到resource下面的app裏面的extensions打開後看到有git文件夾，刪除，重啓。
建立完成以後而後cd到項目根目錄而後npm start就能夠啓動項目了react
項目結構

建立完成以後cd到建立的目錄而後能夠看到腳手架幫咱們建立的結構git

node_modules public scripts src

依賴文件靜態庫項目啓動配置開發目錄

開發時候在src目錄上開發就好了，若是要查看項目配置，能夠輸入npm run eject把config目錄暴露出來，這個是默認隱藏的，你也能夠在node_modules目錄上找到，這個目錄是項目的配置。若是運行npm run eject報錯的話，把代碼儲存到本地就好了git add .，而後git commit -m ''，接着從新運行指令，這執行是不可逆的。npm

在public有個index.html這是整個項目的頁面，以後咱們要把寫好的東西渲染到裏面去。
src能夠看到一個index.js，因爲寫React幾乎都是組件，而index通常用來渲染其餘組件redux

node_modules	public	scripts	src
依賴文件	靜態庫	項目啓動配置	開發目錄

編寫React

首先咱們把index.js的代碼改爲這樣再看看效果數組

import React, { Component } from 'react' // 寫React必需要引入這兩樣東西
import ReactDOM from 'react-dom' // 組件不須要引入，他只有一個做用，就是渲染DOM
import './index.css' // 能夠直接引入css或者是sass，也能夠引入圖片
<!-- 使用組件繼承Component類 -->
class Header extends Component {
  render () { // render方法把裏面東西jsx返回
    return (
      <!-- jsx -->
      <div>
        <h1>React大法好</h1>
      </div>
    )
  }
}
<!-- 渲染出去 -->
ReactDOM.render(
  <Header />,
  document.getElementById('root')
)
複製代碼

JSX

JSX 是 JavaScript 語言的一種語法擴展，長得像 HTML，但並非 HTML。瀏覽器

平時咱們寫html是這樣寫的
```
<div class='box' id='content'>
      <div class='title'>Hello</div>
      <button>Click</button>
    </div>
複製代碼
```
若是咱們用JS對象來表示的話
```
{
  tag: 'div',
  attrs: { className: 'box', id: 'content'},
  children: [
    {
      tag: 'div',
      arrts: { className: 'title' },
      children: ['Hello']
    },
    {
      tag: 'button',
      attrs: null,
      children: ['Click']
    }
  ]
}
複製代碼
```
沒錯，其實JSX也至關於JS對象，React也會根據這樣編譯，轉化爲HTML結構以後就能夠拿去構建真正的DOM，這是最後那段渲染DOM所作的事情
```
ReactDOM.render(
  <Header />,
  document.getElementById('root')
)
複製代碼
```
這是整個過程流程圖，單獨把ReactDOM抽出來的緣由是由於咱們能夠渲染到Canvas或者轉化原生App(ReactNative)
組件render方法

React中一切皆爲組件，寫組件的時候通常都須要繼承React.js的Component，這個方法必須返回一個JSX元素，而返回並列JSX元素是不合法的
```

render() {
    return {
        <div>one</div>
        <div>two</div>
    }
}
複製代碼
```
必需要用一個外層元素包起來，不能有多個外層元素
```

render() {
    return {
        <div>
            <div>one</div>
            <div>two</div>
        </div>
    }
}
複製代碼
```
- 表達式插入
  
  表達式能夠插入變量，還能夠計算,還能夠條件返回，而且能夠寫函數，render會把真實的內容返回，特別的靈活
```
render() {
    const word  = 'word'
    const isGoodWord = true
    return(
        <div>
            <h1>HELLO {word}</h1> // 變量
            <h1>{1 + 2}</h1> // 計算
            <h1>{(function(){ return 'React' })()}</h1> // 函數
            // 條件返回
            {  
               isGoodWord 
               ? <span>好文章</span>
               : <span>壞文章</span>
            }
        </div>
    )
}
複製代碼
```
  表達式不只能夠插入標籤內部，還能夠插入屬性
```
render() {
    const className  = 'header'
    return(
        <div className={ className }></div>
    )
}
複製代碼
```
  因爲class是JS的關鍵字，React.js換成了className，還有一個就是for換成了htmlfor