React进阶

雨点打透心脏的1/2处 2022-06-15 08:30 177阅读 0赞

强烈推荐一个大神的人工智能的教程：[http://www.captainbed.net/zhanghan][http_www.captainbed.net_zhanghan]

首先来配置一下React的环境，在网上下载react.js和react-dom.js和browser.min.js，其中react.js是react的核心库，react-dom.js是提供与Dom相关的功能，browser.min.js是负责将JSX转换为javascript。

JSX:javascript XML，看起来就像是在javascript中直接写了XML，直接使用javascript可以吗？是可以的，那为什么要用JSX语法呢？举个例子，对比一下你就会发现了：

//使用JSX
    React.render(
        <div>
            <div>
                <div>content</div>
            </div>
        </div>,
        document.getElementById('example')
    );
     
    //不使用JSX
    React.render(
        React.createElement('div', null,
            React.createElement('div', null,
                React.createElement('div', null, 'content')
            )
        ),
        document.getElementById('example')
    );

1.Hello World（入门必备啊）

<!DOCTYPE html>
    <html>
    <head>
      <script src="../build/react.js"></script>
      <script src="../build/react-dom.js"></script>
      <script src="../build/browser.min.js"></script>
    </head>
    <body>
        <div id="example"></div>
        <script type="text/babel">
          ReactDOM.render(
            <h1>Hello World!!!</h1>,
            document.getElementById('example')
          );
        </script>
    </body>
    </html>

效果展示：

![Center][]

[http_www.captainbed.net_zhanghan]: http://www.captainbed.net/zhanghan
[Center]: /images/20220615/b422e94156444064ac33a5f4e944b395.png

发表评论取消回复

表情：

评论列表（有 0 条评论，177人围观）

还没有评论，来说两句吧...

相关阅读

相关「react进阶」一文吃透React高阶组件(HOC)

一前言 `React`高阶组件(`HOC`)，对于很多`react`开发者来说并不陌生，它是灵活使用`react`组件的一种技巧，高阶组件本身不是组件，它是一个参数为

谁借莪１个温暖的怀抱￠/ 2022年11月10日 14:14/ 0 赞/ 617 阅读

相关 React进阶（十三）：Context

文章目录前言 contextType 拓展阅读 -------------------- 前言 `Context` 提

阳光穿透心脏的1/2处/ 2022年10月05日 12:58/ 0 赞/ 221 阅读

相关 React进阶（十二）：HOOK

文章目录一、前言二、HOOK函数介绍 2.1 State hook 2.2 Effect hook

た入场券/ 2022年10月05日 12:51/ 0 赞/ 854 阅读

相关 React进阶

强烈推荐一个大神的人工智能的教程：[http://www.captainbed.net/zhanghan][http_www.captainbed.net_zhang

雨点打透心脏的1/2处/ 2022年06月15日 08:30/ 0 赞/ 178 阅读

相关 React（四）进阶

搭建脚手架 create-react-app：（类似Vue）：步骤：全局安装 npm install create-react-app -g 在项目目录下安装 c

「爱情、让人受尽委屈。」/ 2022年04月01日 10:59/ 0 赞/ 261 阅读

相关 react进阶—02state切换

本节实现效果是点击子项打开关闭 demo.js <!DOCTYPE html> <html> <head> <meta charset="U

àì夳堔傛蜴生んèń/ 2022年03月17日 12:52/ 0 赞/ 151 阅读

相关 react进阶—01数据展示

1.react初始 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" />

￡神魔★判官ぃ/ 2022年03月17日 12:38/ 0 赞/ 220 阅读

相关 React (5) Redux 进阶

1. UI 组件 1. render()函数放在另外一个单独的UI.js 文件和动作行为分开 2. UI 上面所用的数据和函数, 通过父组件传递过来,用 this.

野性酷女/ 2021年09月17日 04:46/ 0 赞/ 420 阅读

相关 React进阶之高阶组件

一.介绍 1.说明：高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。我的理解是定义一个A组件(函数)，把这个A组件传入给B组件,B组件把A组件

╰半夏微凉°/ 2021年09月16日 00:30/ 0 赞/ 450 阅读

相关 React进阶

React中的事件这里的事件：React内置的DOM组件中的事件 1. 几乎所有的元素的事件处理，均在document的事件中处理，React会根据虚拟DOM树的完

我会带着你远行/ 2021年09月02日 06:06/ 0 赞/ 356 阅读