关闭

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

343人阅读 评论(0) 收藏 举报
分类:
<!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,但可以使用三目运算

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:62086次
    • 积分:1109
    • 等级:
    • 排名:千里之外
    • 原创:50篇
    • 转载:11篇
    • 译文:0篇
    • 评论:11条
    博客专栏
    最新评论