<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: gabygalv</title>
    <description>The latest articles on DEV Community by gabygalv (@gabygalv).</description>
    <link>https://dev.to/gabygalv</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1023951%2Ffc701ff7-2c0b-4d7b-93e4-137574a7d77e.png</url>
      <title>DEV Community: gabygalv</title>
      <link>https://dev.to/gabygalv</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/gabygalv"/>
    <language>en</language>
    <item>
      <title>Death by a Million Recursions</title>
      <dc:creator>gabygalv</dc:creator>
      <pubDate>Sat, 22 Apr 2023 00:27:56 +0000</pubDate>
      <link>https://dev.to/gabygalv/death-by-a-million-recursions-4b5c</link>
      <guid>https://dev.to/gabygalv/death-by-a-million-recursions-4b5c</guid>
      <description>&lt;p&gt;Serialize rules can be an incredibly useful tool for making sure that only the necessary information is displayed in a serialized object. However, there are times when using serialize rules can lead to recursion errors.&lt;/p&gt;

&lt;p&gt;Recursion errors occur when there is an infinite loop of serialization, where an object is being serialized repeatedly because it is a property of another object. This can happen when two objects have a many-to-many relationship and both objects contain the serialized representation of each other.&lt;/p&gt;

&lt;p&gt;Let's look at an example, &lt;/p&gt;

&lt;p&gt;In the case of our three tables, Pizza, Restaurant, and RestaurantPizza, we can see how recursion errors might occur. Let's say we want to serialize all the Pizza objects, but we also want to include all the Restaurant objects that have a relationship with each Pizza. We might define our serialize rules for Pizza to include the Restaurant objects:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;class Pizza(db.Model, SerializerMixin):&lt;br&gt;
    serialize_rules = ('-restaurants', '-restaurant_pizzas', '-created_at', '-updated_at')&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;But since Restaurant also has a relationship with Pizza, we might define our serialize rules for Restaurant to include the Pizza objects:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;class Restaurant(db.Model, SerializerMixin):&lt;br&gt;
    serialize_rules = ('-pizzas', '-restaurant_pizzas', '-created_at', '-updated_at')&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;This creates a recursion error because both Pizza and Restaurant are trying to include each other in their serialized representations.&lt;/p&gt;

&lt;p&gt;To avoid recursion errors, we need to be mindful of how we use serialize rules. In some cases, we might need to exclude certain relationships altogether. In other cases, we might need to include only a subset of related objects, rather than all related objects.&lt;/p&gt;

&lt;p&gt;In our example, we might decide to exclude the Restaurant objects from the serialized representation of Pizza:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;class Pizza(db.Model, SerializerMixin):&lt;br&gt;
    serialize_rules = ('-restaurant_pizzas', '-created_at', '-updated_at')&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;This way, we only include the RestaurantPizza objects that relate to each Pizza, rather than including the Restaurant objects themselves.&lt;/p&gt;

&lt;p&gt;Alternatively, we might decide to include only a subset of the Pizza objects in the serialized representation of each Restaurant. For example, we might only include the Pizza objects that are the most popular:&lt;/p&gt;

&lt;p&gt;&lt;code&gt;class Restaurant(db.Model, SerializerMixin):&lt;br&gt;
    serialize_rules = ('pizzas', '-restaurant_pizzas', '-created_at', '-updated_at')&lt;br&gt;
    @property&lt;br&gt;
    def pizzas(self):&lt;br&gt;
        return sorted(self.pizzas, key=lambda pizza: pizza.popularity)[:3]&lt;/code&gt;&lt;/p&gt;

&lt;p&gt;In this case, we define a property that returns only the three most popular Pizza objects for each Restaurant, and we include only this property in the serialized representation of each Restaurant.&lt;/p&gt;

&lt;p&gt;By being mindful of our use of serialize rules and taking care to avoid recursion errors, we can use this powerful tool to create clean, concise serialized representations of our database objects.&lt;/p&gt;

