React环境初始化

雨落云尚

已于 2023-10-22 11:52:18 修改

阅读量633

点赞数

分类专栏： React新人手把手入门文章标签： react.js javascript 前端前端框架

于 2023-10-21 11:38:57 首次发布

本文链接：https://blog.csdn.net/weixin_53761834/article/details/133959196

版权

React新人手把手入门专栏收录该内容

13 篇文章 0 订阅

订阅专栏

本文介绍了如何使用React官方脚手架创建React项目，包括步骤如在命令行中运行`npxcreate-react-appprojectName`，调整项目结构，删除默认文件，设置入口文件index.js等。

摘要由CSDN通过智能技术生成

环境初始化

学习目标： 能够独立使用React脚手架创建一个React项目
1.使用脚手架创建项目
在这里插入图片描述

官方文档：(https://create-react-app.bootcss.com/)
- 打开命令行窗口
- 执行命令
npx create-react-app projectName
说明：
1. npx create-react-app 是固定命令，create-react-app是React脚手架的名称
2. projectName 是项目名称，可以自定义，应保持语义化
3. npx命令会帮助我们临时安装create-react-app包，然后初始化项目完成后会自动删除，所以不需要全局安装create-react-app
- 启动项目

yarn start
or
npm start

2.项目目录说明调整

目录说明
1. src目录是写代码进行开发的目录
2. package.json中有两个核心库：react、react-dom
目录调整
1. 删除src目录下的自带文件，只保留app.js根组件和index.js以及index.css
2. 创建index.js文件作为项目的入口文件，在这个文件中书写react代码即可
入口文件说明

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
// 引入根组件APP
import App from './App'
// 通过调用ReactDOM的render方法渲染App根组件到id为root的dom节点上
ReactDOM.render(
    <React.strictSode>
        <App />
    </React.strictSode>
    document.getElementById('root')
)