前言
有些风景，如果你不站在高处，你永远体会不到它的魅力;有些路，如果你不去启程，你永远不知道它是多么的美丽。我们的命运由我们的行动决定，而绝非完全由我们的出身决定。机会永远都不会平等，但结果却可能平等。心有多大，舞台就有多大!勇敢去拼搏，别让明天的自己后悔
初识react（1）
引入
<!-- react底层核心库 -->
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<!-- react操作DOM的核心库,类似于JQuery -->
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- 用于解析ES6语法 -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<body>
<div id="root1"></div>
<script type='text/babel'>
// ES6方法需要引入babel,必须要使用type=text/babel
// Babel会把JSX转译为一个名为React.createElement()函数调用
ReactDOM.render(
// 我们要主要当我们有多个标签的时候,一定要有根元素
<ul>
<li className="lili">1111</li>
<li>2222</li>
</ul>,
document.getElementById('root1'))
</script>
<div id="root2"></div>
<script type='text/babel'>
// 一般我们也不会像上面这样去写,而是会像下面这样写
let div = <div><h1>helo world</h1></div>
ReactDOM.render(
div,
document.getElementById('root2') // 如果在同一个div渲染两个内容,只会展示后面那个
)
</script>
</body>
初识react（2）JSX
<body>
<div id="root"></div>
<script type='text/babel'>
// JSX是JS的语法扩展,JSX中可以嵌套表达式。
// 在编译后,JSX表达式会被转为普通的JS函数调用,并且对其取值后得到js对象。
// JS特性：可以使用引号将属性值指定为字符串字面量,也可以用大括号来给属性中插入一个JS表达式
let name = 'gushi123'
let id = 'hello'
let flag = true
let div = <div>
<p className='haha' id={id}>hello {`${name}`}</p>
<p>{flag ? 'hello': 'gushi123'}</p>
</div>
ReactDOM.render(div, document.getElementById('root'))
// ReactDOM在渲染所有输入内容之前,默认会进行转义,它可以确保我们的应用永远不会被注入那些并非自己明确编写的内容
// 内容在渲染前会被转成字符串,这样可以有效防止XSS攻击(cross-site-scripting跨站脚本)
</script>
</body>
初识react (3)元素渲染
<body>
<div id="root"></div>
<script type='text/babel'>
function tick() {
// 在React里面,组件时由元素构成的
let time = new Date().toLocaleTimeString()
let template = <div>
<h1>Hello React</h1>
<h2>现在是：{time}</h2>
</div>
ReactDOM.render(
template,
document.getElementById('root')
)
}
// tick()
// React元素是不可变对象,一旦被创建,你就无法更改它的子元素或者属性
setInterval(tick, 1000)
// 它只会更新它需要更新的部分,把tick函数理解为模型,页面内容理解为视图,模型更改就会直接驱动视图发生改变
</script>
</body>
初识react（4）条件判断 函数组件
<script type="text/babel">
let state = true
function Apps() {
if(state) {
return <div>我是王者</div>
} else {
return <div>我是叼毛</div>
}
}
ReactDOM.render(<Apps/>, document.getElementById('root3'))
</script>
初识react（5）class
<body>
<script>
// JS中,生成实例对象的传统方法是通过构造函数
function Person(x, y) {
this.x = x
this.y = y
}
Person.prototype.add = function() {
console.log(this.x + this.y)
}
let p = new Person(1, 2)
// 上面的代码用class改写
class Pserons {
constructor(x, y) {
this.x = x
this.y = y
}
add() {
console.log(this.x + this.y)
}
}
// type Persons // function 类本身就指向构造函数
Pserons === Pserons.prototype.constructor // true
class Persons {
constructor() {}
add() {}
}
// 等同于
Persons.prototype = {
constructor() {},
add() {}
}
// 在类的实例上调用方法其实就是调用原型的方法
class B {}
let b = new B()
b.constructor === B.prototype.constructor // t
class Hello {
constructor(x) {
this.x = x
}
add() {}
}
</script>
</body>
初识react（6）无状态组件
<body>
<div id="root"></div>
<script type='text/babel'>
// 函数式组件(无状态组件)
function Hello() {
return <div>
<h1>姓名：Hello React！</h1>
<h1>年龄：Hello React！</h1>
<h1>性别：Hello React！</h1>
<h1>地址：Hello React！</h1>
</div>
}
ReactDOM.render(
<Hello/>,
document.getElementById('root')
)
</script>
</body>
初识react（7）无状态组件props传值
<body>
<div id="root"></div>
<script type='text/babel'>
// 函数式组件(无状态组件)
function Hello(props) {
// 在组件里可以通过props来获取我们传递的值
console.log(props)
return <div>
<h1>姓名：{props.name}！</h1>
<h1>年龄：{props.age}！</h1>
<h1>性别：{props.sex}！</h1>
<h1>地址：{props.address}！</h1>
</div>
}
ReactDOM.render(
<Hello name='casey' age='13' sex='女' address='武汉'/>,
document.getElementById('root')
)
</script>
</body>
总结
初学react基础知识，一步一步慢慢来，日积月累。
