这是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. Jasmine 的自定义部分

    自定义toEqual toEqual mathers 支持用户自定义比较方法,使用的是jasmine.addCustomEquallyTester(myCustomEqualltyFunction)方 ...

  2. PHP面向对象——GD库实现图片水印和缩略图

    今天的实现目标就是使用GD库完成对图片加水印和图 片缩略图两个功能 动身前逻辑准备 属性: 路径 功能: 构造方法 生成水印的方法 获取 图片信息 获取位置信息(123 456 789) 创建图片资源 ...

  3. IP地址和硬件地址 ARP协议

    ip地址使用在网络层以上,是一个逻辑地址,物理地址是数据链路层和物理层使用的 在发送数据的时候,数据是从上层往下层发送的,通过tcp报文->ip数据报->mac数据帧 IP地址放在数据报的 ...

  4. [Linux] PHP程序员玩转Linux系列-怎么安装使用

    现在服务器主流都是Linux系统,主流发行版是CentOS,最新的CentOS版本号是7.3,我公司使用的是CentOS6.5,所以,我还是主要去学习6.x版本的CentOS.桌面版的Linux系统中 ...

  5. TJOI2015 day1解题报告

    博客园的编辑器真的是太蛋疼了= =,想用tex然后上jpg又贴不了链接,真的很纠结啊= = T1:[TJOI2015]线性代数 描述:戳上面吧= = 首先这道题我觉得是这套题最漂亮的一道题了(虽然说学 ...

  6. java程序员--小心你代码中的内存泄漏

    当你从c&c++转到一门具有垃圾回收功能的语言时,程序员的工作就会变得更加容易,因为你用完对象,他们会被自动回收,但是,java程序员真的不需要考虑内存泄露吗? 其实不然 1.举个例子-看你能 ...

  7. jQuery写选项卡

    <!DOCTYPE html> <htmllang="en"> <head> <metacharset="UTF-8" ...

  8. UITableView多层展开与收起

    规则要求: tableview 有多层,类似于xcode文件目录的层级关系,每一个最开始展示的层姑且称之为根目录吧,并且,每个根目录下的层数不定. 与文件目录类似,每个目录下可以有不同层级的目录同时展 ...

  9. CSS1,CSS2选择器详解

    第一.CSS1选择器: 1.元素选择器(也叫标签选择器,是最基本的选择器) <style> html{background-color: red;} div{background-colo ...

  10. 0CSS样式表与HTML结合的方法

    从此王子和公主幸福的生活在了一起:) 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文 ...