持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第19 天，点击查看活动详情
React脚手架
使用create-react-app创建React应用
React脚手架
- 脚手架说明：用来帮助程序员快速创建一个基于某个库的模板项目
- 包含了所有需要的基础配置（语法检查、
jsx编译、devServer等） - 下载好了所有相关的依赖
- 可以直接运行一个简单效果
- 包含了所有需要的基础配置（语法检查、
React提供了一个用于创建项目的脚手架：create-react-app- 项目的整体技术架构为：
React + webpack + es6 + eslint - 使用脚手架开发项目的特点：模块化、组件化、工程化
创建项目并启动(MAC版本)
第一步 全局安装
sudo npm install -g create-react-app
第二步 切换至目标目录，使用命令
sudo create-react-app hello-react
第三步 进入创建的文件夹
cd hello-react
第四步 启动项目
sudo npm start
启动效果
React脚手架构建项目结构
public 静态资源文件夹
- favicon.icon：网站页签图标
- index.html：主页面
- logo192.png：logo图
- logo512.png：logo图
- manifest.json：应用加壳的配置文件
- robots.txt：爬虫协议文件
src 源码文件夹
- App.css：App组件的样式
- App.js：App组件
- App.test.js：用于给App组件做测试
- index.css：样式
- index.js：入口文件
- logo.svg：logo图
- reportWebVitals.js：页面性能分析（需要web-vitals库的支持）
- setupTests.js：组件单元测试（需要jest-dom库的支持）
创建一个简单的组件
目录结构
我们先将脚手架自带的文件保存到一个文件夹中，然后自己新建相关的几个文件。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<title>自定义React组件</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
index.js
// 引入React核心库
import React from 'react'
// 引入ReactDOM
import {createRoot} from 'react-dom/client'
// 引入自定义组件
import App from './App.js'
// 渲染组件到页面
const container = document.getElementById('root')
const root = createRoot(container)
root.render(<App />)
App.js
import {Component} from 'react'
import Hello from './components/Hello'
// 创建App组件
class App extends Component {
render() {
return (
<div>
<Hello/>
</div>
)
}
}
// 暴露App组件
export default App
Hello.js
import {Component} from 'react'
// 创建并暴露组件
export default class Hello extends Component {
render() {
return (
<div>
Hello, React!
</div>
)
}
}
效果图：
在上面的图中可以看到我们能正常的将页面展示出来了。
