React01 开发环境搭建

React 开发环境搭建

一、创建 React 项目

  • 执行下述命令创建 react 项目 blu-react-basis
bash 复制代码
npx create-react-app blu-react-basis

项目目录结构如下:

  • 执行下述命令启动项目
bash 复制代码
npm run start

启动效果如下:

二、项目精简

删除不必要的文件

简化 index.jsApp.js

  • index.js
js 复制代码
//导入React必要的两个核心包
import React from 'react';
import ReactDOM from 'react-dom/client';

//导入根组件
import App from './App';

//将根组件渲染到index.html中id为root的dom节点上
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App/>);
  • App.js
js 复制代码
//根组件
function App() {
  return (
    <div className="App">
      HELLO BLU FROM REACT
    </div>
  );
}
export default App;
相关推荐
CoderYanger3 分钟前
前端基础——HTML练习项目:填写简历信息
前端·css·职场和发展·html
muyouking118 分钟前
深入理解 HTML `<label>` 的 `for` 属性:提升表单可访问性与用户体验
前端·html·ux
软件技术NINI12 分钟前
html css js网页制作成品——饮料官网html+css+js 4页网页设计(4页)附源码
javascript·css·html
软件技术NINI12 分钟前
html css js网页制作成品——HTML+CSS辣条俱乐部网页设计(5页)附源码
javascript·css·html
IT_陈寒29 分钟前
Java性能调优:从GC日志分析到实战优化的5个关键技巧,让你的应用快如闪电!
前端·人工智能·后端
Mintopia35 分钟前
🚀 Next.js API 压力测试:一场前端与后端的“极限拉扯”
前端·后端·全栈
Mintopia39 分钟前
🛡️ 对抗性攻击与防御:WebAI模型的安全加固技术
前端·javascript·aigc
庙堂龙吟奈我何1 小时前
qiankun知识点
前端
SoaringHeart1 小时前
Flutter封装:原生路由管理极简封装 AppNavigator
前端·flutter
menu1 小时前
AI给我的建议
前端