React01 开发环境搭建

React 开发环境搭建

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

一、创建 React 项目

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

npx create-react-app blu-react-basis

项目目录结构如下：

• 执行下述命令启动项目

npm run start

启动效果如下：

二、项目精简

删除不必要的文件

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