学习React第一天

let str = "你好React";
let score = 90;
let flag = true;
let list = ["React", "Vue", "jQuery", "Angular"];
let form = [{
  id: 1,
  name: "React",
}, {
  id: 2,
  name: "Vue",
}, {
  id: 3,
  name: "jQuery",
}, {
  id: 4,
  name: "Angular",
}];

function App() {
  // 点击form 打印点击数据
  const handleClick = (item) => {
    console.log(item, "打印点击form数据");
  };
  return (
    <div className="App">
      <div className="str">{str}</div> {/* 模版渲染 */}
      <div>{score >= 80 ? "很棒啦" : "要加油哦"}</div> {/* 条件运算符 */}
      <div>{flag ? <div>芝麻开门</div> : <div>芝麻不开门</div>}{/* 条件展示数据 */}</div>
      <div>
        {/* 循环展示list数据 */}
        <h1>List:</h1>
        {list.map((item, index) => (
          <p key={index}>{item}</p>
        ))}
      </div>
      <div>
        {/* 循环展示form数据 */}
        <h1>Form:</h1>
        {form.map((item) => (
          // 点击form 打印点击数据
          <p key={item.id} onClick={() => handleClick(item)}>
            {item.name} {item.id}
          </p>
        ))}
      </div>
      <div>
        {/* 条件展示数据 */}
        {form.length > 0 ? (
          <div>
            {form.map((item) => (
              <div key={item.id}>{item.name}</div>
            ))}
          </div>
        ) : (
          <div>暂无数据</div>
        )}
      </div>
    </div>
  );
}

export default App;