前  言

　　毫无疑问，react是目前最最热门的框架(没有之一)，了解并学习使用React，可以说是现在每个前端工程师都需要的。

　　在前端领域，一个框架为何会如此之火爆，无外乎两个原因：性能优秀，开发效率高。React当然集成了这两大优点。

　　这要归功于React的两大特点，也是该框架一直强调的优势：

　　1.虚拟dom与dom diff：在React中，一切的更新都是先更新虚拟dom，再根据react自带的dom diff 算法，进行对比计算，在实际dom中实现最小粒度的更新，这就是React性能优秀的原因了！

　　2.一切皆是组件：React强调一切皆是组件，那么组件就是React的核心元素，在使用React开发时，开发人员会对各种颗粒进行组件化开发，自然而然的提升了代码复用度，提升了开发效率。

　　本系列文章，每篇都会有个小实例，带领大家一步步的走进React开发的世界。

　　文章预告　

　　本系列文章分为

　　React实例入门教程(1)基础API,JSX语法--hello world

　　React实例入门教程(2)组件与组件的生命周期--弹窗组件

　　React实例入门教程(3)数据流之props与state--实时更新的倒计时组件

　　React实例入门教程(4)事件处理--事件丰富的swipe组件

　　React实例入门教程(5)总结--咪咕阅读首页开发实战

　　　　　　　　　　　　　　　　　　　　　　　　　LET'S START

　　作为本系列教程的第一篇，按照国际惯例，我们先从HELLO WORLD 开始~，那么先看看本例的代码吧：

　　

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>hello world</title>

    <script src="react.js"></script>

    <script src="react-dom.js"></script>

    <script src="browser.min.js"></script>

</head>

<body>

    <div id="demo"></div>

    <script type="text/babel">

        var Helloworld = React.createClass({

            render:function(){

                return <div>hello world</div>;

            }

        });

        ReactDOM.render(<Helloworld/>,document.getElementById("demo"));

    </script>

</body>

</html>

　　以上代码需要注意：最后的<script>标签type是“text/babel”。因为React使用的是JSX语法，他与传统js语法不兼容，所以type要选择babel。

　　最开始引入的js中，react和react-dom是react基础库，而browser.js是用来线上分析JSX语法的，真实项目上线中并不会引用这个，而是再上线前进行编译（使用工具babel等）转换成传统js语法再上线。（因为browser线上编译很影响性能）。为了方便大家的学习，现在这里直接引入了该js。

基础API

　　从上面示例代码可以看到，我们使用一些API，这些API都是非常基础的，下面我来做简单的介绍：

　　React.createClass:　　

　　前言里说到react一切皆是组件，那么React.createClass就是最基本的创建组件的方法，它的第一个传入参数是json对象，代表组件的主体，该json其中，有必带的和可选择的参数，其必带参数为render，类型是函数要求返回该组件的模版。

　　使用方式可见篇头示例，具体细节会在后续组件章节中做介绍。

　　ReactDOM.render:

　　ReactDOM.render 是 React 的最基本方法，用于将模板(html，jsx,React.createElement等)转为 HTML ，并插入指定的 DOM 节点。

　　看下面的示例代码

　ReactDOM.render(<h1>HELLO,REACT!</h1>,document.getElementById("example"));

　　就是将一段html结构输出到id为example浏览器，效果如下：

JSX

　　JSX即JavaScript XML，即一种在React内部构建的标签语法，React不使用JSX一样可以工作，但是使用JSX可以让代码简洁，提高代码可读性，因此推荐使用：

　　那么，我们来看看对比，前面示例代码中，使用了JSX语法的语句为：

<Helloword/>

　　如果不使用JSX语法将变成：

React.createElement("Helloword",{},"");

　　可见JSX语法的优势。

　　那么让我们来学习JSX语法：

　　JSX和HTML很像，但却不同于HTML，JSX中标签名可以是HTML标签，也可以是自己定义的组件，如前面示例中的Helloworld组件。那么我们来具体看看JSX与HTML的不同处和需要注意的地方：

