创建React项目

使用 create-react-app快速搭建开发环境

create-react-app 是一个快速创建React开发环境的工具,底层由Webpack构建,封装了配置细节,开箱即用。

安装npx

npx是一个由Node.js官方提供的用于快速执行npm包中的可执行文件的工具,npm5.2以上版本开始支持npx命令,请确保你的npm版本大于5.2。使用npm命令安装:

npm install -g npx

可以使用 npx -v 检查版本信息

命令创建项目

npx create-react-app react-basic

1.npx Node.js工具命令,查找并执行后续的包命令
2.create-react-app 核心包(固定写法),用于创建React项目
3.react-basic React项目的名称(可以自定义)

启动

进入项目目录:cd react-basic
启动项目:npm start
在这里插入图片描述

删除多余文件和代码

创建好项目,只保留两个文件 App.js、index.js 即可
在这里插入图片描述

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 />);
App.js 删除掉多余内容只保留以下内容
//项目根组件

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

export default App;

在这里插入图片描述

相关推荐

  1. vite 创建 react 项目

    2024-07-10 08:02:03       38 阅读
  2. 创建React+Ts项目

    2024-07-10 08:02:03       19 阅读
  3. 创建React项目:使用 create-react-app 创建 React 应用

    2024-07-10 08:02:03       5 阅读
  4. react 如何创建antdesign项目,详细讲解

    2024-07-10 08:02:03       25 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-10 08:02:03       4 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-10 08:02:03       5 阅读
  3. 在Django里面运行非项目文件

    2024-07-10 08:02:03       4 阅读
  4. Python语言-面向对象

    2024-07-10 08:02:03       4 阅读

热门阅读

  1. https创建证书

    2024-07-10 08:02:03       9 阅读
  2. 环境瘦身术:Conda包依赖的自动清理指南

    2024-07-10 08:02:03       11 阅读
  3. Django 实现子模版继承父模板

    2024-07-10 08:02:03       9 阅读
  4. [面试爱问] https 的s是什么意思,有什么作用?

    2024-07-10 08:02:03       10 阅读
  5. Docker

    2024-07-10 08:02:03       11 阅读
  6. Vue中v-for和v-if优先级(2、3)

    2024-07-10 08:02:03       10 阅读
  7. 晚上定时编译android系统

    2024-07-10 08:02:03       9 阅读