&lt;p&gt;Serialize rules are a powerful tool for creating serialized representations of database objects in SQLAlchemy. By using serialize rules, we can control which properties of each object are included in the serialized representation, and we can exclude properties that are not relevant or that might cause recursion errors.&lt;/p&gt;

&lt;p&gt;In this article, we looked at an example of how to use serialize rules in SQLAlchemy to create serialized representations of three tables with a many-to-many relationship. We also discussed some best practices for using serialize rules, including being mindful of recursion errors and using properties to include only a subset of related objects when necessary.&lt;/p&gt;

&lt;p&gt;With these best practices in mind, we can use serialize rules to create clean, concise serialized representations.&lt;/p&gt;

</description>
      <category>python</category>
      <category>sql</category>
    </item>
    <item>
      <title>Did you say "Pythonic"?</title>
      <dc:creator>gabygalv</dc:creator>
      <pubDate>Fri, 24 Mar 2023 17:56:21 +0000</pubDate>
      <link>https://dev.to/gabygalv/did-you-say-pythonic-1h57</link>
      <guid>https://dev.to/gabygalv/did-you-say-pythonic-1h57</guid>
      <description>&lt;p&gt;Python is a popular and versatile programming language that has many features and benefits. But not all Python code is created equal. Some code follows the best practices and conventions of the Python community, while some code just gets the job done.&lt;/p&gt;

&lt;p&gt;I'll be explaining what pythonic code is and a few ways to make your code more "pythonic".&lt;/p&gt;

&lt;h3&gt;
  
  
  What Does Pythonic Mean?
&lt;/h3&gt;

&lt;p&gt;According to &lt;a href="https://hub.packtpub.com/write-python-code-or-pythonic-code/"&gt;Packt Hub&lt;/a&gt;, Pythonic means:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;When people talk about pythonic code, they mean that the code uses Python idioms well, that it’s natural or displays fluency in the language. In other words, it means the most widely adopted idioms that are adopted by the Python community.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Pythonic code is code that follows the principles and philosophy of Python, such as simplicity, readability, elegance, and expressiveness. It can also be described as code that makes the best use of the language features and the standard library. &lt;/p&gt;

&lt;p&gt;It's not just about syntax or style, but also about logic and design. Pythonic code avoids common pitfalls and anti-patterns, such as unnecessary complexity, repetition, or "hack-y" work arounds. &lt;/p&gt;

&lt;h3&gt;
  
  
  How to Write Pythonic Code
&lt;/h3&gt;

&lt;p&gt;Writing Pythonic code is not something that you can learn overnight. It requires practice and familiarity with the language and its idioms. Luckily, there are some general tips and guidelines that can help you improve your Python skills and write more Pythonic code.&lt;/p&gt;

&lt;p&gt;Here are some of them:&lt;/p&gt;

&lt;h3&gt;
  
  
  Use List Comprehensions
&lt;/h3&gt;

&lt;p&gt;List comprehensions are one of the most distinctive and powerful features of Python. They allow you to create new lists from existing iterables (lists, tuples, sets, dictionaries, etc.) in a concise way.&lt;/p&gt;

&lt;p&gt;For example, if you want to create a list of multiples of 2 for the numbers from 1 to 10. You could do it with a for loop like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="n"&gt;by_two&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[]&lt;/span&gt;
&lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;x&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="nb"&gt;range&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;11&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
&lt;span class="n"&gt;by_two&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;append&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;x&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This works, but a more Pythonic way to do it is with a list comprehension like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="n"&gt;by_two&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;x&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt; &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;x&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="nb"&gt;range&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;11&lt;/span&gt;&lt;span class="p"&gt;)]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is much shorter and clearer than the for loop version. It also avoids the inefficiency of creating an empty list and appending to it.&lt;/p&gt;

