React入门到精通(二)——React基础实例

原创 2017年01月03日 15:09:37
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/react.js"></script>
    <script src="js/react-dom.js"></script>
    <script src="js/browser.min.js"></script>
</head>
<body>
<!-- 视图区 -->
    <div id="example"></div>
    <script type="text/babel">
        var arr = [
        <h1>Hello World!</h1>,
        <h2>React is awesome</h2>,
        ];

        ReactDOM.render(
            <div>{arr}</div>,
            document.getElementById('example')
        );
    </script>
</body>
</html>

1、这是一个最简单React模板文件,如果不是npm安装,那么就引入三个js文件:

<script src="js/react.js"></script>//核心库
<script src="js/react-dom.js"></script>//提供dom相关的功能
<script src="js/browser.min.js"></script>//负责将jsx转化成javaScript语言

2、添加一个视图区,用于存放生成的html

<div id="example"></div>

3、在js中申明type=”text/babel”,babel可以使浏览器识别jsx语言
<script type="text/babel">
4、ReactDOM.render();方法用来渲染

<script type="text/babel">
        ReactDOM.render(
            <div>
                <p>{2+3}</p>
                <p>{2*3}</p>
                <p>{3>2?'true':'false'}</p>
            </div>,
            document.getElementById('example')
        );
    </script>

React支持运算,需要卸载‘’{}‘’中,jsx不支持if…else,但可以使用三目运算

版权声明:本文为博主原创文章,未经博主允许不得转载。

React入门到精通(一)

React+Node的开发栈可以服务器端渲染,React使用的jsx语言可以支持在js中写HTML。 学习React也是这段时间的目标,所以打算写这么一个系列,供自己沉淀每天学的东西,很多都是网上的...
  • DOCALLEN
  • DOCALLEN
  • 2017年01月03日 13:54
  • 804

[ReactNative入门到精通]React Native概述

2015年9月15日,Facebook发布了 React Native for Android,把 Web 和原生平台的 JavaScript 开发技术扩展到了 Google 的流行移动平台。什么是R...
  • yzzst
  • yzzst
  • 2015年10月11日 01:15
  • 11369

react-native 入门学习指南

本篇汇集了React从入门到精通的各种技术,是你学习RN的指南 。本指南汇集React-Native各类学习资源,给大家提供便利。指南正在不断的更新,大家有好的资源欢迎Pull Requests!同时...
  • snake_son
  • snake_son
  • 2017年01月10日 17:22
  • 749

[ReactNative入门到精通]React Native 第一个程序 Hello Word

人生没有对错,只有选择后的坚持,不后悔,走下去,就是对的。 React Native 项目目录解析 上一节我们简单的新建了一个React Native的项目AwsoneProject,我们什么都没有...
  • yzzst
  • yzzst
  • 2015年10月12日 01:35
  • 5205

React Native 高质量学习资料汇总

去年我整理过一份《平安科技移动开发二队技术周报(特别版のReact Native专题)》,作为 React Native 入门的学习资料,半年多过去了,React Native 发布也已经一年多了,随...
  • u012992171
  • u012992171
  • 2016年07月11日 11:14
  • 2743

React Native从入门到放弃

React Native从入门到放弃最近工作清闲,自己做了个技术调研,选的就是React Native。下面总结下最近一段时间对React Native的研究。Web基础 了解html与dom、jav...
  • xia215266092
  • xia215266092
  • 2016年05月15日 14:31
  • 6284

十分详细的React入门实例

学习React不是一蹴而就的事情,入门似乎也没那么简单。但一切都是值得的。今天给大家带来一个详细的React的实例,实例并不难,但对于初学者而言,足够认清React的思考和编写过程。认真完成这个实例的...
  • a153375250
  • a153375250
  • 2016年09月26日 10:06
  • 31272

在 2016 年学 JavaScript 是一种什么样的体验?(React从入门到放弃)

最近几个月由于工作原因,比较深入折腾了React,对下面这篇文章深有感触,为身边勇敢踏入React和React Native这个大坑的小伙伴点个赞。前端技术这几年发展太快了,目前比较主流的框架是Rea...
  • offbye
  • offbye
  • 2016年10月12日 09:06
  • 4203

React 入门实例教程(原作者: 阮一峰)

转载(http://www.ruanyifeng.com/blog/2015/03/react.html) 现在最热门的前端框架,毫无疑问是 React 。 上周,基于 React 的 React...
  • u014388408
  • u014388408
  • 2016年01月27日 16:10
  • 1517

Raphaeljs入门到精通(一)

//创建一个画布 var paper = new Raphael("paper", 500, 500); //画圆 paper.circle(50, 5...
  • zhangyuanwei88
  • zhangyuanwei88
  • 2014年08月25日 15:47
  • 1106
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:React入门到精通(二)——React基础实例
举报原因:
原因补充:

(最多只允许输入30个字)