　　属性引用：

　　HTML ：

<div id="some-id" class="some-class" style="color:red;">...</div>

　　JSX ：

<div id="someId" className={someClass} style={{color:red}}>...</div>

　　如上示例所示，JSX语法中，属性的引入拥有HTML的方式（文本直接赋值）；也可以引用JS变量（如：someClass）,方式是使用大括号包裹，其中要注意的是，class在JSX中要写成className，style的 赋值要写成json的引入 ，如上例。

　　条件判断：

　　在JSX标签的属性中，我们可以使用条件判断来根据条件生成JSX，JSX允许的条件判断方式是，三目运算符，逻辑与(&&)运算符，使用变量，使用函数。

　　看面的示例代码：

　　给出一个函数：

　　

function getNumber(){

　return Math.floor(Math.random()*100);

}

　　对应JSX片段：

　　<div className={this.state.num>1?"demo1":"demo2"} >{getNumber()}</div>

　　这段jsx 会根据this.state.num值来选择对应的class，并随机生成数字来填充内容。

　　事件绑定

　　JSX中，和HTML事件绑定类似，对应的事件名称为onClick,onChange等：

　　<div onClick={this.handleClick}>...</div>

　　特殊用法

　　数组引入：

var jsxArr = [<div>1</div>,<div>2</div>,<div>3</div>,<div>4</div>];

ReactDOM.render(<div>{jsxArr}</div>,...);

输出的结果等同于

ReactDOM.render(<div><div>1</div><div>2</div><div>3</div><div>4</div></div>,...);

　　JSX可以根据数组直接遍历产出JSX结构

　　循环遍历：

　　类似于数组，我们可以使用循环的方式产生jsx 结构

var demos= ['demo1', 'demo2', 'demo3'];

ReactDOM.render(

  <div>

  {

    demos.map(function (demo) {

      return <div>Hello, {demo}</div>

    })

  }

  </div>,...);

产出的结果为：

Hello，demo1！

Hello，demo2！

Hello，demo3！

你看懂了么~

以上就是对React 基础API，和 JSX语法的介绍讲解了，那么回头看看最初的示例代码，是不是已经了解如何使用了呢？

预知后续内容 请关注微信公众号 --Web前端Talk （微信号:migufe）

每周更新一篇~

 