&lt;p&gt;List comprehensions can also have conditions to filter out unwanted elements. For example, if you wanted to create a list of even squares from 1 to 10. You could do it with a list comprehension like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="n"&gt;even_squares&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="n"&gt;x&lt;/span&gt; &lt;span class="o"&gt;**&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt; &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;x&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="nb"&gt;range&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;11&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;x&lt;/span&gt; &lt;span class="o"&gt;%&lt;/span&gt; &lt;span class="mi"&gt;2&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This will only include the squares of even numbers in the new list.&lt;/p&gt;

&lt;p&gt;List comprehensions can also be nested to create lists of lists or other complex structures. If you want to create a list of lists that represents a multiplication table from 1 to 10. You could do it with a nested list comprehension like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="n"&gt;table&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[[&lt;/span&gt;&lt;span class="n"&gt;x&lt;/span&gt; &lt;span class="o"&gt;*&lt;/span&gt; &lt;span class="n"&gt;y&lt;/span&gt; &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;x&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="nb"&gt;range&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;11&lt;/span&gt;&lt;span class="p"&gt;)]&lt;/span&gt; &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;y&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="nb"&gt;range&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="mi"&gt;11&lt;/span&gt;&lt;span class="p"&gt;)]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This will create a list of 10 lists, each with 10 elements that are the products of two numbers from 1 to 10.&lt;/p&gt;

&lt;p&gt;You can also use list comprehension for other types of collections such as sets or dictionaries. If you wanted to create a set of &lt;em&gt;unique&lt;/em&gt; words from a sentence. You could do it with a &lt;em&gt;set&lt;/em&gt; comprehension like this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="n"&gt;sentence&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="s"&gt;"This is a sentence with some repeated words"&lt;/span&gt;
&lt;span class="n"&gt;words&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="n"&gt;word&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;lower&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;word&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="n"&gt;sentence&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;split&lt;/span&gt;&lt;span class="p"&gt;()}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This will create a set of lowercase words from the sentence without any duplicates.&lt;/p&gt;

&lt;h3&gt;
  
  
  Use built-in data structures and functions
&lt;/h3&gt;

&lt;p&gt;Python has a set of built-in data structures and functions that can help you solve many common problems. You can use lists, tuples, dictionaries, sets, strings, numbers, booleans, etc. to store and manipulate data. You can also use functions like &lt;code&gt;len&lt;/code&gt;, &lt;code&gt;max&lt;/code&gt;, &lt;code&gt;min&lt;/code&gt;, &lt;code&gt;sum&lt;/code&gt;, &lt;code&gt;sorted&lt;/code&gt;, &lt;code&gt;map&lt;/code&gt;, &lt;code&gt;filter&lt;/code&gt;, &lt;code&gt;zip&lt;/code&gt;, etc. to perform operations on data.&lt;/p&gt;

&lt;p&gt;Using built-in data structures and functions can make your code more concise, efficient and readable (some might even say.. pythonic?). Instead of writing a loop to iterate over a list and check if an element is in another list, you can use the &lt;code&gt;in&lt;/code&gt; operator:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="c1"&gt;#bad
&lt;/span&gt;&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;check_element&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;element&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;list1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;list2&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
&lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;x&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="n"&gt;list1&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
&lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;x&lt;/span&gt; &lt;span class="o"&gt;==&lt;/span&gt; &lt;span class="n"&gt;element&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
&lt;span class="k"&gt;if&lt;/span&gt; &lt;span class="n"&gt;element&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="n"&gt;list2&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
&lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="bp"&gt;True&lt;/span&gt;
&lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="bp"&gt;False&lt;/span&gt;

&lt;span class="c1"&gt;#good 
&lt;/span&gt;&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;check_element&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;element&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;list1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="n"&gt;list2&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
&lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="n"&gt;element&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="n"&gt;list1&lt;/span&gt; &lt;span class="ow"&gt;and&lt;/span&gt; &lt;span class="n"&gt;element&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="n"&gt;list2&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Don't we just love turning a 6 line loop into a single line? &lt;em&gt;chefs kiss&lt;/em&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Use meaningful names and consistent style
&lt;/h3&gt;

