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的标签。
- 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
- 转载请保留原文链接:前端React 18系统 https://aboss.top/post/306/
- 本站所有资源文章出自互联网收集整理,本站不参与制作,如果侵犯了您的合法权益,请联系本站我们会及时删除。
- 本站发布资源来源于互联网,可能存在水印或者引流等信息,请用户擦亮眼睛自行鉴别,做一个有主见和判断力的用户。
- 本站资源仅供研究、学习交流之用,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担。
- 联系方式(#替换成@):mail#aboss.top
评论