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 />