框架《React》库的学习笔记（从1到4）

一. react库的简介

二. react的基本使用

在前端领域里，类似bootcdn这样的网站是用得很多的。

下面举一个程序的例子

这里需要解释一下各部分含义

react.js: React的核心库

react-dom.js: 提供操作DOM的react扩展库

babel.min.js: 解析JSX语法代码转为纯JS语法代码的库

三. jsx理解和基本使用

关于JSX:

(1) 全称： JavaScript XML

(2) react定义的一种类似XML的JS扩展语法： XML + JS

(3) 作用：用来创建React的虚拟DOM的对象

React. createElement(h1, {id:'myTitle'}, title)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js"></script>
</head>
<body>
    <div id="test1"></div>
    <div id="test2"></div>
 
    <script type="text/javascript">
        const msg = "I like you!";
        const myId = "Atguigu";
 
        // 1. 创建虚拟DOM
        const vDom1 = React.createElement('h2',{id:myId.toLowerCase()},msg.toUpperCase())
        // 2. 渲染虚拟DOM
        ReactDOM.render(vDom1,document.getElementById('test1'))
    </script>
 
    <script type="text/babel">
        // 1. 创建虚拟DOM
        const vDom2 = <h3 id={myId.toUpperCase()}>{msg.toLowerCase()}</h3>
        // 2. 渲染虚拟DOM
        ReactDOM.render(vDom2,document.getElementById('test2'))
 
    </script>
</body>

四. jsx练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/7.0.0-beta.3/babel.js"></script>
</head>
<body>
<h2>前端JS框架列表</h2>
<div id="example1"></div>
 
<script type="text/babel">
    // 功能：动态展示列表数据
 
    // 问题： 如何将一个数据的数组，转换为一个标签的数组
    const names = ['jQuery','zepto','angular','react','vue'];
 
    //1. 创建虚拟DOM
    const ul = (
        <ul>
            {
                names.map((name) => <li>{name}</li>)
            }
        </ul>
    )
 
    //2. 渲染虚拟DOM
    ReactDOM.render(ul,document.getElementById('example1'))
 
</script>
</body>
</html>

效果图

框架《React》库的学习笔记（从1到4）

猜你喜欢