&lt;p&gt;One of the most important aspects of writing readable and maintainable code is using meaningful names for your variables, functions, classes and modules. Meaningful names can help you and others understand what your code does and why. They can also help you avoid errors or bugs by making your code more self-documenting.&lt;/p&gt;

&lt;p&gt;You should also follow a consistent style for your naming conventions. For example, you should use lowercase letters with underscores for variables and functions (&lt;code&gt;my_variable&lt;/code&gt;, &lt;code&gt;my_function&lt;/code&gt;), AKA snake case. &lt;/p&gt;

&lt;p&gt;Python has quite an extensive style guide which can be found &lt;a href="https://peps.python.org/pep-0008/"&gt;here&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Are you feeling Pythonic?
&lt;/h3&gt;

&lt;p&gt;Well, now that we've all read the word pythonic 15 times and covered a few ways to improve our code we know that it's not just about following some rules or conventions, writing pythonic code is a philosophy. I'll leave you with a few of my favorite thoughts from the Zen of Python: &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Beautiful is better than ugly.&lt;br&gt;
Simple is better than complex.&lt;br&gt;
Complex is better than complicated.&lt;br&gt;
Special cases aren't special enough to break the rules.&lt;br&gt;
Although practicality beats purity.&lt;br&gt;
In the face of ambiguity, refuse the temptation to guess.&lt;br&gt;
There should be one-- and preferably only one --obvious way to do it.&lt;br&gt;
Although that way may not be obvious at first unless you're Dutch.&lt;br&gt;
If the implementation is hard to explain, it's a bad idea.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;You can access the full Zen of Python guidelines by typing &lt;code&gt;import this&lt;/code&gt; in your interpreter or going &lt;a href="https://peps.python.org/pep-0020/"&gt;here&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>python</category>
      <category>beginners</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Getting started with React</title>
      <dc:creator>gabygalv</dc:creator>
      <pubDate>Thu, 09 Mar 2023 17:45:32 +0000</pubDate>
      <link>https://dev.to/gabygalv/getting-started-with-react-4217</link>
      <guid>https://dev.to/gabygalv/getting-started-with-react-4217</guid>
      <description>&lt;p&gt;In the last 2-3 weeks of learning React, I've bounced around between loving it and hating it. Today I'm feeling more on the love side of the spectrum but that's not without the help of understanding a few of the core concepts of what makes React such a popular framework (or is it a library?).&lt;/p&gt;

&lt;p&gt;Before we get into the whirlwind of React concepts, lets talk about imperative vs declarative programming.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Imperative programming&lt;/strong&gt;: Explicitly describes the actions a program should take each step of the way and &lt;em&gt;describes&lt;/em&gt; how a program should go about doing those actions. &lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Declarative programming&lt;/strong&gt;: Describes what a program should accomplish (or what the end result should be). Leaves the determination of how to get to the end result up to the program.&lt;/p&gt;

&lt;h3&gt;
  
  
  Components
&lt;/h3&gt;

&lt;p&gt;One of the main building blocks of React and likely the first concept to grasp is the idea of components. As opposed to Vanilla JS where your entire single page application lives on one long index.js file, React's main ideology is breaking your code up into independent components that each render separately.&lt;/p&gt;

