美文网首页
[react]1、概述

[react]1、概述

作者: 史记_d5da | 来源:发表于2021-10-12 22:33 被阅读0次

1、React的起源

1、React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设Instagram 的网站。做出来以后,发现这套东西很好用,就在2013年5月开源了。

2、js开发

vscode的Emmet Abbreviate语法结构
!:直接生成HTML代码片段

1、练习原生实现Hello World点击按钮更改为Hello React

<!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>Document</title>
</head>
<body>
    <h2 class="title"></h2>
    <button class="btn">改变文本</button>
    <script>
        // 命令式编程:每一个操作都是计算机给出啊的一步步命令
        // 声明式编程:
        // 1、定义数据
        let message = "Hello World";
        const titleEl = document.getElementsByClassName("title")[0];
        titleEl.innerHTML = message;

        const btnEl = document.getElementsByClassName("btn")[0];
        btnEl.addEventListener("click", e => {
            message = "Hello React";
            titleEl.innerHTML = message;
        })
    </script>
</body>
</html>

3、React 开发

1、依赖三个库

1)、react:包含react所必须的核心代码
2)、react-dom:react渲染在不同平台所需要的核心代码
3)、babel:将jsx转换成React代码的工具
注:react和react-dom拆分原因:react中包含了react和react-native所共同拥有的核心代码。
react-dom针对web、native所完成的事情不同
web端:react-dom会将jsx最终渲染成真实的DOM,显示在浏览器中
native端:react-dom会将jsx最终渲染成原生的空件(比如android和ios中控件)

2、Babel

浏览器并不支持ES6的语法,通过Babel工具,将ES6转成大多数浏览器都支持的ES5的语法。
React和Babel的关系:
1)、默认情况下开发React其实可以不使用babel。
2)、但是前提是我们自己使用 React.createElement 来编写源代码,它编写的代码非常的繁琐和可读性差。
3)、我们就可以直接编写jsx(JavaScript XML)的语法,并且让babel帮助我们转换成React.createElement

3、开发react需要引入的三个库

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<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>

通过react实现Hello World刷新

<!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>Document</title>
</head>
<body>
    <div id="app"></div>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <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>
    <!-- 标记代码能够被babel解析 -->
    <script type="text/babel">
        let message = "Hello World";
        class App extends React.Component {
            constructor() {
                super();
                this.state = {
                    message: "Hello World"
                }
            }
            render() {
                return (
                    <div>
                        <h2>{this.state.message}</h2>
                        <button onClick={this.btnClicked.bind(this)}>改变文本</button>
                    </div>
                )
            }
            btnClicked=()=> {
                this.setState({
                    message: "Hello React"
                })
            }
        }
        ReactDOM.render(
            <App />, document.getElementById("app")
        );
    </script>
</body>
</html>

相关文章

网友评论

      本文标题:[react]1、概述

      本文链接:https://www.haomeiwen.com/subject/srnroltx.html