day02--JSX的基本学习

1.JSX的标签

1.1.jsx的标签首先需要进行首字母大写的区分，大写的是自定义组件的写法

1.2.标签必须是闭合的，例如<input>在JSX中就是非法的写法会报错

<input>//错误
<input />//正确

1.3.每段JSX都只能有一个根节点类似于vue中的fragment

<div>
    <p>Hello</p>
</div>

2.JSX的属性

2.1  class要改为className

<div classNmae="App"></div>

 2.2style要使用js对象（不能是string）而且key用驼峰写法

<p  
    style={{color:'red', backgroundColor:'white'}}
>
    hahhah
</p>

2.3for要改为htmlFor

<div>
        <label htmlFor="input1">
          <input type="text" id="input1"/>
        </label>
    </div>

3.JSX事件监听

3.1 onXxx来绑定事件

const fn=(event:MouseEvent<HTMLButtonElement>)=>{console.log('9999')}
<button onClick={fn}></button>

4.JSX中插入JS变量表达式

  {/*JSX注释内容 */}

5.JSX中使用条件判断

5.1使用&&符

function App() {

  const flag = true

  return (
    <div className="App">
      <header className="App-header">

       <div>{flag && <p>hello</p>}</div>

      </header>
    </div>
  )
}

5.2使用三元表达式

function App() {

  const flag = true

  return (
    <div className="App">
      <header className="App-header">

        <div>{flag ? <p>hello</p> : <p>word</p>}</div>

      </header>
    </div>
  )
}

5.3使用函数

切记在使用函数的时候一定要首字母大写，用小写的字母的话就会被误认为是html标签从而报错

function App() {

  const flag = true
  function Hello() {
    if (flag) return <p>Hello</p>
    return <p>你好</p>
  }


  return (
    <div className="App">
      <header className="App-header">

        <Hello></Hello>

      </header>
    </div>
  )
}

6.JSX中的循环方法

在React当中一般推荐使用map循环，其中key值和vue的一样需要有唯一性

function App() {

  const userInfo = [
    { name: '张三', id: 0 },
    { name: '李四', id: 1 },
    { name: '王五', id: 2 },
    { name: '周六', id: 3 },
    { name: '赵天', id: 4 },
  ]
  return (
    <div className="App">
      <header className="App-header">
        <ul>
          {userInfo.map(item => {
            const { name, id } = item
            return <li key={id}>{name}</li>
          })}
        </ul>
      </header>
    </div>
  )
}

7.react中的小工具

        最好用到Chrome浏览器有一款叫做React Developer Tools的工具。可以在Chrome的应用商店中进行安装，如果打不开应用商店可以查看此篇文章

8.JSX和vue模板的区别

        判断，Vue模板使用v-if指令，react中使用的是三元运算符

        循环，Vue模板使用v-for指令，react中使用map

8.1React和Vue设计理念的区别

React-能使用JS的就用JS（需要JS基础扎实）

Vue-自定义指令很多，方便初学者学习和记忆

不过现在Vue3也能很好支持JSX语法