React学习-jsx语法

最新推荐文章于 2024-07-17 15:26:15 发布

原味的你

最新推荐文章于 2024-07-17 15:26:15 发布

阅读量204

点赞数 1

文章标签： react javascript html

本文链接：https://blog.csdn.net/weixin_43005178/article/details/109110440

版权

React 同时被 3 个专栏收录

15 篇文章 0 订阅

订阅专栏

前端

1 篇文章 0 订阅

订阅专栏

JSX

1 篇文章 0 订阅

订阅专栏

React学习-jsx语法

react官网

https://reactjs.org/

创建一个空文件并引入React的js脚本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</html>

PS：第一个和第二个js不能反，必须是先有react，再有react-dom
jsx是js的语法糖，为了方便去写dom
创建一个div，让ReactDOM去渲染

<body>
    <div id="app"></div>
</body>
<script type="text/babel">
    let oDiv = <div>hello react!</div>;
    ReactDOM.render(oDiv,document.querySelector("#app"))
</script>

需要让react渲染的标签要在相应的script标签带上

type="text/babel"

如果不带上就会报下面这个错误，用webpack配置项目的时候，会去配置babel

Uncaught SyntaxError: Unexpected token '<'

标签必须是嵌套的，和vue一样需要有一个root标签进行包裹，不能像下面这样

let oDiv = <div>hello react!</div><p></p>;

react中单标签必须闭合

    let oDiv = (
       <div>
            <div>hello react!</div>
            <img src="" alt=""/>
        </div>
    );

1）一般js变量用{}渲染
2）style要在{}要用一个JSON对象的形式去写样式
3）class要用className替代
4）可以用三目来做判断
5）调用函数直接在{}中调用
6）事件触发的函数也写在{}中
7）类似img标签中src这种属性也写在{}中

<script type="text/babel">
    let text = 'hello react'
    let n = false
    let textStyle = {color:'red'}
    let imgUrl = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xMS41IC0xMC4yMzE3NCAyMyAyMC40NjM0OCI+CiAgPHRpdGxlPlJlYWN0IExvZ288L3RpdGxlPgogIDxjaXJjbGUgY3g9IjAiIGN5PSIwIiByPSIyLjA1IiBmaWxsPSIjNjFkYWZiIi8+CiAgPGcgc3Ryb2tlPSIjNjFkYWZiIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIi8+CiAgICA8ZWxsaXBzZSByeD0iMTEiIHJ5PSI0LjIiIHRyYW5zZm9ybT0icm90YXRlKDYwKSIvPgogICAgPGVsbGlwc2Ugcng9IjExIiByeT0iNC4yIiB0cmFuc2Zvcm09InJvdGF0ZSgxMjApIi8+CiAgPC9nPgo8L3N2Zz4K'
    function add(m,n){
        return m+n
    }
    function click(){
        alert('666')
    }
    let oDiv = (
        <div>
            <span>{text}</span>
            <div style={textStyle}>666</div>
            <div className="test">999</div>
            <div>{n?'是true':'是false'}</div>
            <div>{add(3,4)}</div>
            <button onClick={click}>点我</button>
            <img src={imgUrl}/>
        </div>
    );
    ReactDOM.render(oDiv,document.querySelector("#app"))
</script>
<style>
    .test{
        color:blue
    }
</style>

原味的你

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
React学习-jsx语法

React学习-jsx语法react官网https://reactjs.org/创建一个空文件并引入React的js脚本<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title
复制链接

扫一扫