From 29f7b523f83c20876aea4b1b9b90a62e4a87dadf Mon Sep 17 00:00:00 2001 From: Leonardo Pinho Date: Tue, 3 Dec 2024 22:30:34 -0300 Subject: [PATCH] chore: move content folder --- content/code-blocks.mdx | 107 ++++++++++++++++ content/disappearing-props.mdx | 74 +++++++++++ content/github-markdown.mdx | 193 +++++++++++++++++++++++++++++ content/hello-world.mdx | 15 +++ content/prop-drilling.mdx | 49 ++++++++ content/react-debug-magic.mdx | 76 ++++++++++++ content/react-hooks.mdx | 46 +++++++ content/react-lifecycle-cats.mdx | 46 +++++++ content/react-state-management.mdx | 53 ++++++++ content/summon-component.mdx | 45 +++++++ 10 files changed, 704 insertions(+) create mode 100644 content/code-blocks.mdx create mode 100644 content/disappearing-props.mdx create mode 100644 content/github-markdown.mdx create mode 100644 content/hello-world.mdx create mode 100644 content/prop-drilling.mdx create mode 100644 content/react-debug-magic.mdx create mode 100644 content/react-hooks.mdx create mode 100644 content/react-lifecycle-cats.mdx create mode 100644 content/react-state-management.mdx create mode 100644 content/summon-component.mdx diff --git a/content/code-blocks.mdx b/content/code-blocks.mdx new file mode 100644 index 0000000..d52f200 --- /dev/null +++ b/content/code-blocks.mdx @@ -0,0 +1,107 @@ +--- +title: Lets see what we can do with rehype pretty code +description: Syntax highlighting, line numbers, line highlights, word highlights +date: 2024-03-04 +tags: ["code", "rehype pretty", "mdx"] +published: true +--- + +[`rehype-pretty-code`](https://github.com/atomiks/rehype-pretty-code) is a Rehype plugin powered by the +[`shiki`](https://github.com/shikijs/shiki) syntax highlighter that provides beautiful code blocks for Markdown or MDX. It works on both the server at build-time (avoiding runtime syntax highlighting) and on the client for dynamic highlighting. + +## Editor-Grade Highlighting + + + Enjoy the accuracy and granularity of VS Code's syntax highlighting engine and + the popularity of its themes ecosystem — use any VS Code theme you want! + + +## Line Numbers and Line Highlighting + +Draw attention to a particular line of code. + +```js {4} showLineNumbers +import { useFloating } from "@floating-ui/react"; + +function MyComponent() { + const { refs, floatingStyles } = useFloating(); + + return ( + <> +
+
+ + ); +} +``` + +## Word Highlighting + +Draw attention to a particular word or series of characters. + +```js /floatingStyles/ +import { useFloating } from "@floating-ui/react"; + +function MyComponent() { + const { refs, floatingStyles } = useFloating(); + + return ( + <> +
+
+ + ); +} +``` + +## ANSI Highlighting + +```ansi + vite v5.0.0 dev server running at: + + > Local: http://localhost:3000/ + > Network: use `--host` to expose + + ready in 125ms. + +8:38:02 PM [vite] hmr update /src/App.jsx +``` + +Inline ANSI: `> Local: http://localhost:3000/{:ansi}` + +--- + +### Kitchen Sink Meta Strings + +```js showLineNumbers {2-4} title="isEven.js" /console/ caption="Im a caption" +function isEven(number) { + if (number === 1) { + return false; + } else if (number === 2) { + return true; + } else if (number === 3) { + return false; + } else if (number === 4) { + return true; + } else if (number === 5) { + return false; + } else if (number === 6) { + return true; + } else if (number === 7) { + return false; + } else if (number === 8) { + return true; + } else if (number === 9) { + return false; + } else if (number === 10) { + return true; + } else { + return "Number is not between 1 and 10."; + } +} + +// Example usage: +console.log(isEven(3)); // Should return false +console.log(isEven(4)); // Should return true +console.log(isEven(11)); // Should return "Number is not between 1 and 10." +``` diff --git a/content/disappearing-props.mdx b/content/disappearing-props.mdx new file mode 100644 index 0000000..b96070f --- /dev/null +++ b/content/disappearing-props.mdx @@ -0,0 +1,74 @@ +--- +title: "The Mysterious Case of the Disappearing Props" +description: Join us on a humorous detective journey to solve the mystery of disappearing props in a React application. Learn troubleshooting tips and best practices to prevent your props from vanishing into thin air. +date: 2024-03-01 +tags: ["code", "react", "props"] +published: true +--- + +# The Mysterious Case of the Disappearing Props + +In the quiet town of Reactville, developers live in harmony, crafting components and passing props with ease. But one day, a mystery unfolds that sends shockwaves through the community: props begin to disappear without a trace. This tale of intrigue and debugging will guide you through the dark alleys of React development to uncover the truth behind the disappearing props. + +## Chapter 1: The Disappearance + +Our story begins with a developer, much like yourself, who notices something amiss. A component that once displayed data proudly now stands empty, a shadow of its former self. The props, it seems, have vanished. + +```jsx +const MysteryComponent = ({ clue }) => ( +
{clue ? `Clue: ${clue}` : "No clue found."}
+); +``` + +## Chapter 2: Gathering Clues + +Determined to solve the mystery, our developer dons their detective hat and begins to gather clues. The first stop? The PropTypes alley, where the types of props are declared. Perhaps the culprit left a clue in the form of a type mismatch. + +```jsx +import PropTypes from "prop-types"; + +MysteryComponent.propTypes = { + clue: PropTypes.string, +}; +``` + +## Chapter 3: The Trail of Conditional Rendering + +The investigation leads to the shadowy path of conditional rendering, a place where props often go unnoticed. Could it be that a misplaced condition has caused the props to disappear? + +```jsx +const MysteryComponent = ({ clue }) => { + return ( + <> + {clue ? ( +
Clue: {clue}
+ ) : ( +
Warning: Clue is missing!
+ )} + + ); +}; +``` + +## Chapter 4: The Redux of Red Herring + +In a surprising twist, our developer suspects Redux, the state manager, might be involved. But upon closer inspection, they realize it was a red herring; the props were simply not connected correctly. + +```jsx +import { useSelector } from "react-redux"; + +const MysteryComponent = () => { + const clue = useSelector((state) => state.mystery.clue); + return
{clue ? `Clue: ${clue}` : "No clue found."}
; +}; +``` + +## Chapter 5: The Resolution + +With all clues gathered, our developer uncovers the truth: the props were not disappearing; they were merely lost in the complexity of the application. By ensuring proper prop types, conditional rendering, and state management connections, the props were found safe and sound. + +## Epilogue: The Moral of the Story + +As peace returns to Reactville, our developer learns an invaluable lesson: in the world of React development, props may seem to disappear, but with careful debugging and attention to detail, they can always be found. + +Remember, dear developers, when faced with the mysterious disappearance of props, don your detective hat, gather your tools, and embark on a journey of discovery. The truth is out there, waiting to be uncovered. diff --git a/content/github-markdown.mdx b/content/github-markdown.mdx new file mode 100644 index 0000000..aabb181 --- /dev/null +++ b/content/github-markdown.mdx @@ -0,0 +1,193 @@ +--- +title: Github Flavoured Markdown CheatSheet +description: A markdown cheat sheet for GFM +date: 2024-03-03 +published: true +--- + +# Introduction + +The following markdown cheatsheet is adapted from: https://guides.github.com/features/mastering-markdown/ + +# What is Markdown? + +Markdown is a way to style text on the web. You control the display of the document; formatting words as bold or italic, adding images, and creating lists are just a few of the things we can do with Markdown. Mostly, Markdown is just regular text with a few non-alphabetic characters thrown in, like `#` or `*`. + +# Syntax guide + +Here’s an overview of Markdown syntax that you can use anywhere on GitHub.com or in your own text files. + +## Headers + +```mdx +# This is a h1 tag + +## This is a h2 tag + +#### This is a h4 tag +``` + +# This is a h1 tag + +## This is a h2 tag + +#### This is a h4 tag + +## Emphasis + +```mdx +_This text will be italic_ + +**This text will be bold** + +_You **can** combine them_ +``` + +_This text will be italic_ + +**This text will be bold** + +_You **can** combine them_ + +## Lists + +### Unordered + +```mdx +- Item 1 +- Item 2 + - Item 2a + - Item 2b +``` + +- Item 1 +- Item 2 + - Item 2a + - Item 2b + +### Ordered + +```mdx +1. Item 1 +1. Item 2 +1. Item 3 + 1. Item 3a + 1. Item 3b +``` + +1. Item 1 +1. Item 2 +1. Item 3 + 1. Item 3a + 1. Item 3b + +## Images + +```mdx +![GitHub Logo](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png) +Format: ![Alt Text](url) +``` + +![GitHub Logo](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png) + +## Links + +```mdx +http://github.com - automatic! +[GitHub](http://github.com) +``` + +http://github.com - automatic! +[GitHub](http://github.com) + +## Blockquotes + +```mdx +As Kanye West said: + +> We're living the future so +> the present is our past. +``` + +As Kanye West said: + +> We're living the future so +> the present is our past. + +## Inline code + +```mdx +I think you should use an +`` element here instead. +``` + +I think you should use an +`` element here instead. + +## Syntax highlighting + +Here’s an example of how you can use syntax highlighting with [GitHub Flavored Markdown](https://help.github.com/articles/basic-writing-and-formatting-syntax/): + +````mdx +```js:fancyAlert.js +function fancyAlert(arg) { + if (arg) { + $.facebox({ div: '#foo' }) + } +} +``` +```` + +And here's how it looks - nicely colored with styled code titles! + +```jsx +function fancyAlert(arg) { + if (arg) { + $.facebox({ div: "#foo" }); + } +} +``` + +## Footnotes + +```mdx +Here is a simple footnote[^1]. With some additional text after it. + +[^1]: My reference. +``` + +Here is a simple footnote[^1]. With some additional text after it. + +[^1]: My reference. + +## Task Lists + +```mdx +- [x] list syntax required (any unordered or ordered list supported) +- [x] this is a complete item +- [ ] this is an incomplete item +``` + +- [x] list syntax required (any unordered or ordered list supported) +- [x] this is a complete item +- [ ] this is an incomplete item + +## Tables + +You can create tables by assembling a list of words and dividing them with hyphens `-` (for the first row), and then separating each column with a pipe `|`: + +```mdx +| First Header | Second Header | +| --------------------------- | ---------------------------- | +| Content from cell 1 | Content from cell 2 | +| Content in the first column | Content in the second column | +``` + +| First Header | Second Header | +| --------------------------- | ---------------------------- | +| Content from cell 1 | Content from cell 2 | +| Content in the first column | Content in the second column | + +## Strikethrough + +Any word wrapped with two tildes (like `~~this~~`) will appear ~~crossed out~~. diff --git a/content/hello-world.mdx b/content/hello-world.mdx new file mode 100644 index 0000000..001e2c1 --- /dev/null +++ b/content/hello-world.mdx @@ -0,0 +1,15 @@ +--- +title: Hello World +description: This is our first blog post. Really cool +date: 2024-03-06 +tags: ["code", "blog"] +published: true +--- + +Hello I am a callout + +# Hello World + +Welcome to my blog `inline code` + +### Header 3 diff --git a/content/prop-drilling.mdx b/content/prop-drilling.mdx new file mode 100644 index 0000000..d01a7ca --- /dev/null +++ b/content/prop-drilling.mdx @@ -0,0 +1,49 @@ +--- +title: "Prop Drilling: The Horror Movie - A Tale of React Components" +description: Step into a spine-chilling narrative where React components face the dread of prop drilling. Discover how using Context API or Redux can save your components from the depths of despair in this humorous take on a common React challenge. +date: 2024-02-28 +tags: ["code", "react", "props"] +published: true +--- + +# Prop Drilling: The Horror Movie + +In the shadowy depths of a complex React application, a horror story unfolds. Components, innocent and unsuspecting, find themselves ensnared in a terrifying ordeal known as prop drilling. This tale of suspense and survival will take you through the darkest corridors of React development. + +## The Curse of Prop Drilling + +Our story begins in a seemingly ordinary app, where a deep nesting of components lives in harmony. But beneath the surface, a curse lurks: the curse of prop drilling. Props, those precious pieces of data, must traverse through an endless labyrinth of components, each more terrifying than the last. + +```jsx +const Grandparent = ({ terror }) => ; +const Parent = ({ terror }) => ; +const Child = ({ terror }) =>
{`The terror has arrived: ${terror}`}
; +``` + +## The Scream in the Console + +As the props descend deeper into the component tree, strange things begin to happen. Console logs echo like screams in the night, warning of missing or undefined props. The components, panicked and confused, pass the props down with trembling hands, hoping not to be the next to encounter an error. + +## The Heroes Emerge: Context API and Redux + +Just when all hope seems lost, heroes emerge from the shadows: the Context API and Redux. With their powers of global state management, they offer a beacon of light in the dark, illuminating a path to safety for the beleaguered props. + +```jsx +const TerrorContext = React.createContext(); +const TerrorProvider = ({ children }) => { + const [terror, setTerror] = useState("everywhere"); + return ( + {children} + ); +}; +``` + +## The Final Showdown + +Armed with Context and Redux, the components band together to confront the curse of prop drilling. With a mighty refactor, they implement a new architecture, freeing the props from their endless descent and bringing peace to the application once more. + +## Epilogue: Lessons from the Darkness + +As dawn breaks on our tale, the components emerge wiser and stronger. They've learned that with the right tools and patterns, even the most terrifying challenges in React development can be overcome. + +Remember, when faced with the horror of prop drilling, do not despair. The Context API and Redux are your allies in the dark, ready to bring light to your React applications. diff --git a/content/react-debug-magic.mdx b/content/react-debug-magic.mdx new file mode 100644 index 0000000..3ed1ae7 --- /dev/null +++ b/content/react-debug-magic.mdx @@ -0,0 +1,76 @@ +--- +title: "Debugging React with Wizardry and Magic: A Developer's Spellbook" +description: Enter the mystical world of debugging React applications with a touch of humor. Learn spells and incantations to banish bugs and optimize your code, all while navigating the enchanting forest of React development. +date: 2024-02-27 +tags: ["react"] +published: true +--- + +# Debugging React with Wizardry and Magic + +In the mystical land of React, where components render and state changes abound, even the most skilled developers can encounter nefarious bugs. Fear not, for I have compiled a spellbook to assist you in banishing these foul creatures back to the depths from whence they came. + +## The Spell for Revealing Hidden Bugs + +Hidden bugs are like invisible sprites, causing mischief unseen. Use this spell to reveal them: + +Ingredients: + +- 1x careful reading of error messages +- 2x console.log +- A dash of breakpoint magic + +Chant: + +```jsx +console.log("Reveal thyself, bug!"); +``` + +With this spell, the hidden bug will have no choice but to show itself. Remember, the console is your wand; wield it wisely. + +## The Incantation for Smoothing State Changes + +State changes can be tricky, leading to unexpected behavior. Smooth them over with this incantation: + +Ingredients: + +- A pinch of prevState +- A tablespoon of useEffect +- A careful reading of the React docs + +Chant: + +```jsx +this.setState((prevState) => ({ + ...prevState, + newStateValue: "Magically updated!", +})); +``` + +This careful blend of prevState and useEffect ensures that your state changes are as smooth as a wizard's potion. + +## The Potion for Enhancing Performance + +To enhance the performance of your React app, brew this powerful potion: + +Ingredients: + +- 1 part useMemo +- 2 parts useCallback +- A sprig of PureComponent + +Brew: + +Mix these ingredients in your component's cauldron. Use `useMemo` and `useCallback` to prevent unnecessary re-renders, and `PureComponent` to ensure your components only update when truly needed. + +```jsx +const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); +``` + +With this potion, your app will fly faster than a witch on a broomstick during a full moon. + +## Conclusion: The Magic of React Development + +Debugging React apps requires a mix of logic, intuition, and a bit of magic. By applying these spells and potions, you can navigate the enchanted forest of React development with ease. Remember, the true magic lies not just in the spells themselves, but in understanding the principles that make them work. + +Happy debugging, and may your React journey be magical! diff --git a/content/react-hooks.mdx b/content/react-hooks.mdx new file mode 100644 index 0000000..aba5831 --- /dev/null +++ b/content/react-hooks.mdx @@ -0,0 +1,46 @@ +--- +title: "React Hooks: Fishing for Components in the React Sea" +description: Explore the amusing analogy of React Hooks as fishing tools designed to catch components in the vast sea of React development. Learn how to use useState, useEffect, and useContext to manage your catch effectively. +date: 2024-02-26 +published: true +--- + +# React Hooks: Fishing for Components + +In the vast sea of React, where components swim freely and side-effects lurk in the depths, a developer must become a skilled fisherman to catch their desired functionality. This guide will equip you with the React Hooks you need to catch components with precision and grace. + +## The Essential Fishing Gear + +Before we set sail, let's ensure we have all the necessary gear: + +- **useState:** The worm that tempts your components to the surface. +- **useEffect:** The lure that attracts side-effects and keeps them at bay. +- **useContext:** The net that gathers global states together, making it easier to share across your component sea. + +## Setting Sail: Your First Catch + +With our gear ready, it's time to set sail into the React sea. Here's how to make your first catch: + +1. **Bait your hook with useState:** Begin by choosing the right worm. `useState` allows you to add state to your functional components, making them more dynamic and responsive. + +```jsx +const [fish, setFish] = useState("🐟"); +``` + +2. **Attract with useEffect:** Now, use `useEffect` as your lure. This Hook lets you perform side effects in your components, such as fetching data or subscribing to services. It's like casting your line into the water and waiting for a bite. + +```jsx +useEffect(() => { + console.log(`You've caught ${fish}!`); +}, [fish]); +``` + +3. **Gather with useContext:** Finally, use `useContext` as your net. This Hook lets you share state across many components without prop drilling. It's like gathering all your catches in one net for a bountiful harvest. + +## The Catch of the Day + +Congratulations! You've made your first catch in the React sea. But remember, the sea is vast, and there are many more components and hooks to explore. Each project is a new fishing trip, with its challenges and rewards. + +Remember to release any components back into the sea if you don't need them. Keeping your application's waters clean and sustainable is key to a healthy React ecosystem. + +Happy fishing in the React sea! diff --git a/content/react-lifecycle-cats.mdx b/content/react-lifecycle-cats.mdx new file mode 100644 index 0000000..fd1cd0a --- /dev/null +++ b/content/react-lifecycle-cats.mdx @@ -0,0 +1,46 @@ +--- +title: "The Lifecycle of a React Component, As Told by Cats" +description: A whimsical exploration of the React component lifecycle, with each stage humorously explained through the behavior of cats. Perfect for developers looking to understand lifecycle methods in a more relatable and entertaining way. +date: 2024-02-25 +published: true +--- + +# The Lifecycle of a React Component, Explained by Cats + +Every React component undergoes a series of events from birth to death, known as its lifecycle. Just as cats have their unique behaviors, each phase of a component's lifecycle can be likened to the life stages of our feline friends. + +## Mounting: The Curious Kitten + +The mounting phase is when our component is born into the DOM world. Imagine a kitten opening its eyes for the first time, exploring its surroundings with awe. This is your component, freshly rendered and ready to interact with the user. + +```jsx +componentDidMount() { + console.log('The component has mounted, much like a cat finding its favorite sunny spot.'); +} +``` + +## Updating: The Playful Cat + +As props and state change, our component updates. This is akin to a cat in its playful phase, chasing after laser pointers or pouncing on yarn. Every update re-renders the component, making it respond to user interactions and data changes dynamically. + +```jsx +componentDidUpdate(prevProps, prevState) { + console.log('The component has updated, chasing after new props and state like a cat after a laser dot.'); +} +``` + +## Unmounting: The Lazy Cat + +Finally, when the component is no longer needed and is removed from the DOM, it's like a cat losing interest in its toy and sauntering off for a nap. This phase cleans up any lingering effects or subscriptions the component may have. + +```jsx +componentWillUnmount() { + console.log('The component will unmount, much like a cat wandering off to find a quiet place to rest.'); +} +``` + +## Conclusion: Nine Lives of React Components + +Just as cats live their lives in phases, React components have their lifecycle. Understanding these phases helps you better manage your components, ensuring they perform efficiently and gracefully throughout their lifecycle. + +Remember, the key to mastering React is much like understanding cats: it requires patience, observation, and a bit of love for the craft. Happy coding, and may your components live as richly and interestingly as our feline overlords! diff --git a/content/react-state-management.mdx b/content/react-state-management.mdx new file mode 100644 index 0000000..cb50591 --- /dev/null +++ b/content/react-state-management.mdx @@ -0,0 +1,53 @@ +--- +title: "React State Management: An Epic Tale of Love, Loss, and Redux" +description: Embark on a dramatic journey through the realm of React state management. Witness the love triangles, betrayals, and heartaches that components face as they navigate the complex world of state management, with a special appearance by Redux. +date: 2024-02-24 +published: true +--- + +# React State Management: A Soap Opera + +In the grand drama of React development, the saga of state management is one filled with love, jealousy, and occasional heartbreak. This tale unfolds in the realm of an application, where components and states are intertwined in a complex dance of functionality and performance. + +## The Love Affair Between Components and State + +Our story begins with a young component, fresh and eager, falling deeply in love with a beautiful piece of state. This state, so pristine and full of potential, promises to bring the best out of our component, making it dynamic and interactive. + +```jsx +const [love, setLove] = useState("undeniable"); +``` + +## The Jealous Sibling: Prop Drilling + +But as in any good soap opera, there's a twist. A sibling component, envious of the love affair, desires the state for itself. This leads to the dark practice of prop drilling, passing the beloved state down through layers of components, causing confusion and chaos. + +```jsx +const DramaComponent = ({ love }) => { + return
{`The love is now shared: ${love}`}
; +}; +``` + +## The Arrival of Redux: A New Hope + +Just when all seems lost, a new character enters the scene: Redux. With its powers of global state management, Redux promises to end the jealousy and confusion, allowing state to be shared harmoniously among all components. + +```jsx +const loveReducer = (state = "undeniable", action) => { + switch (action.type) { + case "SHARE_LOVE": + return action.love; + default: + return state; + } +}; +``` + +## The Dramatic Finale: State Reconciliation + +In the dramatic climax, the components learn to embrace Redux, sharing state seamlessly and ending the cycle of jealousy and prop drilling. Love and state are now distributed equally, bringing peace to the application realm. + +## Epilogue: The Moral of the Story + +As our tale concludes, we're reminded of the importance of proper state management in React applications. Whether through hooks, context, or Redux, managing state with care and precision ensures a harmonious relationship between components and their state. + +Remember, dear developers, in the world of React, love (and state) conquers all. Happy coding! diff --git a/content/summon-component.mdx b/content/summon-component.mdx new file mode 100644 index 0000000..92f7856 --- /dev/null +++ b/content/summon-component.mdx @@ -0,0 +1,45 @@ +--- +title: "How to Summon a React Component: A Beginner's Guide" +description: Dive into the mystical world of React and learn the incantations needed to summon your very first React component with humor and ease. +date: 2024-02-23 +published: true +--- + +# How to Summon a React Component + +Ever wondered how to summon a React component from the netherworld? Fear not, for I shall guide you through this arcane ritual, combining ancient JavaScript lore with the modern magic of JSX. This guide is perfect for apprentices who wish to embark on the mystical journey of React development. + +## Ingredients + +- 1 cup of JavaScript knowledge, freshly brewed +- A pinch of JSX, for that extra flavor +- 3 tablespoons of patience, aged to perfection +- A sprinkle of creativity (optional but highly recommended) + +## Instructions + +First, prepare your development cauldron (also known as your code editor). Make sure it's clean and ready for brewing a new React component. + +Now, follow these steps carefully: + +1. **Mix the JavaScript knowledge thoroughly** until it's smooth and free of lumps. This forms the base of your component. + +2. **Fold in a pinch of JSX carefully.** This is what brings your component to life, allowing it to render in the browser realm. + +3. **Stir in the patience slowly.** Sometimes, the component might not render correctly on the first try. Patience is key here. + +4. **Add a sprinkle of creativity.** This is what makes your component truly unique. Whether it's a stylish button or a dynamic form, let your imagination run wild. + +5. Finally, chant the incantation below: + +```jsx +class MyComponent extends React.Component { + render() { + return
Hello, World!
; + } +} +``` + +With the incantation complete, your React component should now be summoned successfully. It will serve you faithfully, reacting to user inputs and rendering data dynamically. + +Congratulations, you've now summoned your first React component. Handle with care, or it might turn against you by throwing errors and warnings. Remember, with great power comes great responsibility. Happy coding!