react 脚手架

最新推荐文章于 2024-10-16 21:22:37 发布

原创

最新推荐文章于 2024-10-16 21:22:37 发布 · 321 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

本文介绍了如何使用create-react-app创建React项目并启动，解析了项目的基本文件结构，包括public/index.html和src/index.js。详细阐述了React中CSS的模块化解决样式冲突问题，以及快捷键的使用。此外，通过toDoList小示例展示了React组件间的通信，包括父传子、子传父和子组件间通信，并演示了如何获取checkbox值和隐藏显示删除按钮。最后，探讨了解构赋值和消息订阅-发布机制PubSubJS在项目中的应用。

1.创建项目并启动

1.打开cmd全局安装：npm install -g create-react-app

dir:查看文件夹里面的内容
cls:清空cmd中内容

2.构建一个项目
npx create-react-app my-app
3.启动项目
npm start
报错：
react-refresh-runtime.development.js:465 Uncaught TypeError: Cannot read property 'forEach' of undefined
原因：是因为chome浏览器中下载了react 扩展工具，关闭即可。

2.解析文件内容

2.1 public–>index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!--%PUBLIC_URL% 代表public 文件夹路径-->
    <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 create-react-app"
    />
    <!--用于指定网页添加到手机主屏幕后的图标-->
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--应用加壳的配置文件-->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <!--若浏览器不支持js,则展示标签中的内容-->
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

public–>robots.txt—是爬虫软件
public–>manifest.json----是加壳软件
src–>index.js—入口软件
src–>App.js–页面–export default App后在入口文件引入即可。

2.2 src–>index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from

最低0.47元/天解锁文章