资讯专栏INFORMATION COLUMN

react文档 Hello World

xuhong / 877人阅读

摘要:最小的示例如下它会显示一个的标题在页面上。指南的指南在这个指南中,我们将会检验的建筑模块和元素和组件。这是循序渐进的指南关于原则的第一章。它可能会花半小时到一个小时,但是好处是你不会感觉同时在学习和。注意此指南偶尔在示例中采用新的语法。

Hello World

最小的 React 示例如下:

ReactDOM.render(
    

Hello, world!

, document.getElementById("root") );

它会显示一个 “Hello, world!" 的标题在页面上。

在在线编辑器上尝试

点击上面的链接打开在线编辑器。随便做些改动,看看它们如何影响输出。入门指南中大多数页面都有一个类似的可编辑示例。

指南的指南

在这个指南中,我们将会检验 React apps 的建筑模块: elements 和 components(元素和组件)。一旦掌握了它们,就可以通过小的可复用块来创造复杂应用了。

小贴士 这篇指南为偏爱 learning concepts step by step 的人设计。如果你喜欢通过动手来学习, 打开我们的 实践指导. 你会发现指南和指导互为补充。

这是循序渐进的指南关于 React 原则的第一章。 右侧边栏有所有章节的导航。如果通过移动设备阅读,你可以通过点击屏幕右下角的按钮进入导航。

指南的每一章都会基于之前几张的知识。 你可以通过安装侧边栏中出现的顺序阅读 “Main Concepts" 指导章节学习大部分 React 知识。例如,"Introducing JSX(JSX 简介)" 是下一章。

知识层度假设

React 是一个 JavaScript 库,因此我们假定你已经对 JavaScript 语言有一个基础的理解。 如果你不是很有自信,建议你阅读 JavaScript 指导检测你的知识层度确保跟随此指南不会迷路。它可能会花半小时到一个小时,但是好处是你不会感觉同时在学习 React 和 JavaScript。

注意 此指南偶尔在示例中采用新的 JavaScript 语法。 如果你有几年没和 JavaScript 打交道,多数时候这三点会卡住你。
正式启程

页面滑动到底部你会看到 下一章 链接。

写在最后

想增强下学过知识的系统性,先增加下学习的仪式感。

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

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

相关文章

  • React文档翻译系列(二)Hello World

    摘要:文档翻译系列二开始最简单的方式就是在上使用示例。最小的例子如下它会在页面上渲染一个标题。接下来的几部分会逐步的介绍如何使用。我们会查验应用的构建块元素和组件。在例子中也使用了一些的语法。可以使用在线转换器查看的代码编译。 React文档翻译系列(二)Hello World Hello World 开始React最简单的方式就是在CodePen上使用Hello World示例。无需安装任...

    Mertens 评论0 收藏0
  • React文档翻译系列(三)JSX简介

    摘要:文档翻译系列三简介先来看一下下面的变量声明这种有趣的标签语法既不是字符串也不是。这种形式被称作,他是的一种扩展语法。为便于阅读,我们将分隔成多行。表示对象将编译成调用。我们建议您为选择的编辑器搜索语法方案,以便和代码都能够被正确高亮的显示。 React文档翻译系列(三)JSX简介 先来看一下下面的变量声明: const element = Hello world! 这种有趣的标签语法既...

    wean 评论0 收藏0
  • React文档翻译系列(一)安装

    摘要:文档翻译系列一安装原文地址原文本系列是针对文档进行的翻译,因为自己在学习的时候,最开始通过看博客或者论坛等中文资料,有些内容是零零散散的接收,并没有给自己带来很好的效果,所以后来决定把文档的原文从头到尾看一遍。 React文档翻译系列(一)安装 原文地址:原文 本系列是针对React文档进行的翻译,因为自己在学习react的时候,最开始通过看博客或者论坛等中文资料,有些内容是零零散散的...

    Fourierr 评论0 收藏0
  • 精益 React 学习指南 (Lean React)- 1.2 JSX 语法

    摘要:需要提醒读者的是,的很多例子都是通过来写的,但这并不是语法,后面我们会有单独的一小节讲解的基本语法,不过目前为止我们先将跟多精力放在上。 书籍完整目录 1.2 JSX 语法 showImg(https://segmentfault.com/img/bVvKLR); 官方文档 https://facebook.github.io/react/docs/jsx-in-depth.html ...

    moven_j 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<