前端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

目录