学习笔记《JSX》

作者: 马文Marvin | 来源:发表于2016-11-13 01:13 被阅读4次

JSX 可以被视为一种 JS 的模板语言,形如:

const element = <h1>Hello, world!</h1>;

使用引号来表示 JS 代码:

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

如果是多行的话,可以加一个括号:

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

在 React 中三种等价的创建形式:

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

// Note: this structure is simplified
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }
};

就是这些,是不是非常简单:)

相关文章

  • react 学习笔记 使用 jsx 语法

    react 学习笔记 使用 jsx 语法 概念 JSX 是一种 JavaScript 的语法拓展。我们推荐 rea...

  • JSX学习笔记

    简介 const element = Hello! JSX是一种JavaScript的语法扩展,看起来像是模板语...

  • 学习笔记《JSX》

    JSX 可以被视为一种 JS 的模板语言,形如: 使用引号来表示 JS 代码: 如果是多行的话,可以加一个括号: ...

  • JSX学习笔记

    这个有趣的标签语法既不是字符串也不是 HTML。它被称为 JSX,是一个 JavaScript 的语法扩展。我们建...

  • 005@关于JSX语法.md

    005@关于JSX语法 转(有所更改):React入门:关于JSX语法可以参考的资料:React.js学习笔记之J...

  • React学习笔记—JSX

    所谓JSX,是JavaScript的语法扩展(eXtension),让我们在JavaScript中可以编写像HTM...

  • React 高级指导 笔记

    深入JSX date:20170412笔记原文其实JSX是React.createElement(componen...

  • React 学习笔记

    React 笔记 一、JSX 语法 疑难点class => classNamefor...

  • 二、React小书学习摘记

    React.js 小书学习 之 【使用 JSX 描述 UI 信息】 从 JSX 到页面 过程图解:JSX 到页面过...

  • jsx学习

    性能提升 inline expansion应该用到了函数内联的知识 JSX boosts performance ...

网友评论

    本文标题:学习笔记《JSX》

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