2022即将到来，前端发展非常迅速，现在的前端已经不再是写写简单的页面了，伴随着web大前端，工程化越来越火，也出现了很多框架。很多公司也不单单是使用单一的框架了，作为前端开发国内最火的两大框架，都是必须要掌握的。所以，我决定在这疫情肆虐的年底把React学习一下，也为自己将来找工作多一分竞争力...

学习阶段，如有不对之处，欢迎评论区留言，我及时更正

本文已连载，其它章节传送门⬇️

第二章-函数组件和class类组件

jsx语法认识

语法简介

JSX，是一个 JavaScript 的语法扩展。它让我们可以在js中很好的抒写结构，结合react更好的描述ui，类似于模版，但是它额外拥有javascript的全部功能。

嵌入表达式

JSX语法中，大括号内可以放置任何javascript表达式。例如运算、函数、变量、if else语句等等，但是想要使用jsx首先需要装一下babel，这是因为普通的script并不能解析这种标签，我们需要借助babel来解析。

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script type="text/babel"> // 必须要写上type类型
    const name = 'Josh Perez';
    const element = <h1>Hello, {name}</h1>;
<script>

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script type="text/babel"> // 必须要写上type类型
	const obj = {
		name: 'zhangsan',
		age: 18
	};
	const element = <h1>今年{obj.age + 2}岁</h1>;
<script>

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script type="text/babel"> // 必须要写上type类型
	const getName = (name) => {
		return name
	};
	const element = <h1>我是{getName('小明')}</h1>;
<script>

条件渲染

JSX语法很灵活，不同于vue的template模版，我们可以在jsx语法中尽可能的结合js。这里先结合react做示例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>

  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script type="text/babel">
    class Demo extends React.Component {
      constructor() {
        super()
        this.state = {
          stauts: true
        }
      }
      render() {
        return(
          <div>
            if(status) {
							<h1>渲染h1</h1>
						} else {
							<h2>渲染h2</h2>
						}
          </div>
        )
      }
    }
    ReactDOM.render(<Demo/>, document.querySelector('#app'))
  </script>
</body>
</html>

属性名与属性值

属性名

JSX中我们可以抒写标签，也可以给标签增加属性。和原生不同的是，为了避免与原生html的冲突，jsx中的属性名基本采用小驼峰命名

<!-- class 类名 -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script type="text/babel"> // 必须要写上type类型
	const name = 'Josh Perez';
	const element = <h1 className="app">Hello, {name}</h1>;
<script>

<!-- 绑定事件 -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script type="text/babel"> // 必须要写上type类型
	const name = 'Josh Perez';
	const element = <h1 onClick={this.handleClick}>Hello, {name}</h1>;
<script>

<!-- style属性 -->
<!-- 注意：style这里使用{{}}双花括号是因为外层花括号代表表达式，内层花括号代表style本身就有的{} -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script type="text/babel"> // 必须要写上type类型
	const name = 'Josh Perez';
	const element = <h1 style={{color: "red"}}>Hello, {name}</h1>;
<script>

属性值

JSX语法中的属性值要么是一个字符串字面量，要么是一个JavaScript表达式，两者不能同时存在，也就是“”和{ }只能有一个喔～

掌握React基础知识第一章-jsx语法认识

jsx语法认识

语法简介

嵌入表达式

条件渲染

属性名与属性值

属性名

属性值