React學習07_腳手架基本使用

使用 create-react-app 創建一個項目

1. 全局安裝 create-react-app npm install -g create-react-app
2. 在一個空文件夾中打開cmd窗口 輸入 create-react-app 項目名稱
3. cd 項目名 入項目中，使用npm start 測試是否創建成功
   注意: 這裏很可能會報webpack或者webpack-dev-server版本不符合，我們只需要卸載舊版本，安裝報錯信息中的那個版本

目錄結構

以下爲比較重要且常用的

• node_modules ------ 第三方依賴模塊文件夾
• public
  • index.html ------主頁面
• src：
  • assets目錄(自己創建) ------ 放置靜態資源
  • components目錄(自己創建) ------ 放置組件
  • App.js ------ 主組件,所有組件的老爹(主要用於全局配置)
  • index.js ------ 入口文件，在這裏獲取dom節點並給渲染
• README.md 你懂的
• package.js

基本使用

1. 創建一個組件
   1. 在components 中 創建 Demo.js
   2. 引入對應模塊，向外暴露該組件(以下爲基本模板 在vscode中，可以使用 rcc 快速生成模板)

import React, { Component } from 'react'
export default class Home extends Component {
    render() {
        return (
            <div>
                我是home1
            </div>
        )
    }
}

2. 在App.js導入
   1. import Home from "./components/Home"
   2. 使用 <Home />