这是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. C# 6 与 .NET Core 1.0 高级编程 - 39 章 Windows 服务(下)

    译文,个人原创,转载请注明出处(C# 6 与 .NET Core 1.0 高级编程 - 39 章 Windows 服务(下)),不对的地方欢迎指出与交流. 章节出自<Professional C ...

  2. Giraph入门

    概要 这是一个Giraph的入门教程,主要用来运行少量输入的Giraph程序,并不能用于生产环境. 在这个教程中,我们将会在一个物理机器行部署一个单节点,伪分布的Hadoop集群.这个节点既是mast ...

  3. Python 接口测试(一)

    @font-face { font-family: "Times"; }@font-face { font-family: "宋体"; }@font-face ...

  4. Redis之Sentinel高可用安装部署

    背景: 之前通过Redis Sentinel 高可用实现说明和Redis 复制.Sentinel的搭建和原理说明大致已经介绍了sentinel的原理和实现,本文再次做个简单的回顾.具体的信息见前面的两 ...

  5. 归纳篇(一)CSS的position定位和float浮动

    近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进 ...

  6. Java虚拟机学习 - 体系结构 内存模型(1)

    一:Java技术体系模块图 二:JVM内存区域模型 1.方法区 也称"永久代" ."非堆",  它用于存储虚拟机加载的类信息.常量.静态变量.是各个线程共享的内 ...

  7. Error: Cannot find module 'gulp-clone'问题的解决

    安装完gulp环境,并且配置好gulpfile.js,执行静态文件压缩和代码混淆时,出现如下错误: Error: Cannot find module 'gulp-clone' Error: Cann ...

  8. 【整理】图解隐马尔可夫模型(HMM)

    写在前面 最近在写论文过程中,研究了一些关于概率统计的算法,也从网上收集了不少资料,在此整理一下与各位朋友分享. 隐马尔可夫模型,简称HMM(Hidden Markov Model), 是一种基于概率 ...

  9. 使用moy快速开发后台管理系统(一)

    moy是什么? moy 是基于模型框架 kero 和 UI 框架 neoui 实现的应用框架,是前端集成解决方案,为企业级应用开发而生.github地址:iuap-design/tinper-moy ...

  10. 详解Swing中JTree组件的功能

    JTree组件是另外一个复杂组件,它不像 JTable 那样难用,但是也不像 JList 那么容易.使用 JTree 时麻烦的部分是它要求的数据模型. JTree组件的功能来自树的概念,树有分支和叶子 ...