From e085fb9c128d9e75bbb739e8efc41ee9847c079d Mon Sep 17 00:00:00 2001
From: Maxwell <m4xw3llx@outlook.com>
Date: Sat, 16 Nov 2024 23:44:26 -0800
Subject: [PATCH] feat: add content to new post

---
 posts/how_to_use_google_font.md |  4 +--
 posts/relearn_react_03.md       | 53 +++++++++++++++++++++++++++++++++
 2 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/posts/how_to_use_google_font.md b/posts/how_to_use_google_font.md
index 0791851..e4218a1 100644
--- a/posts/how_to_use_google_font.md
+++ b/posts/how_to_use_google_font.md
@@ -23,13 +23,13 @@ The benefits of using Google Font are:
 Go to [Google Fonts](https://fonts.google.com/?preview.text=Arcane%20Tome).
 Type what you want to display in the textarea, and find the font you like. For example, I choose [Grenze](https://fonts.google.com/?preview.text=Arcane%20Tome&query=Grenze). It's a serif font, a little vintage style, I think it's suitable for my blog.
 
-![google front](/static/posts//google_font_01.png)
+![google front](/static/posts/google_font_01.png)
 
 ### Step 2: Add the font to your project
 
 Click the "Get font" button, and select "Get embed code". You can select what styles do you want to use, and copy the code. In my fresh project, I put the codes in `_layout.tsx` like this:
 
-![google front](/static/posts//google_font_02.png)
+![google front](/static/posts/google_font_02.png)
 
 ```tsx
 import { type PageProps } from "$fresh/server.ts";
diff --git a/posts/relearn_react_03.md b/posts/relearn_react_03.md
index 485af92..fafb3d0 100644
--- a/posts/relearn_react_03.md
+++ b/posts/relearn_react_03.md
@@ -5,3 +5,56 @@ snippet: Relearning React from react.dev
 ---
 
 ## From "Conditional Rendering"
+
+Conditional rendering may be the most used feature in daily React development. It allows you to render different components or elements based on a condition.
+
+If you return `null` from a component, nothing will be rendered.
+
+And using ternary operator is a common way to conditionally render elements.
+
+Using `&&` is another way to conditionally render elements. It works because in JavaScript, `true && expression` always evaluates to `expression`, and `false && expression` always evaluates to `false`.
+
+```jsx
+// isPacked is true, render "✅", or render nothing.
+return (
+  <li className="item">
+    {name} {isPacked && "✅"}
+  </li>
+);
+```
+
+Using variables to store elements is another way to conditionally render elements.
+
+## Pitfalls
+
+### Using `&&` for Conditional Rendering
+
+Don’t put numbers on the left side of &&.
+
+To test the condition, JavaScript converts the left side to a boolean automatically. However, if the left side is 0, then the whole expression gets that value (0), and React will happily render 0 rather than nothing.
+
+For example, a common mistake is to write code like `messageCount && <p>New messages</p>`. It’s easy to assume that it renders nothing when `messageCount` is 0, but it really renders the 0 itself!
+
+To fix it, make the left side a boolean: `messageCount > 0 && <p>New messages</p>`.
+
+## Deep Dive
+
+### What's the difference between these two code snippets?
+
+```jsx
+if (isPacked) {
+  return <li className="item">{name} ✅</li>;
+}
+return <li className="item">{name}</li>;
+```
+
+```jsx
+return <li className="item">{isPacked ? name + " ✅" : name}</li>;
+```
+
+> JSX elements aren’t “instances” because they don’t hold any internal state and aren’t real DOM nodes. So these two examples, in fact, are completely equivalent.
+
+## Rendering Lists
+
+- [DRY](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) (Don't Repeat Yourself)
+- [Logical And &&](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND)