這兩三天沒發文，因為我問了朋友兼前同事說大家轉職都做怎樣的做品集，然後又上 Dribbble 參考設計和上codepen 找找人家已經做好的東西，自己再用 CSS 修修看，結果連續幾天都花超多時間在 CSS 上只是為了做 Nav bar... 不過到現在還是沒做好哈哈哈哈～ 朋友兼前同事說 CSS 是水很深的東西 XDDDDD

[Day 55] [React] 有 Ternary / AND operator 的條件渲染（Conditional Render）[1]
[Day 56] [React] 有 Ternary / AND operator 的條件渲染（Conditional Render）[2]

有上過前面的條件渲染課程後，今天是練習目前這兩天的所學。

今天的挑戰題目：

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";

ReactDOM.render(<App />, document.getElementById("root"));

//Challenge: Without moving the userIsRegistered variable,
//1. Show Login as the button text if userIsRegistered is true.
//Show Register as the button text if userIsRegistered is false.
//2. Only show the Confirm Password input if userIsRegistered is false.
//Don't show it if userIsRegistered is true.

false 畫面：

true 畫面：

我的第一步是把 input 和 button 、 Login 和 Form 都做成 components：

input

import React from "react";

function Input(props) {
  return <input type={props.type} placeholder={props.placeholder} />;
}

export default Input;

button

import React from "react";

function Button(props) {
  return <button type={props.type}> {props.text} </button>;
}

export default Button;

form，當 userIsRegistered 為 false 時，顯示的註冊畫面：

import React from "react";
import Button from "./Button";
import Input from "./Input";

function Form() {
  return (
    <form className="form">
      <Input type="text" placeholder="Username"/>
      <Input type="password" placeholder="Password"/>
      <Input type="password" placeholder="Confirm Password"/>
      <Button type="text" text="Register"/>
    </form>
  );
}

export default Form;

Login，當 userIsRegistered 為 true 時，顯示的登入畫面：

import React from "react";
import Button from "./Button";
import Input from "./Input";

function Login() {
  return (
    <form className="form">
      <Input type="text" placeholder="Username"/>
      <Input type="password" placeholder="Password"/>
      <Button type="text" text="Login"/>
    </form>
  );
}

export default Login;

最後在 App.jsx 用一行 Ternary Operator 來表示變數 true / false 要丟什麼東西出來：

import React from "react";
import Form from "./Form";
import Login from "./Login";

var userIsRegistered = false;

function App() {
  return (
    <div className="container">
      {userIsRegistered ? <Login /> : <Form />}
    </div>
  );
}

export default App;

Conditional Rendering 到這邊一個段落～
下次上課會是 State 和 Hooks，看起來又是要分好幾篇文章來寫的上課章節啊 XDDDDD