学无先后,达者为师

网站首页 前端文档 正文

Learning React.js Note 2 - React Elements

作者:renefox 更新时间: 2022-01-08 前端文档
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

ReactDOM.render(
  React.createElement("h1", { style: { color: "red" } }, "Hello123!"),
  document.getElementById("root")
);
// => Rendering multiple React elements
ReactDOM.render(
  React.createElement(
    "div",
    { style: { color: "blue" } },
    React.createElement("h1", null, "abc") // Rendering multiple React elements
  ),
  document.getElementById("root")
);

gets a little unwieldy笨拙, 反义词wieldy
Now, as our applications become more complex, writing all of these react.create element calls gets a little unwieldy.
现在,随着我们的应用程序变得越来越复杂,编写所有这些 react.create 元素调用变得有点笨拙。

ReactDOM.render(
  <ul>
    <li>123</li>
    <li>123</li>
  </ul>,
  document.getElementById("root")
);

Bable
Now, our browser isn’t just going to render tags automatically in the browser, but because we’re using create React app there’s a tool that’s working behind the scenes called Babel.
现在,我们的浏览器不仅会在浏览器中自动渲染标签,而且因为我们使用的是 create React 应用程序,所以有一个名为 Babel 的工具在幕后工作。

get rid of this comment 去掉这个评论
vital 重要
wieldy 灵活的
behind the scenes 在幕后
A solid understanding of JSX syntax is important for getting the most out of React.
充分理解 JSX 语法对于充分利用 React 非常重要。
getting the most out of 充分利用

原文链接:https://blog.csdn.net/weixin_49655243/article/details/122102557

栏目分类
最近更新