Merge pull request #23 from rahulakrishna/recursion-in-react

recursion in react

.gitignore

@@ -1,2 +1,14 @@
 .DS_Store
-.jekyll-cache/*
+_site/
+.sass-cache/
+.jekyll-cache/
+.jekyll-metadata
+# Ignore folders generated by Bundler
+.bundle/
+vendor/./.DS_Store
+./_assets/.DS_Store
+./_includes/.DS_Store
+./_layouts/.DS_Store
+./images/.DS_Store
+./images/budgeting-tool/.DS_Store
+./images/recursion-in-react/.DS_Store

_posts/2024-02-10-arc-search.markdown

@@ -13,7 +13,7 @@ tags: [browsers, ux]
 
 Here is what Arc Search has to say about Arc Search!
 
-<div style="text-align: center;"><img src='/images/arc-search/Untitled.png' style="max-width: 250px;"/></div>
+<div style="text-align: center;"><img src='/images/arc-search/javascript-result.png' style="max-width: 250px;"/></div>
 
 ### Basic Stuff it does
 

_posts/2024-02-21-recursion-in-react.markdown

@@ -0,0 +1,124 @@
+---
+layout: post
+title: "Recursion in React"
+author: "Rahul Krishna"
+date: 2024-02-21 11:15:00 +0530
+categories: [notes]
+tags: [javascript, react]
+---
+
+### TLDR;
+
+---
+
+TIL that you can have recursive components in React!
+
+<aside>
+💡 React uses one-way data flow, passing data down the component hierarchy from parent to child component
+</aside>
+<br/>
+So while thinking in React, it may not immediately occur that you can call a **parent** inside the **child!** But it is possible
+
+### Consider a Data Structure like this:
+
+---
+
+```jsx
+const comments = [
+  {
+    content: "Comment 1",
+    level: 0,
+    comments: [
+      {
+        content: "Comment 1 > 1",
+        level: 1,
+        comments: [
+          {
+            content: "Comment 1 > 1 > 1",
+            level: 2,
+            comments: [],
+          },
+        ],
+      },
+      {
+        content: "Comment 1 > 2",
+        level: 1,
+        comments: [],
+      },
+    ],
+  },
+  {
+    content: "Comment 2",
+    level: 0,
+    comments: [],
+  },
+];
+```
+
+### Doing this in Javascript
+
+---
+
+```jsx
+function displayComments(comments) {
+  return comments.reduce((acc, comment) => {
+    const prefix = Array(comment.level)
+      .fill("|")
+      .reduce((acc, item) => `${acc} ${item}`, "");
+
+    const moreComments = displayComments(comment.comments);
+
+    const stringToReturn = `${prefix} ${comment.content} \n ${moreComments}`;
+    return `${acc} ${stringToReturn}`;
+  }, "");
+}
+```
+
+Result:
+
+![Javascript Result](/images/recursion-in-react/javascript-result.png)
+
+### Doing this in React
+
+---
+
+```jsx
+function Comment({ comment }) {
+  const prefix = Array(comment.level)
+    .fill("|")
+    .reduce((acc, item) => `${acc} ${item}`, "");
+  return (
+    <div>
+      {prefix} {comment.content}
+      <Comments comments={comment.comments} />
+    </div>
+  );
+}
+
+export default function Comments({ comments }) {
+  return comments.map((comment) => {
+    return <Comment comment={comment} />;
+  });
+}
+```
+
+Result:
+
+![React Result](/images/recursion-in-react/react-result.png)
+
+### Actual example of rendering a comment tree
+
+---
+
+It’s unlikely we’ll be using `|` prefixes when actually building a comment tree. We’ll more likely be playing around with `padding` and `margin`.
+
+Here’s a code example of actual comment tree rendering in React with TailwindCSS: [https://github.com/rahulakrishna/hackrmn/blob/master/src/app/[storylist]/comments/[commentid]/comment-block.js](https://github.com/rahulakrishna/hackrmn/blob/master/src/app/%5Bstorylist%5D/comments/%5Bcommentid%5D/comment-block.js)
+
+![Untitled](/images/recursion-in-react/real-life-example.png)
+
+### References
+
+---
+
+- Thinking in React: [https://react.dev/learn/thinking-in-react](https://react.dev/learn/thinking-in-react)
+- hackrmn repo: [https://github.com/rahulakrishna/hackrmn/tree/master](https://github.com/rahulakrishna/hackrmn/tree/master)

_site/index.html

@@ -97,6 +97,18 @@ <h1 class="h0 inline-block pt-2 mt-4 header-title" style="line-height: 0px;">Fie
 
       <!-- Renders post date, title, and snippet of text. -->
 <li class="prose">
+  <div style="" class="lg-row sm-column">
+
+    <a class="link-primary" title="/notes/2024/02/21/recursion-in-react.html" href="/notes/2024/02/21/recursion-in-react.html">Recursion in React</a>
+    <span class="spacer"> - </span>
+    <a class="no-underline-hover h5 block" title="/notes/2024/02/21/recursion-in-react.html" href="/notes/2024/02/21/recursion-in-react.html">Feb 21, 2024</a>
+  </div>
+
+
+</li>
+
+      <!-- Renders post date, title, and snippet of text. -->
+<li class="prose">
   <div style="" class="lg-row sm-column">
 
     <a class="link-primary" title="/notes/2024/02/10/arc-search.html" href="/notes/2024/02/10/arc-search.html">Arc Search</a>

_site/notes/2024/02/10/arc-search.html

@@ -115,7 +115,7 @@ <h3 id="what-is-it">What is it?</h3>
 
 <p>Here is what Arc Search has to say about Arc Search!</p>
 
-<div style="text-align: center;"><img src="/images/arc-search/Untitled.png" style="max-width: 250px;"></div>
+<div style="text-align: center;"><img src="/images/arc-search/javascript-result.png" style="max-width: 250px;"></div>
 
 <h3 id="basic-stuff-it-does">Basic Stuff it does</h3>
 
@@ -226,6 +226,14 @@ <h3 id="references">References</h3>
 </div>
 
 
+<div class="col-4 sm-width-full left mt-3">
+  <a class="no-underline-hover py-1 block" href="http://localhost:4000/notes/2024/02/21/recursion-in-react.html">
+    <span class="h5 bold">Next</span>
+    <p class="bold h3 link-primary mb-1">Recursion in React</p>
+
+  </a>
+</div>
+
 </div>
     </div>