&lt;p&gt;Having only used Vanilla JS, the challenge for me was deciding when to create a new component and most importantly why?? Luckily, React has a great article on &lt;em&gt;Thinking in React&lt;/em&gt;, one bit I found especially helpful was the idea of single responsibility components.  &lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;One such technique is the single responsibility principle, that is, a component should ideally only do one thing. If it ends up growing, it should be decomposed into smaller subcomponents&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Read more here: &lt;a href="https://reactjs.org/docs/thinking-in-react.html"&gt;Thinking in React Documentation&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Let's look at the example below: &lt;/p&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--5iZvAs6e--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mw2s043eo6fsealajmp0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--5iZvAs6e--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mw2s043eo6fsealajmp0.png" alt="Thinking in React component hierarchy" width="854" height="538"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Each item is labeled as an individual component and what children components would live within them.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;The parent/root component, the main responsibility of this component is to hold the header and list logic components (aka it's children)&lt;/li&gt;
&lt;li&gt;This component's only responsibility is to display the header text&lt;/li&gt;
&lt;li&gt;Container components are just as important in react, this components simply holds it's two children components &lt;/li&gt;
&lt;li&gt;To-do input, accepts user input&lt;/li&gt;
&lt;li&gt;This component is a container for the todos items&lt;/li&gt;
&lt;li&gt;Finally, this component renders the individual to-do items&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Okay.. we get React now, right? Wrong! Now that we have each of these individual components that each handle one individual part of your application.. how do you pass information through each one?&lt;/p&gt;

&lt;h3&gt;
  
  
  Props
&lt;/h3&gt;

&lt;p&gt;Once you wrap your head around components, you start to think about data flow. Where is it coming from? Where is it going? This is where props come in to the picture, props is short for &lt;em&gt;properties&lt;/em&gt;, individual pieces of data that are being passed in to components.&lt;/p&gt;

&lt;p&gt;It's important to remember that props can be passed from parent to children components, but not to sibling components. Props can be objects, arrays, or even attributes, they must be passed by the parent component, and also accepted by the child component. What does that mean? &lt;/p&gt;

&lt;p&gt;Lets say Profile is the parent component, here we're passing down 2 props to Avatar: the person object (name and imageId) and size.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--SGzxQrZE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/henankmtfodtowkdkpg5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--SGzxQrZE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/henankmtfodtowkdkpg5.png" alt="parent component" width="531" height="205"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Avatar is accepting person and size, and now they're available to sue in the component.&lt;br&gt;
&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--pyjFOiLO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gkmz74pka8eqp43w2guw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--pyjFOiLO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gkmz74pka8eqp43w2guw.png" alt="child component" width="392" height="84"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Props are read-only snapshots in time: every render receives a new version of props. So what if we have props that change based on user input? That's where State comes in!&lt;/p&gt;

&lt;h3&gt;
  
  
  State
&lt;/h3&gt;

&lt;p&gt;State can be described as a component's memory, you can store information in state, set that information, and also give it a default value. &lt;/p&gt;

&lt;p&gt;One simple example is, a search input:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;You'll likely want the default value of of the search input to be an empty string&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--MVFNr0k6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9avdfi28d29l1w4yphvx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--MVFNr0k6--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9avdfi28d29l1w4yphvx.png" alt="search state" width="383" height="49"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Once a user starts typing, you'll want to set the value of the search to the input value&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--C75Cg97e--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9fmuy40f79fel7xzatjc.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--C75Cg97e--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9fmuy40f79fel7xzatjc.png" alt="setting search state" width="582" height="74"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Then you'll want the component to keep that input so can use that value to filter some data &lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;&lt;a href="https://res.cloudinary.com/practicaldev/image/fetch/s--T9u5tE4u--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nvfmrro1mn83uumzmp6j.png" class="article-body-image-wrapper"&gt;&lt;img src="https://res.cloudinary.com/practicaldev/image/fetch/s--T9u5tE4u--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nvfmrro1mn83uumzmp6j.png" alt="using state to filter" width="577" height="47"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Final thoughts
&lt;/h3&gt;

&lt;p&gt;There are many many more concepts to consider but learning these felt like the big 3 that helped me go from hating React to kind of enjoying it! Getting used to JSX and the syntax definitely contributed to the painful journey of React but much easier to grasp!&lt;/p&gt;

&lt;p&gt;If you're finding yourself struggling to learn React, take a look at some of their documentation &lt;a href="https://beta.reactjs.org/learn"&gt;here&lt;/a&gt;.&lt;/p&gt;

