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>
相关推荐
多客软件佳佳14 分钟前
校园交友系统的设计与实现(开源版+三端交付+搭建+售后)
小程序·前端框架·uni-app·开源·php·交友
前端Hardy21 分钟前
HTML&CSS 打造的酷炫菜单选项卡
前端·javascript·css·html·css3
M木27 分钟前
前端如何实现文件的在线预览?
前端·vue.js
阿征学IT29 分钟前
vue计算属性 初步使用案例
前端·javascript·vue.js
Qhumaing29 分钟前
html文本元素
前端·html
林太白31 分钟前
❤React-React 组件通讯
前端·javascript·react.js
码手Lion1 小时前
CSS多列布局:打破传统布局的束缚
前端·css
青龙摄影1 小时前
【自动化】学习观看视频内容,无需人为干预
前端·vue.js·elementui
豆华1 小时前
React 中 为什么多个 JSX 标签需要被一个父元素包裹?
前端·react.js·前端框架
起风的秋天@1 小时前
CSS Modules在框架中的使用
前端·css