唉 一點點學(xué)咯...

react 文檔 中文的！本文參考https://www.taniarascia.com/getting-started-with-react/大伙可以去看原版。

• 創(chuàng)建項目（前提環(huán)境啥的就不贅述啦 npm）

  1. npx create-react-app react-demo 安裝react環(huán)境 及創(chuàng)建項目 react-demo。 (npx: npm 5.2.0后自帶了npx功能，npx主要就是依賴不安裝在本機也可以使用比如 create-react-app ; npx會在本機查找是否全局安裝過此依賴沒有則安裝最新的存在的話就使用本地。具體使用方法請參考阮一峰老師的文章)
  2. cd react-demo => npm start => 瀏覽器打開 http://localhost:3000/ ok 初始新建完成。

• 項目目錄介紹 參考技術(shù)胖大佬(里面很多大佬錄制視頻哦點贊)

  1. README.md 項目說明 package.json webpack 配置項目包管理。package-lock.json 鎖定安裝時的版本號，以保證其他人再npm install 時大家的依賴能保證一致。gitignore這個是git的選擇性上傳的配置文件node_modules 項目的依賴包。public 公共文件，里邊有公用模板和圖標。src主要代碼編寫文件。
  2. public=>mainifest.json:移動端配置文件 。 src=>serviceWorker.js: 用于寫移動端開發(fā)的，PWA必須用到這個文件，有了這個文件，就相當(dāng)于有了離線瀏覽的功能。

話不多說，先來hello world！ 新知識第一步

• 修改下src目錄下文件 將除 index.js index.css其他文件刪除 編輯index.css文件 將Primitive CSS替換進去。index.js修改如下:

import React, { Component } from 'react'
//等同 上方屬于es6 解構(gòu)賦值
//import React from 'react'
//const Component = React.Component

import ReactDOM from 'react-dom'
import './index.css'
class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Hello, World!</h1>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

到此在 localhost:3000 應(yīng)該就可以看見效果了

react中的幾乎所有內(nèi)容都由組件組成，組件可以是類組件或簡單組件。 咱開始第一個組件 src 目錄下創(chuàng)建 App.js

• src/index.js 如下：

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

ReactDOM.render(<App />, document.getElementById('root'))

• src/App.js ：

import React,{Component} from 'react';

class App extends Component{
    render(){
        return(
            <div className="App">
                <h1>Hello React!</h1>
            </div>
        )
    }
}
export default App

保存時 會發(fā)現(xiàn)跟上面一樣 除了文字。

• 類組件
  1. 新建src/Table.js
src/App.js：

import React,{Component} from 'react';
import Table from './Table';

class App extends Component{
    render(){
        return(
            <div className="container">
                <Table />
            </div>
        )
    }
}
export default App

src/Table.js:

import React, { Component } from 'react'

class Table extends Component {
  render() {
    return (
      <table>
        <thead>
          <tr>
            <th>Name</th>
            <th>Job</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Charlie</td>
            <td>Janitor</td>
          </tr>
          <tr>
            <td>Mac</td>
            <td>Bouncer</td>
          </tr>
          <tr>
            <td>Dee</td>
            <td>Aspiring actress</td>
          </tr>
          <tr>
            <td>Dennis</td>
            <td>Bartender</td>
          </tr>
        </tbody>
      </table>
    )
  }
}

export default Table

--end--