</description>
      <category>react</category>
      <category>javascript</category>
      <category>beginners</category>
    </item>
    <item>
      <title>VS Code Shortcuts for Beginners</title>
      <dc:creator>gabygalv</dc:creator>
      <pubDate>Fri, 10 Feb 2023 19:10:39 +0000</pubDate>
      <link>https://dev.to/gabygalv/vs-code-shortcuts-for-beginners-59l9</link>
      <guid>https://dev.to/gabygalv/vs-code-shortcuts-for-beginners-59l9</guid>
      <description>&lt;p&gt;Learning to code is &lt;em&gt;famously&lt;/em&gt;, not easy. Aside from learning new languages, you're learning to navigate a whole new toolset that you've likely never even heard of. As a beginner, using VS Code, GitHub, and even Terminal can feel like having keys to a Ferrari but you have no clue where it's parked. Frustrating, right?&lt;/p&gt;

&lt;p&gt;Learning to take advantage of shortcuts and extensions helps streamline your process and may even result in better coding! Below I’ll be sharing some of the VS Code shortcuts I’ve found most useful as a new developer.&lt;/p&gt;

&lt;p&gt;Full list of VS Code shortcuts: &lt;a href="https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf" rel="noopener noreferrer"&gt;Windows&lt;/a&gt;/&lt;a href="https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf" rel="noopener noreferrer"&gt;Mac&lt;/a&gt;.&lt;/p&gt;

&lt;h3&gt;
  
  
  Show/Hide Terminal
&lt;/h3&gt;

&lt;h5&gt;
  
  
  Mac: Control + `
&lt;/h5&gt;

&lt;h5&gt;
  
  
  Windows: Ctrl + `
&lt;/h5&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgutgd051s5qp0yu2h3py.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fgutgd051s5qp0yu2h3py.gif" alt="Integrated terminal opening and closing" width="600" height="223"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Discovering this shortcut was what made me want to look for more shortcuts to increase my productivity. The first time I ever opened VS Code, the integrated terminal was already open but having to look for it the next time took me a few minutes. &lt;/p&gt;

&lt;h3&gt;
  
  
  Show/Hide Sidebar
&lt;/h3&gt;

&lt;h5&gt;
  
  
  Mac: Command + b
&lt;/h5&gt;

&lt;h5&gt;
  
  
  Windows: Ctrl + b
&lt;/h5&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvcbrpf9f7xa01b8r6uso.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvcbrpf9f7xa01b8r6uso.gif" alt="show/hide sidebar" width="600" height="275"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This shortcut is mostly a preference, you can definitely toggle the sidebar by simply clicking any of the buttons on the sidebar but I prefer not leaving my keyboard whenever possible.&lt;/p&gt;

&lt;h3&gt;
  
  
  Split Editor
&lt;/h3&gt;

&lt;h5&gt;
  
  
  Mac: Command + \
&lt;/h5&gt;

&lt;h5&gt;
  
  
  Windows: Ctrl + \
&lt;/h5&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8modzy8eraxau7wpvo6i.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8modzy8eraxau7wpvo6i.gif" alt="Split editor" width="600" height="319"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;When writing functions that rely on syntax used in the HTML file, it's a huge time saver to be able to see both files at the same time! Using split editor not only helps speed up my coding, but also stops me from getting distracted by flipping through different tabs. Keep in mind you can add multiple tabs, my current set up for most projects is 3 editors: the ReadMe file, Javascript file, and an HTML or CSS file.&lt;/p&gt;

&lt;h3&gt;
  
  
  Word Wrap
&lt;/h3&gt;

&lt;h5&gt;
  
  
  Mac: Option + z
&lt;/h5&gt;

&lt;h5&gt;
  
  
  Windows: Alt + z
