创建React项目

创建一个react项目

webpack的方式

借助一个脚手架：create-react-app

• 全局安装脚手架命令
  • yarn global add create-react-app
  • npm install create-react-app -g
• 查看脚手架版本：create-react-app --version
• 创建项目： create-react-app 项目名
• 进入项目： cd 项目名
• 运行命令： npm run start

目前不太推荐使用这种方式，此种方式有缺点：

• 配置不好修改
• 配置sass和less也不太好配置

npm install create-react-app -g

yarn global add create-react-app

2. vite方式 【吐血推荐】

更快，更好的修改配置

选项和vue3创建项目一样

yarn create vite

创建好之后,启动项目

创建第一个类类型组件

vscode快速生成代码片段插件

名字： ES7+ React/Redux/React-Native snippets

使用： rcc快速创建类类型组件。(因为懒,这样有提示,快速开发)

目录结构

注意: public和assets的区别

• public（static）
  • 里面放不需要打包的图片，js
  • 使用的时候直接使用，不需要通过import
• src/assets
  • 需要使用打包工具解析
  • 使用的时候需要打包工具解析： import

创建第一个类类型组件

vscode快速生成代码片段插件

名字： ES7+ React/Redux/React-Native snippets

使用： rcc快速创建类类型组件。

// 创建一个组件（类类型组件）
// React --> export default
// Component --> export 
import React, { Component } from 'react'

// 导出了一个类 App ，此类继承了react的Component， 所以App就是一个react组件
export default class App extends Component {

    // render（视图）
    render() {
        return (
            <div>App</div>
        )
    }
}

// React应用的核心功能（是一个对象，对象上有很多方法，属性）
import React from 'react'
// 用来操作dom
import ReactDOM from 'react-dom/client'
// 引入组件
import App from './App'


// 以id为root的节点创建了一个react根节点
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)

// 往根节点里面渲染页面
root.render(
  // 实例化的过程 new App()
  <App />
)