React jsx语法入门

最新推荐文章于 2024-05-10 20:51:34 发布

黄尚炎

最新推荐文章于 2024-05-10 20:51:34 发布

阅读量200

点赞数

分类专栏： react 文章标签： React JSX

本文链接：https://blog.csdn.net/weixin_44702125/article/details/89432307

版权

react 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JSX就是Javascript和XML结合的一种格式。
React发明了JSX，利用HTML语法来创建虚拟DOM。
简单的来说:
1.遇到标签，JSX就当HTML解析。
2.遇到{代码}就当JavaScript解析。
注意：解析使用到了babel插件
入门案例：
1.安装：
webpack:
    cnpm install webpack webpack-cli -D
webpack-dev-server:
    cnpm i webpack-dev-server -D
babel:
    cnpm i babel-loader -D
    cnpm i @babel/core @babel/plugin-transform-runtime @babel/preset-env -D
    cnpm i @babel/preset-react -D
React:
cnpm i react react-dom -s
2.配置文件：
package.json
{
“name”: “demo”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo “Error: no test specified” && exit 1”,
+“dev”: "webpack-dev-server --open --port 3000 --hot --host 127.0.0.1"
},
“keywords”: [],
“author”: “”,
“license”: “ISC”,
“devDependencies”: {
“@babel/core”: “^7.4.3”,
“@babel/plugin-transform-runtime”: “^7.4.3”,
“@babel/preset-env”: “^7.4.3”,
“@babel/preset-react”: “^7.0.0”,
“babel-loader”: “^8.0.5”,
“html-webpack-plugin”: “^3.2.0”,
“webpack”: “^4.30.0”,
“webpack-cli”: “^3.3.0”,
“webpack-dev-server”: “^3.3.1”
}
}
webpack.config.js
const path=require(‘path’)
//把html映射的项目跟目录
const HtmlWebPackPlugin=require(‘html-webpack-plugin’)
//

//创建插件实例
const htmlPlugin=new HtmlWebPackPlugin({
template:path.join(__dirname,’./src/index.html’),//源文件
plugins:‘index.html’//映射的目录，默认项目跟目录

})
//向外暴露一个配置对象
module.exports={
mode:‘development’,//development ,production
plugins:[//第三方插件
htmlPlugin
],module:{//第三方模块匹配规则
rules:[
{
test:/.js|jsx$/,//匹配规则
use:‘babel-loader’,//指定解析器
exclude:/node_modules/
}
]
}
}
.babelrc
{
“presets”: [
“@babel/preset-env”,"@babel/preset-react"
],“plugins”: [
“@babel/plugin-transform-runtime”
]
}
3.代码
index.html
<html>
<head>
</head>
<body>
<div id=“app”>
</body>
</html>
index.js
//导入组件：生成虚拟DOM对象，生命周期
import React from ‘react’
//导入组件：把创建好的组件和虚拟DOM对象，渲染到页面
import ReactDOM from ‘react-dom’
//jsx语法
//1渲染数字
let num=10
//2渲染字符串
let str=‘你好中国’
//3 .渲染boolean
let bool=true
//4. 为属性绑定值
let title=‘999’
//注意赋值的时候没有引号
//5. 渲染jsx元素
const myh1=<h1>哈哈哈jsx</h1>
//6. 渲染jsx元素数组
const myarr=[<h2>aaa</h2>,<h2>bbb</h2>,<h2>ccc</h2>]
//7. 将普通字符数组换行 jsx数组
const strarr=[‘西游记’,‘东游记’,‘北游记’]
//方式一，遍历组装
const parsearr=[]
//forEach 遍历组装
strarr.forEach(item=>{
parsearr.push(<h3>{item}</h3>)
})
//map 遍历组装
const parsearr2=strarr.map(item=>{
return <h3>{item}</h3>
})
const mydiv=<div>
{num+10}

{str}

{bool?‘true’:‘false’}

<p title={title}>段落</p>
{
//特殊属性：
//1. class 要写成className
//2. for属性要写成 htmlFor
}

//5. 渲染jsx元素
{myh1}

//6. 渲染jsx元素数组
{myarr}

{parsearr}

{parsearr2}

{strarr.map(item=>{
return <h3>{item}</h3>
})}

//如果只有一行代码括号可以省略,return 也可以省略
{
/ jsx注释：如果只有一行代码括号可以省略,return 也可以省略/
//jsx注释：如果只有一行代码括号可以省略,return 也可以省略
}
{strarr.map(item=><h3>{item}</h3>)}

//渲染到页面
ReactDOM.render(mydiv,document.getElementById(‘app’))
案例下载