React -- 腳手架書寫react

一、腳手架工具

react也有很多腳手架工具，通過腳手架工具可以快速搭建一個項目應用。
官方推薦腳手架
如果你是在學習 React 或創建一個新的單頁應用
Create React App
如果你是在用 Node.js 構建服務端渲染的網站
Next.js
如果你是在構建面向內容的靜態網站
Gatsby

二、create-react-app

安裝

npx create-react-app react-project

注意是npx，不是npm
安裝創建好項目之后，切換到項目就可以運行項目了
運行

cd react-project
npm start

接下來就可以在3000的本地端口打開項目了

三、項目結構

public
這個里面放的是index.html根頁面和其他一些靜態資源文件
src
這個文件夾下面存放的就是所有的react代碼
css初始化代碼
現在在src里面的index.js里面創建一個App組件，在里面寫入展示內容
注意：下面看起來有點不一樣，正常應該是React.Component，但是這里直接寫成了Component，原因是將Component作為一個組件引進來了，而不再是React的一個屬性

import {Component} from 'react'
class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>Hello, React!</h1>
      </div>
    )
  }
}

然后就可以將這個組件渲染到root元素里面

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

四、開發工具

React DevTools開發工具類似於Vue DevTools工具，幫助瀏覽器調試react代碼
React DevTools

五、注意事項

JSX是一種類似javascript的語法，不是HTML語法，所以書寫需要注意一下：
1、樣式類屬性是className，不是HTML的class
2、事件方法是駝峰命名(onClick)，而不是HTML中的onclick
3、必須要閉合標簽

六、提取組件

一般react項目中index.js作為主組件，其余所有組件都是引入到這個主組件，所以需要將App組件從index.js里面分離出去
App.js

import React, { Component } from 'react'

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

export default App

index.js

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