React -- 腳手架書寫react

1、腳手架工具

react也有不少腳手架工具，經過腳手架工具能夠快速搭建一個項目應用。
官方推薦腳手架
若是你是在學習 React 或建立一個新的單頁應用
Create React App
若是你是在用 Node.js 構建服務端渲染的網站
Next.js
若是你是在構建面向內容的靜態網站
Gatsby

2、create-react-app

安裝

npx create-react-app react-project

注意是npx，不是npm
安裝建立好項目以後，切換到項目就能夠運行項目了
運行

cd react-project
npm start

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

3、項目結構

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'))

4、開發工具

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

5、注意事項

JSX是一種相似javascript的語法，不是HTML語法，因此書寫須要注意一下：
一、樣式類屬性是className，不是HTML的class
二、事件方法是駝峯命名(onClick)，而不是HTML中的onclick
三、必需要閉合標籤

6、提取組件

通常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'))