React入门学习（一）基础知识、jsx语法

react

介绍React的入门讲解（一）

基础知识、jsx语法，以及个人学习体会

大家好，我是 小超 同学。最近我正在学习 React、阅读 JS 文档，并整理 Node 的笔记。对于 React，这是我学习的第三个框架，我觉得相对于 Vue，React 可能更加注重组件化思想的实践。学习 React 的过程中，我深刻体会到了组件化思想的重要性，也对 React 的生命周期有了更深刻的理解。如果有任何错误，请务必指出并交流。

祝愿你生活明朗，万物可爱！🌞🌻

这是 React 的官方网站，很多问题都可以在官方文档中找到解决方案，因此学会查阅文档非常重要。

一、React 简介

1. 关于 React

整几个面试题来认识一下~~

什么是 React ？

React 是一个用于构建用户界面的 JavaScript 库。

是一个将数据渲染为 HTML 视图的开源 JS 库
它遵循基于组件的方法，有助于构建可重用的 UI 组件
它用于开发复杂的交互式的 web 和移动 UI

React 有什么特点？

使用虚拟 DOM 而不是真正的 DOM
它可以用服务器渲染
它遵循单向数据流或数据绑定
高效
声明式编码，组件化编码

React 的一些主要优点？

它提高了应用的性能
可以方便在客户端和服务器端使用
由于使用 JSX，代码的可读性更好
使用 React，编写 UI 测试用例变得非常容易

2. Hello，React 🎉

首先需要引入几个 React 包：

React 核心库
操作 DOM 的 React 扩展库
将 JSX 转为 JS 的 Babel 库

我直接用官方的库而没有下载到本地：

jsx
  <!-- 引入react核心库 -->
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <!-- 引入react-dom，用于支持react操作DOM -->
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
  <!-- 引入babel，用于将jsx转为js -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

jsx
//1.创建虚拟DOM
const VDOM = <h1>Hello,React</h1>/*此处一定不要写引号，因为不是字符串*/
//2.渲染處拟DOM到页面
ReactDOM.render(VDOM, document.getElementById("example"))

3. 虚拟 DOM 和真实 DOM 的两种创建方法

3.1 JS 创建虚拟 DOM

jsx
 //1.创建虚拟DOM,创建嵌套格式的dom
const VDOM=React.createElement('h1',{id:'title'},React.createElement('span',{},'hello,React'))
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById("example"))

3.2 JSX 创建虚拟 DOM

jsx
//1.创建虚拟DOM
	const VDOM = (  /* 此处一定不要写引号，因为不是字符串 */
    	<h1 id="title">
			<span>Hello,React</span>
		</h1>
	)
//2.渲染虚拟DOM到页面
ReactDOM.render(VDOM, document.getElementById("example"))

js 的写法并不是常用的，常用jsx来写，毕竟JSX更符合书写的习惯

二、jsx 语法

定义虚拟DOM，不能使用“”引号
标签中混入JS表达式的时候使用{}

jsx
id = {myIdÏ}

样式的类名指定不能使用class，使用className
内联样式应该在 style 属性中使用 {{key: value}} 的形式来书写。

jsx
style={{color:'skyblue',fontSize:'24px'}}

不能有多个根标签，只能有一个根标签
标签必须闭合，自闭合也行
如果小写字母开头，就将标签转化为 html 同名元素，如果 html 中无该标签对应的元素，就报错；如果是大写字母开头，react 就去渲染对应的组件，如果没有就报错

记几个

1. 注释

写在花括号里

jsx
ReactDOM.render(
    <div>
    <h1>学超</h1>
    {/*注释...*/}
     </div>,
    document.getElementById('example')
);

2. 数组

JSX 允许在模板中插入数组，数组自动展开全部成员

jsx
var arr = [
  <h1>小丞</h1>,Ï
  <h2>同学</h2>,
];
ReactDOM.render(
  <div>{arr}</div>,
  document.getElementById('example')
);

JSX 小练习

根据动态数据生成 li

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello_react</title>
</head>
<body>
  <!-- 准备好一个 “容器” -->
  <div id="example"></div>
  <!-- 引入react核心库 -->
  <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
  <!-- 引入react-dom，用于支持react操作DOM -->
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
  <!-- 引入babel，用于将jsx转为js -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script type="text/babel">
    /*
      注意区分：【js语句(代码)】与【js表达式】
        1. js表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方。
                    下面这些都是表达式：
                      (1）a
                      (2) arr.map()
                      (3) function fn(){}
        2. js语句(代码)：代码中会产生一个结果，但不一定会放在需要值的地方。
                     下面这些都是语句（代码）：
                      (1) if(){}
                      (2) for(){}
                      (3) switch(){}
                       
    */
    // 模拟一些数据
    const VDMData = [
      { name: 'Angular', id: 1 },
      { name: 'React', id: 2 },
      { name: 'Vue', id: 3 }
    ]
    //1.创建虚拟DOM
    const VDOM = (
      <div>
        <h1>前端JS框架列表</h1>
        <ul>
          {
            VDMData.map(item => {
              return <li key={item.id}>{item.name}</li>
            })
          }
        </ul>
      </div>
    )
    // 2. 渲染處拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById("example"))

  </script>
</body>
</html>

目录

React入门学习（一）基础知识、jsx语法

基础知识、jsx语法，以及个人学习体会

一、React 简介

1. 关于 React

2. Hello，React 🎉

3. 虚拟 DOM 和真实 DOM 的两种创建方法

3.1 JS 创建虚拟 DOM

3.2 JSX 创建虚拟 DOM

二、jsx 语法

1. 注释

2. 数组

JSX 小练习