React入门
程序员文章站
2022-07-03 13:59:17
...
React
1.React是什么
React是一个用于构建用户界面的JavaScript库
2.React的使用
2-1React的引入
<!-- 加载React -->
<!--React.js提供了核心代码-->
<script src="https://unpkg.com/aaa@qq.com/umd/react.development.js" crossorigin></script>
<!-- ReactDom提供与浏览器交互的Dom功能,如 虚拟dom -->
<script src="https://unpkg.com/aaa@qq.com/umd/react-dom.development.js" crossorigin></script>
<!-- 加载React组件 -->
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
2-2创建一个React组件
React.createElement()方法,创建一个元素
参数1 : 标签的名称
参数2 : 标签的属性
参数3 : 标签的内容
ReactDOM.render()方法,渲染到指定元素中
参数1 : 渲染的标签
参数2 : 渲染到指定的元素中
参数3 : 渲染完成后执行的回调函数,可选项
<body>
<div id="main"></div>
<script>
let div = React.createElement("div",null,"一个div")
ReactDOM.render(
div,
document.querySelector("#main"),
()=>{
console.log(123)
}
)
</script>
<script>
let h1 = React.createElement("h1",null,"h1标签");
let p = React.createElement("p",null,"p标签");
let el = React.createElement(
"header",
{id:"header"},
h1,
p
)
ReactDOM.render(
el,
document.querySelector("#main"),
()=>{
console.log("you are right");
}
);
</script>
</body>
3.JSX的使用
JSX是基于JavaScript和xml的一个扩展语法
使用JSX前,需要将script标签的type修改为text/babel
<script type="text/babel"></script>
<body>
<div id="main"></div>
<script type="text/babel">
ReactDOM.render(
<header>
<h1>JSX的使用</h1>
</header>,
document.querySelector("#main"),
()=>{
console.log(123)
}
)
</script>
</body>
JSX的注意事项：
JSX不是字符串也不是html,可以作为值使用
所有标签必须小写,并且需要闭合,包括单标签
class需要写成className（class也能用,但是会报错,不影响使用）
style接收的是一个对象,不是字符串
每次只能输出一个单标签(所有东西必须由一个容器包裹)
<head>
<style>
.box{
width:100px;
height:100px;
border:1px solid;
}
</style>
</head>
<body>
<div id="main"></div>
<script type="text/babel">
let style = {
width:'200px',
height:'200px',
background:'blue'
};
ReactDOM.render(
<div>
<div className="box"></div>
<div className="box" style={style}></div>
</div>,
document.querySelector("#react"),
()=>{
console.log("you are right");
}
);
</script>
</body>
4.插值表达式
变量,函数等在标签中使用时,需要使用{}来包裹
<body>
<div id="main"></div>
<script type="text/babel">
// 各种数据的插值状态
let data = 'so good'; //string 原样输出
let str = 1; //number 原样输出
let bool = true; //Bool 不输出
let ufd = undefined; //undefined 不输出
let nl = null; //null 不输出
let arr = [1,2,3]; //数组 去掉逗号,原样输出
let obj = {
name:'辛巴'
} //不能直接使用,需要通过属性名取值
ReactDOM.render(
<header>
<h1>string的使用:{data}</h1>
<h1>number的使用:{str}</h1>
<h1>Bool的使用:{bool}</h1>
<h1>undefined的使用:{ufd}</h1>
<h1>null的使用:{nl}</h1>
<h1>数组的使用:{arr}</h1>
<h1>对象的使用:{obj.name}</h1>
</header>,
document.querySelector("#main"),
()=>{
console.log("you are right");
}
);
</script>
</body>
5.条件输出
使用问好冒号表达式时,相当于if(){}else{}
使用||相当于if()取反运算
使用&&相当于if()正常运算
<body>
<div id="main"></div>
<script type="text/babel">
ReactDOM.render(
<header>
<p>三元运算的使用:{true?'yes':'no'}</p>
<p>三元运算的使用:{false?'yes':'no'}</p>
<p>||的使用:{true||"西巴"}</p>
<p>||的使用:{false||"西巴"}</p>
<p>&&的使用:{true&&"阿西吧"}</p>
<p>&&的使用:{false&&"阿西吧"}</p>
</header>,
document.querySelector("#main"),
()=>{
console.log("you are right");
}
);
</script>
</body>
6.列表循环
<body>
<div id="main"></div>
<script type="text/babel">
let data = [1,2,3,4,5,6,7,8]
function toData(){
let arr = [];
data.forEach(item=>{
arr.push(<li>{item}</li>)
})
return arr;
}
ReactDOM.render(
<header>
<ul>{toData()}</ul>
<ul>
{
data.map(item=>{
return <li>{item}</li>
})
}
</ul>
</header>,
document.querySelector("#main"),
()=>{
console.log("you are right");
}
);
</script>
</body>
上一篇： React入门