React学习（一）

一、创建项目

npx create-react-app my-app

cd my-app

npm start

二、基本表达式

const login = true;
const name = "姓名";
function getcolor() {
  return "hongse";
}

const list = [
  { id: 1, name: "一号", color: "red" },
  { id: 2, name: "2号", color: "blue" },
  { id: 3, name: "3号", color: "black" },
];
function testDiv(val) {
  if (val == 0) {
    return <div>value是0</div>;
  } else if (val == 1) {
    return <div>value是1</div>;
  } else if (val == 3) {
    return <div>value是3</div>;
  }
}
function App() {
  function cahngeValue() {
    console.log("sssss");
  }

  return (
    <div className="App">
      test
      <div>
        {/* 按钮点击事件   使用onClick绑定   使用单括号包裹函数名 */}
        <button onClick={cahngeValue}>点击修改</button>{" "}
      </div>
      {/* 变量的引用 */}
      <div>{name}</div>
      {/* 模板字符串 */}
      <div>{"模版字符串"}</div>
      {/* style的定义 */}
      <div style={{ color: "red" }}>{getcolor()}</div>
      {/* 列表的渲染  vue中使用的是for循环  react使用的是list的map方法 */}
      <div>
        {list.map((item) => (
          <p key={item.id}>{item.name}</p>
        ))}
      </div>
      {/* 三目运算 */}
      <div>{login ? "login是true" : "login是false"}</div>
   {/* 函数调用传值 */}
      <div>{testDiv(0)}</div>
      <div>{testDiv(1)}</div>
      <div>{testDiv(3)}</div>
    </div>
  );
}

export default App;