这是React文档翻译系列的第二篇,前一篇介绍了如何安装react,本篇主要介绍react的知识体系,掌握了基本的知识体系,才能更好的学习React。

Hello World

开始React最简单的方式就是在CodePen上使用Hello World示例。无需安装任何环境,只需要在其他标签页打开它然后跟着我们的例子去做。如果更喜欢使用本地开发环境,可以访问安装页面。

最小的React例子如下:

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

它会在页面上渲染一个标题'Hello World'。

接下来的几部分会逐步的介绍如何使用React。我们会查验React应用的构建块:元素和组件。一旦掌握了他们,就可以使用小的可复用片段创建复杂的应用。

关于Javascript的说明

React是一个Javascript库,所以它需要你对Javascript开发语言有一个基本的了解。如果觉得不自信,我们推荐先掌握Javascript的知识,这样才能更容易的跟上脚步。

在例子中也使用了一些ES6的语法。我们尽量谨慎的去使用ES6,因为它相对来说还是比较新的,但是还是鼓励先去熟悉一下箭头函数模板字符串letconst声明。可以使用在线Babel转换器(Babel REPL)查看ES6的代码编译。

React文档翻译系列(二)Hello World的更多相关文章

  1. React文档翻译系列(三)JSX简介

    # React文档翻译系列(三)JSX简介 先来看一下下面的变量声明: ``` const element = Hello world! ``` 这种有趣的标签语法既不是字符串也不是HTML. 这种形 ...

  2. React文档翻译系列(一)安装

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

  3. React Native 系列(二) -- React入门知识

    前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...

  4. React Native 系列(二)

    前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...

  5. 【REACT NATIVE 系列教程之十二】REACT NATIVE(JS/ES)与IOS(OBJECT-C)交互通信

    http://blog.csdn.net/xiaominghimi/article/details/51586492 一用到跨平台的引擎必然要有引擎与各平台原生进行交互通信的需要.那么Himi先讲解R ...

  6. React 深入系列3:Props 和 State

    文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列3:Props 和 State React 深入系列,深入讲解了React中的重点概念.特性和模式 ...

  7. Orchard core 中文文档翻译系列

    本系列翻译顺序完全参照 官方顺序 原文地址:https://orchardcore.readthedocs.io/en/latest/ Orchard Core 中文文档翻译(一)关于Orchard ...

  8. 手牵手,从零学习Vue源码 系列二(变化侦测篇)

    系列文章: 手牵手,从零学习Vue源码 系列一(前言-目录篇) 手牵手,从零学习Vue源码 系列二(变化侦测篇) 陆续更新中... 预计八月中旬更新完毕. 1 概述 Vue最大的特点之一就是数据驱动视 ...

  9. 前端构建大法 Gulp 系列 (二):为什么选择gulp

    系列目录 前端构建大法 Gulp 系列 (一):为什么需要前端构建 前端构建大法 Gulp 系列 (二):为什么选择gulp 前端构建大法 Gulp 系列 (三):gulp的4个API 让你成为gul ...

随机推荐

  1. Input file 文本框美化

    HTML原生的input file 上传按钮有多(无)不(力)漂(吐)亮(槽)我就不多说了.大家几乎在项目中都会有遇到图片.等文件需要上传的地方,好看的文件上传按钮会使人身心愉悦(我瞎说的).好了不多 ...

  2. Asp.net mvc 知多少(八)

    本系列主要翻译自<ASP.NET MVC Interview Questions and Answers >- By Shailendra Chauhan,想看英文原版的可访问[http: ...

  3. 获取CPU和内存呢信息

    #include <stdio.h> #include <stdlib.h> #include <winsock.h> #pragma comment(lib, & ...

  4. MASM32快速起步

    MASM32是一个免费的软件程序,让您编辑Microsoft宏汇编程序(MASM)代码从一个基本的文本界面.它强调MASM代码各部分以不同的颜色,使其更容易扫描和检测错误.它提供了一个简单的布局程序员 ...

  5. path和classpath的用途

    1 path很明显是unix shell的环境变量,比如bash shell,输入一个命令,它会先去path指定的目录下查找是不是有该命令的可执行文件. 2 -classpath 只是用在下面这种不发 ...

  6. 学习git的使用--在当地的简单命令--01

    <----------git安装完成后操作-----------------> git config --global user.name "scy"添加用户名git ...

  7. DOM操作表格——HTML DOM

    html创建表格: <table berder='1' width='300'> <thead> <tr> <th>姓名</th> < ...

  8. 前端学PHP之正则表达式基础语法

    前面的话 正则表达式是用于描述字符排列和匹配模式的一种语法规则.它主要用于字符串的模式分割.匹配.查找及替换操作.在PHP中,正则表达式一般是由正规字符和一些特殊字符(类似于通配符)联合构成的一个文本 ...

  9. 【转】Netty系列之Netty可靠性分析

    http://www.infoq.com/cn/articles/netty-reliability 首先,我们要从Netty的主要用途来分析它的可靠性,Netty目前的主流用法有三种: 1) 构建R ...

  10. [Qt初级] 解决 中QMainWindow和QDockWidget添加布局失败问题

    初接触Qt,使用的教程是陆文周编写的<Qt5开发及实例>一书. 其中有关于QDockWidget.QStackedWidget这些类的介绍和使用实例. 要首先说明的是书上讲的非常的清楚,代 ...