ReactDOM.render(<h1>hello react</h1>, document.getElementById('root'));//render函数:
//参数二,获取插入到界面的哪个容器
//参数一, 是一个标签//标签也可以作为函数的参数吗?
JSX语法：JavaScript + XML语法(HTML)解读jsx语法：在react中遇到<>按照HTML语法解析，遇到{}按照JavaScript解析
1、JSX介绍
全称: JavaScript XML， React 使用 JSX 来替代常规的 JavaScript。
JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
我们不需要一定使用 JSX，但它有以下优点：
- JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
- 它是类型安全的，在编译过程中就能发现错误。
- 使用 JSX 编写模板更加简单快速。
- 作用: 用来创建react虚拟DOM(元素)对象
- var ele = <h1>Hello JSX!</h1>;
- 注意1: 它不是字符串, 也不是HTML/XML标签
- 注意2: 它最终产生的就是一个JS对象
- 标签名任意: HTML标签或其它标签
- 标签属性任意: HTML标签属性或其它
- 基本语法规则
- 遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
- 遇到以 { 开头的代码，以JS的语法解析: 标签中的js代码必须用{ }包含
- babel.js的作用
- 浏览器的js引擎是不能直接解析JSX语法代码的, 需要babel转译为纯JS的代码才能运行
- 只要用了JSX，都要加上type="text/babel", 声明需要babel来处理
2、使用 JSX
JSX 看起来类似 HTML ，我们可以看以下实例:
html文件：
<body>
<div id="root"></div>
</body>
js文件：
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
注意：代码中能够嵌套多个 HTML 标签，但需要使用一个标签元素包裹它
错误例子：
ReactDOM.render(
<h1>这是错误的例子</h1>
<span>假设这里是标题下面的内容</span>,
document.getElementById("example")
);
正确例子：
ReactDOM.render(
<section>
<h1>这是正确的例子</h1>
<span>假设这里是标题下面的内容</span>
</section>,
document.getElementById("example")
);
3、独立文件
可以将React JSX 代码可以放在一个独立文件上，并在不同的js文件中引入即可
index.js文件
import React from 'react';
import ReactDOM from 'react-dom/client';
// 主键
// import App from './App';
// 关联页面上的根元素
const root = ReactDOM.createRoot(document.getElementById('root'));
// 第一种
let App = <div> 6666 </div>;
// 第二种
function App(){
let msg="hello"
return <div> hello{msg} </div>;
}
// 第三种
import App from "./App2.jsx"
// 给根元素内部渲染组件模板
root.render(
<App/>
);
4、样式
React 推荐使用内联样式。React 会在指定元素数字后自动添加 px 。
5、注释
注释需要写在花括号中，需要注意的是：
- 在标签内部的注释需要花括号
- 在标签外的的注释不能使用花括号
6、JavaScript 表达式
我们可以在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中。实例如下：
7、条件渲染
- 三目运算符
- 在 JSX 内部不能使用 if else 语句，但可以使用 三元运算 表达式来替代。
8、数组
JSX 允许在模板中插入数组，数组会自动展开所有成员
9、列表渲染
通过数组的map函数
举例：
class App extends React.Component{
render(){
let a=10
let b=30
let box1={
color:"red",
fontSize:"20px"
}
let fn=()=>{
console.log("点击成功！")
}
let flag=true
let arr=["1","2","3",4,5,<div>hello</div>]
// 将arr2中的字符串嵌在h1标签中
let arr2=["hello","world"]
let arr3=arr2.map((el)=>{
return(
<h1>{el}</h1>
)
})
// json数据处理
let arr4=[{id:1,title:"第一点",name:"123"},{id:2,title:"第二点",name:"456"}]
return (
<div>
666666
{/*注释*/}
{/* <div className={box}>hello</div> */}
{/*表达式*/}
<p>{a+b}</p>
<br />
{/* 行内 */}
<div style={box1}></div>
<br />
{/* {绑定事件} */}
<button onClick={fn}>点击</button>
<br />
{/* {三目运算} */}
<div>{flag?a:b}</div>
<br />
{/* {for循环} */}
<div>{arr}</div>
<br />
<div>{arr3}</div>
<br />
<div>{arr2.map((el)=>{return(<h2>{el}</h2>)})}</div>
<br />
{/* {json数据处理} */}
<div>{arr4.map((el)=>{
return(
<div key={el.id}>
<h1>{el.title}</h1>
<h2>{el.name}</h2>
</div>
)
})}</div>
</div>
)
}
}
export default App
394
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
