当前位置: 首页 > news >正文

React01 开发环境搭建

React 开发环境搭建

      • 一、创建 React 项目
      • 二、项目精简

一、创建 React 项目

  • 执行下述命令创建 react 项目 blu-react-basis
npx create-react-app blu-react-basis

项目目录结构如下:

在这里插入图片描述

  • 执行下述命令启动项目
npm run start

启动效果如下:

在这里插入图片描述

二、项目精简

删除不必要的文件

在这里插入图片描述

简化 index.jsApp.js

  • index.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
//根组件
function App() {return (<div className="App">HELLO BLU FROM REACT</div>);
}
export default App;
http://www.lryc.cn/news/459493.html

相关文章:

  • 数据结构之旅(顺序表)
  • 掌握 C# 内存管理与垃圾回收机制
  • 【JavaEE】——初始网络原理
  • Nginx和Lua配合使用
  • 程序化交易是什么,它有哪些优势,需要注意什么?
  • 水库抽样算法(大数据算法作业)
  • SHCTF-2024-week1-wp
  • docker-comapose安装部署mysql
  • C语言初阶-数据类型和变量【下】
  • C++:命名空间(namespace)详细介绍与案例
  • 专题十一_递归_回溯_剪枝_综合练习_算法专题详细总结
  • java中Runnable接口是什么?基本概念、工作原理、优点、`Runnable`与`Thread`的对比、与`Callable`接口的对比、实际场景
  • Mybatis Plus连接使用ClickHouse也如此简单
  • 什么社交平台可以找到搭子?分享多款找搭子必备的人气软件
  • STM32 RTC实时时钟 F407 寄存器
  • 矩阵等价、向量组等价、线性方程组同解与公共解的关系
  • [Linux] Linux 进程程序替换
  • 【Linux系统编程】第三十一弹---深入理解静态库:从零开始制作与高效使用的完全指南
  • FFmpeg 简介及其下载安装步骤
  • 使用CSS+SVG实现加载动画
  • 物联网(IoT)的未来发展:智能互联时代的到来
  • 斯坦福 CS229 I 机器学习 I 构建大型语言模型 (LLMs)
  • Java->排序
  • linux 大小写转换
  • Linux——传输层协议
  • centos系列,yum部署jenkins2.479.1,2024年长期支持版本
  • 正则表达式-“三剑客”(grep、sed、awk)
  • 数智时代的新航向:The Open Group 2024生态系统架构·可持续发展年度大会邀您共筑AI数字新时代
  • TensorFlow 的核心概念
  • SpringBoot教程(二十四) | SpringBoot实现分布式定时任务之Quartz(动态新增、修改等操作)