react 入门

flyToSky_L

已于 2022-09-14 10:08:35 修改

阅读量1k

点赞数

文章标签： react.js vscode 前端

于 2022-09-13 17:21:41 首次发布

本文链接：https://blog.csdn.net/flyToSky_L/article/details/126829922

版权

搭建环境，略

使用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回车，实现简单页面，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    webpack-base 
</body>
</html>

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

console.log('xxx')

终端命令安装webpack

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

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

代码：


module.exports={
    mode:"development",
    devServer:{
        static:"../03.webpack-base"
    }
}

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

配置package.json文件：

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

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

cnpm i html-webpack-plugin -D

配置webpack.config.js

const path = require('path')
const HtmlWebPackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebPackPlugin(
    {tepmplate:path.join(__dirname,'./src/index.html'),
    filename:'index.html'}
)
module.exports={
    plugins:[
        htmlPlugin,
    ]
}

安装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

终端执行安装命令：

 cnpm i --save-dev babel-loader @babel/core
 cnpm i @babel/preset-env --save-dev
 cnpm i @babel/preset-react -D

新建babel.config.json，配置

{
    "presets": ["@babel/preset-env","@babel/preset-react"]
}

配置webpack.config.js文件


module.exports={
    module:{
        rules:[
            {
                test:/\.m?(js|jsx)$/,
                exclude:/node_modules/,
                use:{
                    loader:"babel-loader",
                    options:{
                        presets:['@babel/preset-env']
                    }
                }
            }
        ]
    }
    
}

在index.html文件body插入

   <div id="app"></div>

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

import React from 'react'
import {createRoot} from "react-dom/client"

const e = <h1>react study</h1>

createRoot(document.getElementById("app")).render(e)

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

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

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

body{
    background-color:lightblue;
}
h1{
    color:navy;
    margin-left:20px;
}

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

cnpm i style-loader css-loader -D

配置webpack.confing.js

module.exports={
    module:{
        rules:[
            {
                test:/\.css$/i,
                use:["style-loader","css-loader"]
            }
        ]
    }
}

在index.js导入 home.css文件

import '../css/home.css'

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

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

module.exports={
    resolve:{
        extensions:['.js','.jsx','.json'],
        alias:{
            '@':path.join(__dirname,'./src')
        }
    }
}

导入css文件代码改为：

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

六、css启用模块化

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

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

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

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

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

cnpm i bootstrap @popperjs/core -D

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

cnpm i sass-loader node-sass -D
cnpm update node-sass -D

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

module.exports={
    module:{
        rules:[
            {
                test:/\.css$/i,
                use:["style-loader","css-loader"]
            },
            {
                test:/\.scss$/i,
                use:[
                    "style-loader",
                    {
                        loader:"css-loader",
                        options:{
                            modules:{
                                localIdentName:"[path][name]-[local]-[hash:base64:5]",
                            }
                        }
                    },
                    "sass-loader"
                ]
            }
        ]
    }
}

4、代码调用

.css代码改为.scss

.content{
    background-color: aquamarine;
}
#input{
    font-size: 20px;
    background-color: orange;
}
h1_{
    color: burlywood;
    margin-left: 20px;
    text-align: center;
}

在index.js中，调用

import pageObj from "@/../css/page.scss"
import "bootstrap/dist/css/bootstrap.css"

const content = <h1 className={pageObj.content}>内容</h1>
const btn = <button className='btn btn-primary' style={{ "margin-left": "20px"}}>提交</button>

createRoot(document.getElementById("app")).render(<div>
    {btn}
    {content}
</div>)

备注：

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

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

flyToSky_L

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
react 入门

搭建环境，略使用mac os 11.6vscode 1.71.0新建文件夹 03.webpacj-base,vscode打开文件夹，并在vscode的终端执行命令如下，进行环境搭建：快速初始化项目：创建目录 src 和dist和生成的package.json同级目录创建index.html 在src下，并写入html:5回车，实现简单页面，创建index.js在src下，并写入代码终端命令安装webpack新建文件webpack.config.js，在src同级目录上：代码：
复制链接

扫一扫