&lt;/h5&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fr9erf3jl2zsdlpe2wbdv.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fr9erf3jl2zsdlpe2wbdv.gif" alt="Word Wrap" width="600" height="319"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Another very easy fix to an annoying newbie issue. Typing out pseudocode really helps me to problem solve and decide what to code next. Doing so (especially with split editors) can get messy quickly, using word wrap solves this pesky nuisance! Don't quote me on this but I believe you only need to set this option once, and it should stick as your default setting.&lt;/p&gt;

&lt;h3&gt;
  
  
  Find and Replace
&lt;/h3&gt;

&lt;h5&gt;
  
  
  Mac: Command + f
&lt;/h5&gt;

&lt;h5&gt;
  
  
  Windows: Ctrl + f
&lt;/h5&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F27yiu7zo7nguankyk9y8.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F27yiu7zo7nguankyk9y8.gif" alt="Find and replace" width="600" height="288"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;This one took me a surprising amount of time to discover.. it's my go-to for skimming articles and when using word editors, but I didn't automatically assume it would be a function of a code editor! Incredibly helpful for typos or renaming multiple elements at once, as shown in the gif above.&lt;/p&gt;

&lt;h3&gt;
  
  
  Multiple cursors
&lt;/h3&gt;

&lt;h5&gt;
  
  
  Mac: Option + Right-click
&lt;/h5&gt;

&lt;h5&gt;
  
  
  Windows: Alt + Right-click
&lt;/h5&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa6siuigp25jzncjupk2u.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fa6siuigp25jzncjupk2u.gif" alt="multiple cursors" width="600" height="942"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Being able to add multiple cursors is an invaluable tool! Sometimes find and replace isn't exactly what you need, if you're looking to make just a few h2 elements into h3, you wouldn't want to replace all of them but you can highlight the ones you need and replace the select few at the same time.&lt;/p&gt;

&lt;h3&gt;
  
  
  Duplicate Line
&lt;/h3&gt;

&lt;h5&gt;
  
  
  Mac: Shift + Option + up/down
&lt;/h5&gt;

&lt;h5&gt;
  
  
  Windows: Shift + Ctrl + up/down
&lt;/h5&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2s4z2ndvcxrv0e1ips2q.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2s4z2ndvcxrv0e1ips2q.gif" alt="duplicate line" width="600" height="193"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;When you're writing code that is repetitive, or adding multiple list items as shown above, being able to duplicate a line is so nice! It can help prevent syntax errors or simply save your fingers from extra typing. As long as your cursor is on the line you want to duplicate, this shortcut will take care of the rest.&lt;/p&gt;

&lt;h3&gt;
  
  
  Zen Mode
&lt;/h3&gt;

&lt;h5&gt;
  
  
  Mac: Command + k then z
&lt;/h5&gt;

&lt;h5&gt;
  
  
  Windows: Ctrl + k then z
&lt;/h5&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fid02f43tgx25qwjgaq80.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fid02f43tgx25qwjgaq80.gif" alt="Zen mode" width="600" height="373"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Zen mode removes all distractions from your editor and shows you your code full screen (including any split editors you might have). I've found this useful when I'm really trying to focus or debug tricky code. To exit zen mode, simply hit ESC.&lt;/p&gt;

&lt;h3&gt;
  
  
  Open shortcuts
&lt;/h3&gt;

&lt;h5&gt;
  
  
  Mac:  Command + k then Command + s
&lt;/h5&gt;

&lt;h5&gt;
  
  
  Windows: Ctrl + k then Ctrl + s
&lt;/h5&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwblrxar0430j3b2mlsub.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwblrxar0430j3b2mlsub.gif" alt="open shortcuts" width="600" height="391"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Finally, if you want to see all of the shortcuts available in VS Code and don't want to go searching for the PDFs (linked here) you can simply use this command within the program and browse what's available to you! You can even edit the pre-programmed shortcuts and add your own. &lt;/p&gt;

</description>
      <category>performance</category>
      <category>caching</category>
      <category>discuss</category>
    </item>
  </channel>
</rss>
