初识：React!

React 是什么？

一个用于构建用户界面的 JavaScript 库
中文手册：https://react.docschina.org/

命令式编程 和 声明式编程

  • 告诉计算机怎么做（How） - 过程
  • 告诉计算机我们要什么（What） - 结果

如何使用 React

基于浏览器的模式

  • React.js 提供 React.js 核心功能代码，如：虚拟 dom，组件
    • React.createElement(type,props,children);
  • ReactDOM 提供了与浏览器交互的 DOM 功能，如：dom 渲染
    • ReactDOM.render(element, container[, callback])
      • element：要渲染的内容
      • container：要渲染的内容存放容器
      • callback：渲染后的回调函数

babel

babel-standalone.js：在浏览器中处理 JSX
https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js

JSX

JSX 是一个基于 JavaScript + XML 的一个扩展语法

  • 它可以作为值使用
    • 它并不是字符串
    • 它也不是HTML
    • 它可以配合JavaScript 表达式一起使用

Code Demo

  • ReactDOM.render()
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/react.js"></script>
    <script src="./js/react-dom.js"></script>
</head>
<body>
    <div id="box"></div>
    <script>
        ReactDOM.render(
            "hello, react~",
            document.querySelector("#box"),
            () => {
                console.log("渲染完成");
            }
        );
    </script>
</body>
</html>
  • React.createElement()
ReactDOM.render(
            React.createElement("header", { id:"header" },
                React.createElement("h1", null, "hello react~"),
                React.createElement("p", null, "你好，react!")
            ),
            document.querySelector("#box")
        );

let el = React.createElement("header", { id:"header" },
                    React.createElement("h1", null, "hello react~"),
                    React.createElement("p", null, "你好，react!")
                );
console.log(el);

ReactDOM.render(
            el,
            document.querySelector("#box")
);
posted @ 2020-04-20 16:31  rockyyee  阅读(114)  评论(0)    收藏  举报