react crash course 2024(3) jsx语法及组件

1. 创建组件的文件结构
   
2.  rafce创建组件内容

   const NavBar = () => {return (<div>NavBar</div>)
   }export default NavBar

3. 使用该组件
    
4. 组件传值
    

                a.传一个函数值

  const addJob = (newJob)=>{console.log(newJob);}<Route path='/add-job' element={<AddJobPage addJobSumbit={addJob}/>}/>

                在addJobPage中使用这个函数

const AddJobPage = ({addJobSumbit}) => {addJobSumbit(newJob);

                 

JSX 是一种编写 JavaScript 的特殊方式。这为在大括号 { } 中使用 JavaScript 带来了可能。  

下次在 JSX 中看到 {{ 和 }}时，就知道它只不过是包在大括号里的一个对象罢了！

或者把props解构

 

设置默认值 

5.用自定义组件包裹一些元素 把他们传值

元素直接变成了参数被传进来

// 1.组件是一个函数可以是普通函数或箭头函数
// function App(){}
// const App = ()=>{}
// rafce react arrow function component export component
// const App = () => {
//   const name = 'John';//变量如何使用
//   const x = 10;
//   const y = 20;
//   const names = ['brad', 'mary', 'joe', 'sara']
//   const loggedIn = true;
//   const styles ={
//     color :'red',
//     fontSize:'55px'
//   }
//   // if (loggedIn) {
//   //   return <h1>hello memeber</h1>
//   // }
//   {/* 4.jsx的if条件语句 */ }
//   return (
//     // <div classNameName="text-5xl">App</div>
//     // <p>Hello</p>//只能返回一个element
//     <>
//       <div classNameName="text-5xl">App</div>
//       <p>{name}</p>  {/* 2.大括号表示变量并做简单计算 */}
//       <p>the sum of {x} and {y} is {x + y}</p>
//       <ul>
//         {names.map((name, index) => (
//           <li key={index}>{name}</li>
//         ))}
//         {/* 3.jsx的循环 */}
//       </ul>
//       {/* {loggedIn? <h1>Hello member</h1>:<h1>Hello guest</h1>} */}
//       {loggedIn && <h1>Hello member</h1>}
//       {/* 短路写法 */}
//       <p style={{color:"red",fontSize:'24px'}}>Hello</p>
// {/* 5.样式的内联样式 用双花括号，并且短线连接的用小驼峰写法 */}// <p style={styles}>dorothea</p>
// {/* 6.或者是把样式放在变量里 */}
//     </>
//   )
// }