React入门到精通（二）——React基础实例

最新推荐文章于 2023-09-06 22:49:12 发布

JesusAllen30

最新推荐文章于 2023-09-06 22:49:12 发布

阅读量1.1k

点赞数

分类专栏：前端框架React系列

本文链接：https://blog.csdn.net/docallen/article/details/53994655

版权

前端框架React系列专栏收录该内容

3 篇文章 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，但可以使用三目运算

JesusAllen30

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
React入门到精通（二）——React基础实例

<!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/br
复制链接

扫一扫