前端React 18系统

编程 · 2023-10-07 · 178 人浏览

React官网

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

编程环境

Node.js

Node.js官网:https://nodejs.org/en

也可以使用淘宝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的标签。

  1. JSX浏览器是不认识的,所以利用脚手架中的SWC或Babel进行编译,转换成浏览器能识别的代码
  2. 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
JavaScript
Theme Jasmine by Kent Liao