脚本宝典收集整理的这篇文章主要介绍了

React入门0x003:jsx 和自由的组件

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

0x000 概述

说起来react,我喜欢的还是他的思想,在react中,实际上没有htmlcssjs的区别,全部都是js,就和webpack一样,可以将所有的资源等同视之。但是这在一开始,就让很多人感觉很难受,毕竟在这之前,我们看过的大部分关于web的书、文章,提出的最佳实践就是htmljscss分开来,因为前端受够了在js中拼接模板,phpjava之类的后端也受够了代码中拼接html,所以就有了模板引擎之类的存在。但是react这时候又出来说,我要把html写在js中,真是烦透咯!

不过,这种东西不过是50年一轮回,就和时尚一样。当时不容许这么做是受限于技术、时代之类的,而如今可以这么做是因为时机到了!

0x001 项目初始化

$ cp 0x001-helloworld 0x003-jsx-and-component

当前项目情况

+ 0x001-helloworld
+ 0x002-jsx
+ 0x003-jsx-and-component
    + src
        - index.html
        - index.js
    - .babelrc
    - package.json
    - webpack.config.js
    

0x002 自由的组件

  1. 使用变量

    import React from 'react'
    import ReactDom from 'react-dom'
    
    const p = <p>这是`p`</p>
    
    ReactDom.render(
        p,
        document.getElementById('app')
    )

    查看浏览器:http://localhost:8080/

    clipboard.png

    说明:在这个案例中,使用了ReactDom.render方法,我们查看一下关于这个方法的文档

    ReactDOM.render(element, container[, callback])

    参数:

     `element`: `React element`,可以使用`React.createElement`创建
     `container`: 容器
     `callback`: 回调,可选

    由参数1可知,我们只要提供一个React element便可,而由上一章可以知道, React.createElement可以返回一个React element,所以我们可以这么调用:

    ReactDom.render(
        React.createElement(
            "h1",
            null,
            "Hello, world!"
        ),
        document.getElementById('app')
    );

    jsx经过babel翻译之后,又可以转化成React.createElement,所以,我们可以想这样调用:

    ReactDom.render(
        <h1>Hello, world!</h1>,
        document.getElementById('app')
    );

    自然,将它保存成一个变量,也是可以的了,

  2. 使用方法