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 Native入门——IDE及其他相关基础技术

关于React Native的开发,其中一个问题是缺少好用的IDE,有一款好的IDE还是能提升开发效率的,本篇文章从不同角度对Atom、Sublime、WebStorm进行比较,分部介绍了他们对Rea...

React入门到精通(三)——定义组件和css样式

所谓组件:即分装起来的具有独立功能的UI部件,React希望我们能够将UI组件化,一个功能一个组件,最后通过组合或者嵌套的方式组成一个大的组件,完成UI搭建。 组件 ...

react 入门实例

  • 2016年10月10日 11:55
  • 1.04MB
  • 下载

React 入门实例教程

现在最热门的前端框架,毫无疑问是 React 。 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑。 React 起源...

React 入门实例教程 12个demo

原文链接:http://www.ruanyifeng.com/blog/2015/03/react.html 下面要讲解的12个例子在各个 Demo 子目录,每个目录都有一个 index.html ...

2015年最热门前端框架React 入门实例教程

现在最热门的前端框架,毫无疑问是 React 。 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑。 ...
  • aeaiesb
  • aeaiesb
  • 2015年11月23日 13:49
  • 755

react 入门实例教程

react 入门实例教程 原文链接 http://www.ruanyifeng.com/blog/2015/03/react.html 现在最热门的前端框架,毫无疑问是 ...

React 入门实例教程

作者: 阮一峰 日期: 2015年3月31日 现在最热门的前端框架,毫无疑问是 React 。 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 ...

React 入门实例教程

现在最热门的前端框架,毫无疑问是 React 。上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑。React 起源于 Facebo...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:React入门到精通(二)——React基础实例
举报原因:
原因补充:

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