react的创建与书写

一:创建项目

超全面详细一条龙教程!从零搭建React项目全家桶(上篇) - 知乎

1.创建一个文件夹,shift+鼠标右键选择在此处打开powershell

2.为了加速npm下载速度,先把npm设置为淘宝镜像地址。

复制代码
npm config set registry http://registry.npm.taobao.org/

3.执行下面的npm安装react,那么基础的项目就搭建好了

复制代码
npx create-react-app react-app

4.使用下列npm运行项目

复制代码
run start

二:精简项目

删除例如App.css、App.test.js、index.css、logo.svg、reportWebvitals.js、setupTests.js等文件,

保留核心index.js、App.js;优化成下图

app.js内容替换为

javascript 复制代码
export default function App() {
  return <div>hello!</div>;
}

index.js替换为

javascript 复制代码
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

index.html替换为

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1"
/>
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using createreact-app" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
相关推荐
zhanshuo17 分钟前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang18 分钟前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务
khalil20 分钟前
基于 Vue3实现一款简历生成工具
前端·vue.js
拾光拾趣录27 分钟前
浏览器对队头阻塞问题的深度优化策略
前端·浏览器
用户81221993672227 分钟前
[已完结]后端开发必备高阶技能--自研企业级网关组件(Netty+Nacos+Disruptor)
前端
万少32 分钟前
2025中了 聊一聊程序员为什么都要做自己的产品
前端·harmonyos
1234Wu1 小时前
React Native 接入 eCharts
javascript·react native·react.js
abigale033 小时前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者3 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile3 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome