【react】初学react5-react脚手架搭建中的小众知识

文章目录

前言
一、环境下载
二、项目结构
- 关于样式
总结

前言

终于到脚手架了，真正的react才刚刚开始！握拳.jpg

一、环境下载

安装脚手架：

npm i create-react-app

vscode终端中创建项目：（我的环境下npm create-react-app my-app会报错）

npx create-react-app my-app

安装react插件，这里推荐ES7 React/Redux/GraphQL/React-Native snippets，内置非常多的快捷代码片段，在细节中可以查看，比如'rcc'可以快速生成react组件模版代码。

二、项目结构

网上可以看到的很多关于react项目结构和各文件作用的文章，这里不在做详细解释，只分享作者了解到的一些新知识和重点内容。

react中js jsx文件都可以省略后缀名

public-index.html文件，head中许多配置可以删除，代码及解释如下：

javascript 复制代码

<!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" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
      <!-- 应用加壳时的配置文件 -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

  </body>
</html>

根目录下：index.js是入口文件，用ReactDOM.render(document.getElementById('root'))挂载这种写法也可，但新版好像不行了。

javascript 复制代码

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



const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // React.StrictMode 严格模式
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// reportWebVitals 记录页面性能
reportWebVitals();

关于样式

一般会引入less、sass去写样式，如果直接写css样式，要注意不同组件中的作用域，最好是采用模块化的样式：即 .css文件名改为.xx.module.css,模块化引入：

import hello from './Hello.module.css'

调用：className={hello.title}

总结

下篇分享一个代办事项的经典案例