React 入门 02 - JSX

前言

React 入门 01 - Hello World中,简单了解了下React基本概念以及如何运用到Html中。现在我们学习一下在React中配合使用最多的JSX相关知识。

JSX

JSX,是一个 JavaScript 的语法扩展。比如如下行语句,它既不是单纯Html语句也不是普通Java Script。JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式,在React中配合使用非常流行。

const element = <h1>Hello, world!</h1>;

JSX 嵌入变量、函数表达式

 我们可以声明基本变量、数组,然后在JSX中使用它。

var users = ['Ria', 'Ming'];
var arr = ['Let\'s start to learn React!']
ReactDOM.render(
    <div> 
        {
            users.map(function(user) {
                return <div><h1>Hello, {user}! </h1></div>
            })

        }
        <div><h2>{arr}</h2></div>
    </div>,
    document.getElementById('root')
);

variable.html Git Hub 🔗

👆上面例子是在JSX中应用变量,同理可以声明函数表达式并完成调用。

function formatName(user) {
    return user.firstName + ' ' + user.lastName;
}

const user = {
    firstName: 'Ria',
    lastName: 'Yang'
};

const element = (
    <h1>
        Hello, {formatName(user)}!
    </h1>
);

ReactDOM.render(
    element,
    document.getElementById('root')
);

function.html Git Hub 🔗

JSX 作为表达式赋值

JSX 也是一个表达式。在编译之后,JSX 表达式会被转为普通 JavaScript 函数调用,并且对其取值后得到 JavaScript 对象。也就是说,你可以在 if 语句和 for 循环的代码块中使用 JSX,将 JSX 赋值给变量,把 JSX 当作参数传入,以及从函数中返回 JSX。

function greeting(user) {
    if (user) {
        return <h1> Hello, {formatName(user)}! </h1>;
    }

    return <h1> Hello, Stranger! </h1>;
}

expressions.html Git Hub 🔗

 

 

已标记关键词 清除标记
相关推荐
<span style="color:#666666;font-size:14px;background-color:#FFFFFF;">React和VUE是目前最火的前端框架,就业薪资很高,本课程教您如何快速学会React和VUE并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习React和VUE高薪就业的你来说,那么这门课程便是你手中的葵花宝典。</span><br /><br /><span style="color:#666666;font-size:14px;background-color:#FFFFFF;">学习技巧:此系列课react和vue可以单独学习,无需学会react再学习vue,学习当中不要只看,一定要多敲代码,如果碰到某一个知识点不是很明白,不要钻牛角尖,千万不要因为一个点,放弃整个森林,接着往下学,硬着头皮开发项目只要能亲自开发一个完整的项目,你会发现不明白的地方自然而然就明白了,项目做出来就真正的学会了。</span><br /><br /><p> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;">此react和vue课程以面试和实战为基础进行讲解,每个知识点都会让你知道在实际项目开发中如何使用,学习后,可以开发大型项目,增强逻辑思维,至少让你拥有3年以上开发经验的实力!</span> </p> <p> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;"><br /></span> </p> <p> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;"><span style="color:#666666;font-size:14px;background-color:#FFFFFF;">免费提供《企业级完整实战项目接口文档》,绝对可用!</span><br /><br /><span style="color:#666666;font-size:14px;background-color:#FFFFFF;">课程代码和ppt均可下载!</span><br /></span> </p> <p> <span style="color:#666666;font-size:14px;background-color:#FFFFFF;"><span style="color:#666666;font-size:14px;background-color:#FFFFFF;"><img src="https://img-bss.csdn.net/202001081405016470.jpg" alt="" /><img src="https://img-bss.csdn.net/202001081405216987.jpg" alt="" /><img src="https://img-bss.csdn.net/202001081405399767.png" alt="" /><img src="https://img-bss.csdn.net/202001081405501839.jpg" alt="" /><br /></span></span> </p>
©️2020 CSDN 皮肤主题: 酷酷鲨 设计师:CSDN官方博客 返回首页