学习React中的jsx-保证你看的明明白白

//index.js 文件 这个文件是src下的文件。
//我使用这个文件是为了方便练习React
import React from 'react'; //这个是react这个包，我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom
// jsx的书写
const name='我是变量'
const contHtml = (
  <h2>
    <p className='p-header'>开始学习React--class变成className </p>
    <p className='p-cont'>开始使用变量 {name} </p>
  </h2>
)
// root在index.html中可以找到这个变量哈
ReactDOM.render(contHtml, document.getElementById('root'))

//index.js 文件
import ReactDOM from 'react-dom'; //这个是react的虚拟dom
const isLoadFlag = true
const locadData = () => { 
  if (isLoadFlag) {
    return <div>加载中loading...</div>
  } else { 
    return <div>数据已经加载完了哈</div>
  }
}
// jsx中也可以去调用函数哈
const contHtml = (
  <div>
    我在jsx去调用函数哈 {locadData() }
    <p>这里面是jsx,因为可以返回jsx</p>
  </div>
)
ReactDOM.render(contHtml, document.getElementById('root'))

import React from 'react'; //这个是react这个包，我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom
const isLoadFlag = true
const locadData = () => { 
  return isLoadFlag ? ( <div>加载中loading...</div> ) :  <div>数据已经加载完了哈</div>
}
// jsx中也可以去调用函数哈
const contHtml = (
  <div>
    我在jsx去调用函数哈 {locadData() }
    <p>这里面是jsx,因为可以返回jsx</p>
  </div>
)
ReactDOM.render(contHtml, document.getElementById('root'))

import React from 'react'; //这个是react这个包，我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom
const listArr = [
  { id: 1, name: '张三2' },
  { id: 2, name: '张三3' },
  { id: 3, name: '张三4' },
]
// jsx中也可以去调用函数哈
const contHtml = (
  <ul>
    {/* 给遍历的那个元素添加上key值。key最好是唯一值哈 跟vue是一样的哈 */}
    { 
      listArr.map(item => <li key={item.id}> 姓名 {item.name}</li> )
    }
  </ul>
)
ReactDOM.render(contHtml, document.getElementById('root'))

import React from 'react'; //这个是react这个包，我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom
// 使用行间样式
const contHtml = (
  <h1 style={{ color:'red', background:'pink', height:'100px'}}>
    我是内容
  </h1>
  // 第一个大括号表示的是jxs,第二个表示的是一个对象，以键值对的形式处理
)
ReactDOM.render(contHtml, document.getElementById('root'))

import React from 'react'; //这个是react这个包，我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom
// 引入这个文件对应的css，css中有myh1css样似的描述。推荐使用这一种
import './index.css'
// 使用行间样式
const contHtml = (
  <h1 className='myh1css' id='h1Id'>
    我是内容
  </h1>
  // 第一个大括号表示的是jxs,第二个表示的是一个对象，以键值对的形式处理
)
ReactDOM.render(contHtml, document.getElementById('root'))

<!-- 需求描述如果type==1，类名时css1;否者是css2 -->
<!-- 功能实现如下 -->
import React from 'react'; //这个是react这个包，我们是需要的
import ReactDOM from 'react-dom'; //这个是react的虚拟dom
const listArr = [
  { type: 1, name: 'react',id:1 },
  {type:2,name:'vue',id:3},
]
const contHtml = (
  <ul>
    {listArr.map(item =>
      <li
        key={item.id}
        className={item.type==1 ? 'css1' : 'css2'}
      >
        {item.name}
      </li>
    )}
  </ul>
)
ReactDOM.render(contHtml, document.getElementById('root'))