react

教程

安装react, react-dom, and react-scripts 安装运行命令

npx create-react-app my-app
cd my-app
npm start

React 组件

定义：

就是 JavaScript 函数（function）

函数返回值：由标签语言编写的用户界面

function MyButton() {
  return (
    <button>Click me</button>
  );
}

嵌套：

<MyButton />大写字母开头

export default 关键字在1个js文件中标明了主要组件

？这边不是jsx，不用共同的父标签吗？

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}

JSX 的语法

所有最高层级的标签需要添加一个共同的父标签，例如使用 <div>...</div> 或 <>...</>

遇到js是{}

遇到<>是()

html转jsx在线工具

function AboutPage() {
  return (
    <>
      <h1>About</h1>
      <p>Hello there.<br />How do you do?</p>
    </>
  );
}

判断语句

if语句

let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}
return (
  <div>
    {content}
  </div>
);

？条件运算符

<div>
  {isLoggedIn ? (
    <AdminPanel />
  ) : (
    <LoginForm />
  )}
</div>

没有else

<div>
  {isLoggedIn && <AdminPanel />}
</div>

循环语句

css样式

？？？<link>添加css文件

类名className

<img className="avatar" />

指定样式和html是一样的

/* In your CSS */
.avatar {
  border-radius: 50%;
}

显示数据变量

遇到js是{}包裹变量

export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1><!-- html中使用变量 -->
      
      <!-- 属性中使用变量 --><!-- 字符串拼接 -->
      <img
        className="avatar"
        src={user.imageUrl}
        alt={'Photo of ' + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize
        }}
      />
      <!-- style可以设置一个对象值 -->
      <!-- 对象`{}` 被放在了 `style={ }` 的花括号里面了 -->
    </>
  );
}