JSX基础语法(一)——插值表达式需要使用单的花括号 & 标签的属性也可以是动态值 & label标签的for属性需要换成 htmlFor & JSX标签可以包含子元素-JSX元素外可添加一个小括号

JSX基础语法——插值表达式需要使用单的花括号 & 标签的属性也可以是动态值 & label标签的for属性需要换成 htmlFor & JSX标签可以包含子元素-JSX元素外可添加一个小括号

  • JSX是什么
// What is this? This is JSX(js的语法扩展:在js中写HTML标签)
let info = 
Hello World!
;
  • JSX元素中动态插入数据
let name = 'World'
const element = <h1>Hello, {
     name}</h1>;
  • JSX设置动态属性值
    • 驼峰形式属性名(标准属性)
let cname = 'current'
let element = <div className={
     cname}>{
     msg}</div>
  • JSX可以包含子元素
    • JSX元素必须包含一个跟元素
    • 外层的小括号是可选的
const element = (
  <div>
    <h1>Hello!</h1>
    <h1>Nihao</h1>
  </div>
);

实例一

文件结构

JSX基础语法(一)——插值表达式需要使用单的花括号 & 标签的属性也可以是动态值 & label标签的for属性需要换成 htmlFor & JSX标签可以包含子元素-JSX元素外可添加一个小括号_第1张图片

1、文件夹lib同上

2、js文件夹下,新建01-JSX基础用法.js文件,内容如下

/*
  JSX基础语法
*/

// 1、插值表达式需要使用单的花括号
let uname = 'TOM'
let element = <h1>Hello {
     uname}</h1>

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

3、02.html文件如下


<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Documenttitle>
  
  <script type="text/javascript" src="./lib/react.development.js">script>
  <script type="text/javascript" src="./lib/react-dom.development.js">script>
  
  <script type="text/javascript" src="./lib/babel.min.js">script>
head>

<body>
  
  <div id="root">div>
  
  <script type="text/babel" src="./js/02-JSX基础语法.js">script>
body>

html>

4、在VScode中,在VScode中打开,需安装插件Live Server,右键打开Open With Live Server,打开页面

JSX基础语法(一)——插值表达式需要使用单的花括号 & 标签的属性也可以是动态值 & label标签的for属性需要换成 htmlFor & JSX标签可以包含子元素-JSX元素外可添加一个小括号_第2张图片

实例二

替换二,2、js文件夹下,新建01-JSX基础用法.js文件,内容如下

/*
  JSX基础语法
*/

// 2、标签的属性也可以是动态值
let cls = 'active'
// 在React的JSX标签中,class需要换成className
let element = <div abc='123' className={
     cls}>动态属性</div>

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

跨域显示

JSX基础语法(一)——插值表达式需要使用单的花括号 & 标签的属性也可以是动态值 & label标签的for属性需要换成 htmlFor & JSX标签可以包含子元素-JSX元素外可添加一个小括号_第3张图片

实例三

2、js文件夹下,新建01-JSX基础用法.js文件,内容如下

/*
  JSX基础语法
*/

// 2、标签的属性也可以是动态值
let cls = 'active'
// 在React的JSX标签中,class需要换成className
// let element = 
动态属性
// 3、在React的JSX标签中,label标签的for属性需要换成 htmlFor let element = <label htmlFor="male"></label> ReactDOM.render(element, document.getElementById('root'))

3、02.html文件如下


<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Documenttitle>
  
  <script type="text/javascript" src="./lib/react.development.js">script>
  <script type="text/javascript" src="./lib/react-dom.development.js">script>
  
  <script type="text/javascript" src="./lib/babel.min.js">script>
head>

<body>
  
  <form>
    <label for="male">label>
    <input type="radio" id="male">
  form>
  <div id="root">div>
  
  <script type="text/babel" src="./js/02-JSX基础语法.js">script>
body>

html>

4、在VScode中,在VScode中打开,需安装插件Live Server,右键打开Open With Live Server,打开页面

JSX基础语法(一)——插值表达式需要使用单的花括号 & 标签的属性也可以是动态值 & label标签的for属性需要换成 htmlFor & JSX标签可以包含子元素-JSX元素外可添加一个小括号_第4张图片

实例四

替换二,2、js文件夹下,新建01-JSX基础用法.js文件,内容如下

/*
  JSX基础语法
*/

// 4、JSX标签可以包含子元素
// JSX元素必须有唯一的跟节点
let element = <div><label htmlFor="male"></label><input type="radio" id="male"/></div>


// 5、JSX元素外层可以添加一个小括号,增强代码的可读性,但是不是必须的——注意写法
let element = (
  <div>
    <label htmlFor="male"></label>
    <input type="radio" id="male"/>
  </div>
)
ReactDOM.render(element, document.getElementById('root'))

跨域显示

JSX基础语法(一)——插值表达式需要使用单的花括号 & 标签的属性也可以是动态值 & label标签的for属性需要换成 htmlFor & JSX标签可以包含子元素-JSX元素外可添加一个小括号_第5张图片

你可能感兴趣的:(react知识,js,css,html)