【原创】React实例入门教程(1)基础API,JSX语法--hello world的更多相关文章

  1. React实例入门教程(1)基础API,JSX语法--hello world

      前  言 毫无疑问,react是目前最最热门的框架(没有之一),了解并学习使用React,可以说是现在每个前端工程师都需要的. 在前端领域,一个框架为何会如此之火爆,无外乎两个原因:性能优秀,开发 ...

  2. 无废话ExtJs 入门教程十九[API的使用]

    无废话ExtJs 入门教程十九[API的使用] extjs技术交流,欢迎加群(201926085) 首先解释什么是 API 来自百度百科的官方解释:API(Application Programmin ...

  3. 基于Nodejs生态圈的TypeScript+React开发入门教程

    基于Nodejs生态圈的TypeScript+React开发入门教程   概述 本教程旨在为基于Nodejs npm生态圈的前端程序开发提供入门讲解. Nodejs是什么 Nodejs是一个高性能Ja ...

  4. VB6 GDI+ 入门教程[5] 基础绘图小结

    http://vistaswx.com/blog/article/category/tutorial/page/2 VB6 GDI+ 入门教程[5] 基础绘图小结 2009 年 6 月 18 日 4条 ...

  5. React Native入门教程2 -- 基本组件使用及样式

    在上一篇文章中,我们学会了如何搭建React Native的环境(React Native入门教程(笔记) 1 – 开发环境搭建),不知道你们是否搭建好了呢,如果还没有,那么快动起小手,来体验RN带给 ...

  6. React Native入门教程 3 -- Flex布局

    上一篇文章中介绍了基本组件的使用 React Native入门教程(笔记) 2 – 基本组件使用及样式 本节内容将继续沿用facebook官方例子介绍如何使用Flexbox布局把界面设计的多样化. 转 ...

  7. React Native入门教程 1 -- 开发环境搭建

    有人问我为啥很久不更新博客..我只能说在学校宿舍真的没有学习的环境..基本上在宿舍里面很颓废..不过要毕业找工作了,我要渐渐把这个心态调整过来,就从react-native第一篇博客开始.话说RN也出 ...

  8. Linux Capabilities 入门教程：基础实战篇

    该系列文章总共分为三篇: Linux Capabilities 入门教程:概念篇 Linux Capabilities 入门教程:基础实战篇 待续... 上篇文章介绍了 Linux capabilit ...

  9. Capabilities 入门教程：基础实战篇

    该系列文章总共分为三篇: Linux Capabilities 入门教程:概念篇 Linux Capabilities 入门教程:基础实战篇 待续... 上篇文章介绍了 Linux capabilit ...

随机推荐

  1. ubuntu双屏调整分辨率

    查看屏幕硬件指标 # xrandr Screen 0: minimum 8 x 8, current 2390 x 768, maximum 32767 x 32767 LVDS1 connected ...

  2. nginx 升级为最新版 nginx -1.12.0

    标签:nginx 公司目前使用的nginx版本比较低(nginx-1.0.12),请网络安全公司做了一下“远程安全评估”,发现有下列漏洞: nginx URI处理安全限制绕过漏洞(CVE-2013-4 ...

  3. UOJ#210. 【UER #6】寻找罪犯 2-sat

    #210. [UER #6]寻找罪犯 链接:http://uoj.ac/problem/210 想法:2-sat模型.每个人拆点,分别表示为犯人.非犯人.每个句供词拆点,分别表示真话.假话.供词与对应 ...

  4. Android多媒体框架总结(1) - 利用MediaMuxer合成音视频数据流程分析

    场景介绍: 设备端通过服务器传向客户端(Android手机)实时发送视频数据(H.264)和音频数据(g711a或g711u), 需要在客户端将音视频数据保存为MP4文件存放在本地,用户可以通过APP ...

  5. 比特币中P2PKH(pay-to-public-key-hash)的锁定脚本和解锁脚本

    脚本格式 P2PKH的锁定脚本为: OP_DUP OP_HASH160 PUSHDATA(<Cafe Public Key Hash>) OP_EQUALVERIFY OP_CHECKSI ...

  6. SRM 670 div2 A B C div1 A（贪心，子问题合并）

    A Cdgame brute force... B Drbalance 贪心,每次选最前面的-变成+,相当于后面所有的负值+2. C Treestrat 考虑集中去抓一个Red Token,以这个To ...

  7. 2013年6月 最新Godaddy（持续更新）

    关于Godaddy Godaddy 是世界上最大的域名注册商,Godaddy管理的域名超过5000万.同时,Godaddy也是最大的主机服务商,据多家监测机构显示,放置在Godaddy上的网站数量已经 ...

  8. 2018.6.2 AndroidStudio项目中的问题：===== oast.LENGTH_LONG和Toast.LENGTH_SHORT分别对应多长时间

    oast.LENGTH_LONG和Toast.LENGTH_SHORT分别对应多长时间 在Android源码中的NotificationManagerService.java这个类中定义了两个静态变量 ...

  9. centos 7 虚拟机启用网卡

    1.vi /etc/sysconfig/network-scripts/ifcfg-enp0s3 2.编辑默认网卡配置文件,将ONBOOT由no改为yes,编辑完成后,按ESC回至命令模板,输入&qu ...

  10. angular2+ form 表单中 input输入框的disabled属性设置无效

    最近项目中遇到一个表单input设置disabled问题,直接赋值angular原生的[disabled]=“isDisabled”无效,浏览器警告信息: 无奈,只能按照控制台提示修改: 问题解决