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

eechen 发布于2019-08-23 11:25 / 1246人阅读

摘要：概述说起来，我喜欢的还是他的思想，在中，实际上没有的区别，全部都是，就和一样，可以将所有的资源等同视之。但是这时候又出来说，我要把写在中，真是烦透咯不过，这种东西不过是年一轮回，就和时尚一样。

0x000 概述

说起来react，我喜欢的还是他的思想，在react中，实际上没有html、css、js的区别，全部都是js，就和webpack一样，可以将所有的资源等同视之。但是这在一开始，就让很多人感觉很难受，毕竟在这之前，我们看过的大部分关于web的书、文章，提出的最佳实践就是html、js、css分开来，因为前端受够了在js中拼接模板，php、java之类的后端也受够了代码中拼接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 自由的组件

使用变量

import React from "react"
import ReactDom from "react-dom"

const p = 这是`p`

ReactDom.render(
    p,
    document.getElementById("app")
)

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

说明：在这个案例中，使用了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(
    Hello, world!,
    document.getElementById("app")
);

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

使用方法

const div = () => 这是`div`

ReactDom.render(
    div(),
    document.getElementById("app")
)

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

当然在js中的所有操作可以做到呢：

import React from "react"
import ReactDom from "react-dom"

const aP = 这是`p`

const aDiv = () => 这是`div`

const divWithChildren = (...children) => {
    const len = children.length
    return 
        一共有{len}个子组件
        {
            children.map((child, index) => {
                return 
                    这是第{index + 1}个子组件:
                    {child}
                
            })
        }
    
}

ReactDom.render(
    divWithChildren(
        aP,
        aDiv(),
        h1
    ),
    document.getElementById("app")
)

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

使用组件

class AComponent extends React.Component {
    render() {
        return 
            classComponent
        
    }
}

ReactDom.render(
    ,
    document.getElementById("app")
)

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

说明：这种方式和上面两种有些不一样，之后会详细说来。

0x003 总结

案例一非常简单

案例二显得略复杂且杂乱，但是却能够很好的说明一点，那就是在react中，可以尽情的使用js的思想去构建一个简单组件，而简单组件又可以组合成复杂组件。相比于angular、vue等模板化的框架，react在构建UI方面让我们有更多的选择，同时也可以产生出许多非常具有突破性的思想！

案例三使用类来表示一个组件，非常符合面相对象的思想

当然，自由也带来混乱，需要将这种自由化为思想的自由，而不是工程的自由、代码的自由，否则将会带来噩梦。

0x004 资源

react

transform-react-jsx

源码

私有云云服务器组件和组件通信自由落体的小球 c 组件和服务器 jsx

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96942.html

React入门0x004：jsx 和数据渲染

摘要：概述在中，渲染数据的形式有多种多样，但是万变不离其中，都是用。当然，自由也带来混乱，需要将这种自由化为思想的自由，而不是工程的自由代码的自由，否则将会带来噩梦。 0x000 概述在React中，渲染数据的形式有多种多样，但是万变不离其中，都是用js。 0x001 渲染文本 // 渲染文本 ReactDom.render( 这是一个文本, document.getEle...

xingpingz 2019-08-23 11:27 评论0 收藏0
React入门0x005: React Component和props

摘要：概述这一章讲组件，组件才是的核心，也是构建的项目中最小的单元。莫买沃洲山，时人已知处。是使用类的语法来写，所以很多的思想可以套用到，但是一定要记得，这是，而不是资源源码 0x000 概述这一章讲组件，组件才是React的核心，也是React构建的项目中最小的单元。 0x001 组件上面的章节有一个类似下面的栗子： const App = () => { return hel...

genefy 2019-08-23 11:28 评论0 收藏0
React入门0x002: jsx

摘要：概述也是，如是说。属性集合，比如等属性对应，是关键词，所以用代替，也可以是自定义的属性。形式送方外上人送上人孤云将野鹤，岂向人间住。莫买沃洲山，时人已知处。 0x000 概述 jsx也是js，如是说。 0x001 语法在上文React入门0x001-环境配置和 helloworld中，出现了一句奇怪的代码： Hello, world! 这在html中没有任何问题，但问题是他出现在...

hedzr 2019-08-26 12:17 评论0 收藏0
01.react入门必备，知识点梳理，生命周期全讲解

摘要：生命周期在版本中引入了机制。以后生命周期图解不包含官方不建议使用的事件处理事件的命名采用小驼峰式，而不是纯小写。只是在兄弟节点之间必须唯一受控组件使的成为唯一数据源。 react 基础 JSX JSX是一个 JavaScript 的语法扩展,可以很好地描述 UI 应该呈现出它应有交互的本质形式。 React DOM 在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远...

Jiavan 2019-08-26 10:36 评论0 收藏0
React入门0x006: State

摘要：概述这一章讲，是的核心，也算是的核心思想都很核心啊。但是接着我们又搞了一个定时器，每秒执行一直函数，将修改为最新的时间。就完成了视图的更新。参数一是要更新的数据，我们只需要传输我们要更新的数据即可，对于不需要更新的数据，则不需要理睬。 0x000 概述这一章讲state，state是MVVM的核心，也算是React的核心思想......都很核心啊。 0x001 问题在上一章节的栗子...

TNFE 2019-08-23 11:29 评论0 收藏0