• react 入门

    搭建环境，略

    使用mac os 11.6

    vscode 1.71.0

    新建文件夹 03.webpacj-base,vscode打开文件夹，并在vscode的终端执行命令如下，进行环境搭建：

    一、搭建项目

    快速初始化项目：

    npm init -y

    xxx@xxxdeMacBook-Pro 03.webpack-base % npm init -y
    Wrote to /Users/xxx/Documents/workspace_html/react_study/three/03.webpack-base/package.json:

    {
      "name": "03.webpack-base",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "keywords": [],
      "author": "",
      "license": "ISC"
    }


    xxx@xxxdeMacBook-Pro 03.webpack-base %

    创建目录 src 和dist和生成的package.json同级目录

    创建index.html 在src下，并写入html:5回车，实现简单页面，

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     webpack-base 
    11. body>
    12. html>

    创建index.js在src下，并写入代码

    console.log('xxx')

    终端命令安装webpack

    cnpm i webpack webpack-cli webpack-dev-server -D

    新建文件webpack.config.js，在src同级目录上：

    代码：

    1.  
    2. module.exports={
    3.     mode:"development",
    4.     devServer:{
    5.         static:"../03.webpack-base"
    6.     }
    7. }

    终端运行 webpack，可在dist 目录下看见main.js生成（此时main.js使用，需要手动配置到index.html文件）；

    配置package.json文件 ：

    1.   "scripts": {
    2.     "dev": "webpack-dev-server --open --port 3000 --hot --host 127.0.0.1"
    3.   },

    安装插件：终端执行命令：

    cnpm i html-webpack-plugin -D

    配置webpack.config.js

    1. const path = require('path')
    2. const HtmlWebPackPlugin = require('html-webpack-plugin')
    3. const htmlPlugin = new HtmlWebPackPlugin(
    4.     {tepmplate:path.join(__dirname,'./src/index.html'),
    5.     filename:'index.html'}
    6. )
    7. module.exports={
    8.     plugins:[
    9.         htmlPlugin,
    10.     ]
    11. }

    安装react：

     cnpm i react react-dom -D

    上述安装可使用一行命令执行：

    cnpm i webpack webpack-cli webpack-dev-server html-webpack-plugin react react-dom -D

    二、运行项目：

    终端执行，运行项目，打开浏览器，并能看到“webpack-base”

    npm run dev

     三、配置babel

    终端执行安装命令：

    1.  cnpm i --save-dev babel-loader @babel/core
    2.  cnpm i @babel/preset-env --save-dev
    3.  cnpm i @babel/preset-react -D

    新建babel.config.json，配置

    1. {
    2.     "presets": ["@babel/preset-env","@babel/preset-react"]
    3. }

    配置webpack.config.js文件

    1.  
    2. module.exports={
    3.     module:{
    4.         rules:[
    5.             {
    6.                 test:/\.m?(js|jsx)$/,
    7.                 exclude:/node_modules/,
    8.                 use:{
    9.                     loader:"babel-loader",
    10.                     options:{
    11.                         presets:['@babel/preset-env']
    12.                     }
    13.                 }
    14.             }
    15.         ]
    16.     }
    17.     
    18. }

    在index.html文件body插入

       <div id="app">div>

    在index.js文件，实现代码：

    1. import React from 'react'
    2. import {createRoot} from "react-dom/client"
    3.  
    4. const e = <h1>react studyh1>
    5.  
    6. createRoot(document.getElementById("app")).render(e)

    终端执行运行命令，标签e渲染到页面上。

    四、配置打包处理css样式表

    新建css目录，和src同级，在css目录下新建home.css文件

    1. body{
    2.     background-color:lightblue;
    3. }
    4. h1{
    5.     color:navy;
    6.     margin-left:20px;
    7. }

    终端执行打包处理css样式表的第三方loader

    cnpm i style-loader css-loader -D

    配置webpack.confing.js

    1. module.exports={
    2.     module:{
    3.         rules:[
    4.             {
    5.                 test:/\.css$/i,
    6.                 use:["style-loader","css-loader"]
    7.             }
    8.         ]
    9.     }
    10. }

    在index.js导入 home.css文件

    import '../css/home.css'

    五、配置@路径和js|jsx|json等文件导入不用后缀

    在webpack.config.js文件添加配置

    1. module.exports={
    2.     resolve:{
    3.         extensions:['.js','.jsx','.json'],
    4.         alias:{
    5.             '@':path.join(__dirname,'./src')
    6.         }
    7.     }
    8. }

    导入css文件代码改为：

    import '@/../css/home.css'

    六、css启用模块化

    直接导入样式表，全局生效，启用模块化来解决全局生效问题。

    使用第三方样式表，需要取消启用的模块化，此时，一般会自己规定：

    第三方样式表，都是.css结尾，不启用模块化；自己的样式表，都要以.scss或.less结尾，启用模块化。

    例如，第三方样式表 bootstrap 和自己样式表使用：

    1，安装第三方样式表bootstrap；

    cnpm i bootstrap @popperjs/core -D

    2，自己定义的样式表改为.scss结尾；

    1. cnpm i sass-loader node-sass -D
    2. cnpm update node-sass -D

    3，针对 自己样式表和第三方样式表 进行配置

    1. module.exports={
    2.     module:{
    3.         rules:[
    4.             {
    5.                 test:/\.css$/i,
    6.                 use:["style-loader","css-loader"]
    7.             },
    8.             {
    9.                 test:/\.scss$/i,
    10.                 use:[
    11.                     "style-loader",
    12.                     {
    13.                         loader:"css-loader",
    14.                         options:{
    15.                             modules:{
    16.                                 localIdentName:"[path][name]-[local]-[hash:base64:5]",
    17.                             }
    18.                         }
    19.                     },
    20.                     "sass-loader"
    21.                 ]
    22.             }
    23.         ]
    24.     }
    25. }

    4、代码调用

    .css代码改为.scss

    1. .content{
    2.     background-color: aquamarine;
    3. }
    4. #input{
    5.     font-size: 20px;
    6.     background-color: orange;
    7. }
    8. h1_{
    9.     color: burlywood;
    10.     margin-left: 20px;
    11.     text-align: center;
    12. }

    在index.js中，调用

    1. import pageObj from "@/../css/page.scss"
    2. import "bootstrap/dist/css/bootstrap.css"
    3.  
    4. const content = <h1 className={pageObj.content}>内容h1>
    5. const btn = <button className='btn btn-primary' style={{ "margin-left": "20px"}}>提交button>
    6.  
    7. createRoot(document.getElementById("app")).render(<div>
    8.     {btn}
    9.     {content}
    10. div>)

    备注：

    :local(.test) 包裹启用模块化，启用模块化后，默认所有的ID和类名，都被模块化了
    :global(.test)取消启用模块化,取消启用模块化，全局的样式表。

    示例代码：https://download.csdn.net/download/flyToSky_L/86514918。

  • 相关阅读:
    02、交换机
    PWA及小程序在系统生态方面的支持对比
    系统国产化之-达梦数据库基础操作命令
    雾锁王国服务器配置怎么选择？阿里云和腾讯云
    NBlog Java定时任务-备份MySQL数据
    适用于Windows的远程传输大文件软件！
    Linux学习笔记——用户管理
    2024 PhpStorm激活，分享几个PhpStorm激活的方案
    Google Cloud Spanner的实践经验
    【REACT-router】
  • 原文地址：https://blog.csdn.net/flyToSky_L/article/details/126829922