React01 开发环境搭建

BLUcoding2024-10-17 15:47

React 开发环境搭建

- - [一、创建 React 项目](#一、创建 React 项目)
  - 二、项目精简

一、创建 React 项目

执行下述命令创建 react 项目 blu-react-basis

bash 复制代码

npx create-react-app blu-react-basis

项目目录结构如下：

执行下述命令启动项目

bash 复制代码

npm run start

启动效果如下：

二、项目精简

删除不必要的文件

简化 index.js 和 App.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;