React项目搭建

1. 使用脚手架创建项目

• 打开命令行窗口
• 执行命令
npx create-react-app react-basic

说明:
• npx create-react-app 是固定命令,create-react-app是React脚手架的名称
• react-basic表示项目名称,可以自定义,保持语义化
• npx 命令会帮助我们临时安装create-react-app包,然后初始化项目完成之后会自自动删掉,所以不需要全局安装create-react-app
• 启动项目
yarn start
or
npm start

2. 项目目录说明调整

• 目录说明
• src 目录是我们写代码进行项目开发的目录
• package.json 中俩个核心库:react 、react-dom
• 目录调整
• 删除src目录下自带的所有文件,只保留app.js根组件和index.js
• 创建index.js文件作为项目的入口文件,在这个文件中书写react代码即可
• 入口文件说明

importReactfrom'react'importReactDOMfrom'react-dom'import'./index.css'// 引入根组件AppimportAppfrom'./App'// 通过调用ReactDOM的render方法渲染App根组件到id为root的dom节点上ReactDOM.render(
  <React.StrictMode><App/></React.StrictMode>,
  document.getElementById('root')
)
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值