react第三天

import component

function Profile(){
    return (
    <img
      src="ddd.jpg"
      alt = "dehuejson"
    ></img>
    )
}

export default function Gallery(){
    return (
        <section>
            <h1>dedhue</h1>
            <Profile />
            <Profile />
            <Profile />
        </section>
    )
}

import Gallery from './Gallery.js'

export default function App(){
    return (
        <Gallery />
    )
}

某个函数组件可以导出 在其他组件中使用

export function Profile() {}


import  {Profile} from './Gallery.js'

export default function App(){
    return <profile />
}

the rules of JSX
有一个唯一的根节点

export default function  todoList(){
   return (
     <div> 
      //或 <>        
       <h1>Hedy Lamarr's Todos</h1>
       <img 
         src="https://i.imgur.com/yXOvdOSs.jpg" 
         alt="Hedy Lamarr" 
         class="photo"
       >
       <ul>
         <li>Invent new traffic lights
         <li>Rehearse a movie scene
         <li>Improve the spectrum technology
       </ul>

   </div>
   //或</>

   )
}

所有的tag标签都要有结尾标签
<img />
<li><li/>

<>
  <img 
    src="https://i.imgur.com/yXOvdOSs.jpg" 
    alt="Hedy Lamarr" 
    class="photo"
   />
  <ul>
    <li>Invent new traffic lights</li>
    <li>Rehearse a movie scene</li>
    <li>Improve the spectrum technology</li>
  </ul>
</>

className =“字符串”
src = {url}
alt = {desc}
用变量的形式存储 加{}

export default function Avatar(){
    const avatar = 'https://i.img.jpg'
    const desc  ='Aaaa'
    return (
        <img 
         className = "avatar"
         src = {avatar}
         alt = {desc}
        />
    )
}

所有的已存在的变量 和 函数
都可以再return中 用 {} 渲染出来

const today = new Date();

function formatDate(date) {
  return new Intl.DateTimeFormat(
    'en-US',
    { weekday: 'long' }
  ).format(date);
}


export default function TodoList() {
  const name = 'Gregorio Y. Zara';

  return (
    <h1>{name}'s To Do List</h1>
    <h1>To Do List for {formatDate(today)}</h1>
  );
}