前端React 18系统 - 三毛笔记

React官网

新官网：https://zh-hans.react.dev/

编程环境

Node.js

也可以使用淘宝npm镜像下载对应的node版本：https://npm.taobao.org/mirrors/node/

Linux Mint环境

wget https://nodejs.org/dist/v18.17.1/node-v18.17.1-linux-x64.tar.xz
tar -xvf node-v18.17.1-linux-x64.tar.xz
mv node-v18.17.1-linux-x64 nodejs
sudo mv nodejs /usr/local/

接下来建立软链接，使得命令全局可用：

sudo ln -s /usr/local/nodejs/bin/node /usr/local/bin
sudo ln -s /usr/local/nodejs/bin/npm /usr/local/bin

将/usr/local/bin路径添加到PATH环境变量中：

sudo chmod o+w /etc/profile
echo "export PATH=/usr/local/bin:$PATH" >> /etc/profile
sudo chmod o-w /etc/profile
reboot

重启系统后，查看node版本:node -v，查看npm版本：npm -v。

create-vite脚手架

Vite 需要 Node.js 版本 14.18+，16+。

npm create vite@latest
√ Project name: ... react-study
√ Select a framework: » React
√ Select a variant: » JavaScript + SWC

SWC是一个可扩展的基于Rust的平台，用于下一代快速开发工具，SWC在单线程上比Babel快20倍，在四核上快70倍。

安装脚手架依赖：

cd react-study
npm i

启动脚手架：

npm run dev

ESLint配置与Prettier配置

ESLint是代码规范插件，而Prettier是代码格式化插件。

npm i vite-plugin-eslint

安装完进行相关的配置，在文件vite.config.js中引入eslintPlugin：

import eslintPlugin from "vite-plugin-eslint"

export default defineConfig({
  plugins: [
    react(),
    eslintPlugin({
      include: ["src/*.jsx", "src/**/*.jsx"],
    }),
  ],
})

sass预处理与classnames模块的使用

npm i sass
npm i classnames

JSX

是JavaScript语法扩展，可以在JavaScript文件中书写类似HTML的标签。

JSX浏览器是不认识的，所以利用脚手架中的SWC或Babel进行编译，转换成浏览器能识别的代码
JSX and React是相互独立的东西。但它们经常一起使用，可以单独使用它们中的任意一个，JSX是一种语法扩展，而React则是一个JavaScript的库

JSX语法与HTML的写法区别

对象和函数不能直接放到JSX {} 中，另外，这些值也不会渲染：布尔值、空字符、null、undefined。

如何对不渲染的值进行输出：{ JSON.stringify({age: 18}) }、{ undefined + '' }

让样式支持驼峰写法，在文件vite.config.js中添加：

export default defineConfig({
  plugins: [],
  css: {
    modules: {
      localsConvention: 'camelCase',
    },
  },
})

组件

数据类型

通信的数据可以通过组件的propTypes属性，配合第三方模块prop-types进行类型限定。

prop-types模块官网：https://github.com/facebook/prop-types

npm install --save prop-types

使用：

import PropTypes from 'prop-types'

function Welcome({ count }) {
  return <div>hello Welcome, {count}</div>
}

Welcome.propTypes = {
  count: PropTypes.number,
}

function App() {
  return (
    <div>
      hello App
      <Welcome count={123} />
    </div>
  )
}

export default App