这是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. 华为荣耀畅玩5C NEM-UL10 ROOT那些事儿(亲测成功)

    以前ROOT手机都是在手机上安装KingRoot 刷机精灵等软件分分钟成功(不排除偶然,,比如这款华为荣耀...) 手机安装KingRoot等软件,,,失败   电脑上安装连接手机Root,,,,失败 ...

  2. asp.net core mvc实现伪静态功能

    在大型网站系统中,为了提高系统访问性能,往往会把一些不经常变得内容发布成静态页,比如商城的产品详情页,新闻详情页,这些信息一旦发布后,变化的频率不会很高,如果还采用动态输出的方式进行处理的话,肯定会给 ...

  3. c++编程思想(三)--c++中c 续,重点sizeof和内存对齐

    之前理论性的太多,下面就是代码及理论结合了 1.sizeof()是一个独立运算符,并不是函数,可以让我们知道任何变量字节数,可以顺带学一下struct,union,内存对齐 内存对齐:为了机器指令快速 ...

  4. iptables禁止ping入

    iptables禁止ping入 以下设置将允许自己往外ping 不允许别人ping自己 vi /etc/sysconfig/iptables 加入如下2条规则 -A INPUT -p icmp --i ...

  5. 《剑指offer》— JavaScript(18)二叉树的镜像

    二叉树的镜像 题目描述 操作给定的二叉树,将其变换为源二叉树的镜像. 相关知识 二叉树的镜像定义: 源二叉树 镜像二叉树 思路 有关二叉树的算法问题,一般都可以通过递归来解决.那么写一个正确的递归程序 ...

  6. 读书笔记 effective c++ Item 21 当你必须返回一个对象的时候,不要尝试返回引用

    1. 问题的提出:要求函数返回对象时,可以返回引用么? 一旦程序员理解了按值传递有可能存在效率问题之后(Item 20),许多人都成了十字军战士,决心清除所有隐藏的按值传递所引起的开销.对纯净的按引用 ...

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

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

  8. 【Java基础】反射机制

    反射 反射可以使我们很方便的创建灵活的代码,这些代码可以在运行时装配,无需在组件之间进行源代码链接.反射允许我们在编写和执行时,使我们的代码能够接入装载到JVM中的类的内部信息,而不是源代码中选定的类 ...

  9. iOS开发之仿射变换示例总结

    本篇博客比较简单,但还是比较实用的.其中的示例依然使用Swift3.0来实现,该博客算是下篇博客的一个引子,因为我们下篇博客要介绍使用Swift开发iOS应用中常用的一些Extension.而在这些E ...

  10. ThinkPHP项目总结

    1.当你 require ThinkPHP之后,会自动在App目录下生成 common, Home, Runtime 三个文件夹. 2.输入网址 http://localhost/blog/app/i ...