jsx入门

朱雀 2022-05-30 06:49 190阅读 0赞

sublime-text配置

1，安装babel-sublime
    https://github.com//babel/babel-sublime

2.使用crtl+e生成标签  
[文档][Link 1]  
1.JSX 中嵌入表达式  
在jsx中使用 花括号 把任意的 JavaScript 表达式 嵌入到 JSX 中。  
例如，2 + 2， user.firstName， 和 formatName(user)，这些都是可用的表达式。

import React from "react";
    import { render } from "react-dom";
    import Hello from "./Hello";
    
    function formatName(user) { 
      return user.firstName + ' ' + user.lastName;
    }
    
    const user = {
      firstName: 'Harper',
      lastName: 'Perez'
    };
    //为便于阅读，我们将 JSX 分割成多行。我们推荐使用括号将 JSX 包裹起来，虽然这不是必须的，但这样做可以避免分号自动插入的陷阱。
    const element = (
      <h1>
        Hello, {formatName(user)}!
      </h1>
    );
    
    render(
      element,
      document.getElementById('root')
    );

警告：
    
    比起 HTML ， JSX 更接近于 JavaScript ， 所以 React DOM 使用驼峰(camelCase)属性命名约定, 而不是HTML属性名称。
    
    例如，class 在JSX中变为className，tabindex 变为 tabIndex。

react防止xss注入的

<div dangerouslySetInnerHTML={ { __html:data.connect} }>

[Link 1]: http://www.css88.com/react/docs/introducing-jsx.html

发表评论取消回复

表情：

评论列表（有 0 条评论，190人围观）

还没有评论，来说两句吧...

相关阅读

相关 JSX语法入门学习

JSX语法入门学习 1、特点 > 1. JSX只是高级语法糖, 最终执行时还是会被转成原生js, 通过babel等方式; > 2. 更加语义化, 更加直观, 代

- 日理万妓/ 2022年11月19日 04:10/ 0 赞/ 241 阅读

相关 React框架入门-创建项目、JSX了解

安装react官方脚手架（这里如果没有安装的话需要安装，安装一次即可） npm install -g create-react-app 创建项目初始化项目

偏执的太偏执、/ 2022年11月03日 00:45/ 0 赞/ 240 阅读

相关 React之JSX入门

React是由ReactJS与React Native组成，其中ReactJS是Facebook开源的一个前端框架，React Native 是ReactJS思想在nati

蔚落/ 2022年09月21日 14:28/ 0 赞/ 235 阅读

相关 React学习 -- JSX

React为了方便组件化，需要构建HTML结构化页面。那么React是如何操作的呢？答案是，React通过创建与更新虚拟元素来管理整个虚拟DOM。虚拟DOM是什么：由于DO

秒速五厘米/ 2022年06月17日 11:49/ 0 赞/ 235 阅读

相关 jsx插入html

jsx插入html var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';

悠悠/ 2022年06月02日 10:36/ 0 赞/ 209 阅读

相关 jsx入门

sublime-text配置 1，安装babel-sublime https://github.com//babel/babel-sublime 2.使用c

朱雀/ 2022年05月30日 06:49/ 0 赞/ 191 阅读

相关深入理解JSX

JSX是React为JavaScript语法带来的可选扩展，用于在JavaScript代码中编写声明式XML风格语法。对于Web项目而言，React的JSX

小灰灰/ 2022年04月22日 13:34/ 0 赞/ 211 阅读

相关 React之JSX

React JSX React 使用 JSX 来替代常规的 JavaScript。 JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。我们不需

心已赠人/ 2022年04月16日 03:46/ 0 赞/ 275 阅读

相关简介JSX

JSX是什么接触过react或者vue的同学可能知道或者了解jsx,我也接触react两年了，但是昨天我问了自己一下‘jsx是什么’，我却不能流利回答处理，只是一直使用

分手后的思念是犯贱/ 2022年01月20日 15:47/ 0 赞/ 310 阅读

相关 JSX简介

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] 根据官方文档学习，并记录一下学习过程中遇到的问题。观

矫情吗；*/ 2022年01月13日 11:17/ 0 赞/ 233 阅读