跳转至

02.构建项目

搭建开发环境

create-react-app是一个快速创建React开发环境的工具，

Text Only
npx create-react-app 项目名
npx create-react-app react-basic
  • npx: nodejs工具命令
  • create-react-app：核心包，用于创建React项目

运行项目

Text Only
  cd react-basic
  npm start

http://localhost:3000/

image-20240114114756449

整理项目目录

清理src目录下不重要的文件

image-20240114115553397

JavaScript
// index.js
// 项目入口，从这开始运行

// React必要的两个核心包
import React from 'react';
import ReactDOM from 'react-dom/client';

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

// 把App根组件渲染到id为root的dom上
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
JavaScript
// App.js

function App() {
  return (
    <div className="App">
      this is app
    </div>
  );
}

export default App;