DEV Community: Angelika Jarosz

React Hooks: Making Function Components Stateful

Angelika Jarosz — Fri, 28 Jun 2019 18:30:04 +0000

React hooks let us use ("hook in to") React features such as state and lifecycle methods in function components. Before the hooks API was introduced to React, if we wanted a component to maintain some state, we would have to write it as a class component.

While it is important to learn why and how things function in the language you are writing in, classes can initially create an unnecessary barrier to initial productivity or understanding of other concepts. For example, as a new react developer, you may gain an understanding of how state and events work in react, but then get tripped up by a bug because you don't have a solid understanding of how the this keyword works.

In this post we will take a look at how the useState hook works to allow us to make function components stateful.

Using the useState Hook

In order to use the useState hook we first need to import it. After we import it we can use it to create some local state within a function component.

import React, { useState } from 'react';

function Example() {
...
}

useState takes one argument and returns a pair of values. The first in the pair of values is the current state value, and the second is a function that lets you update the value. React preserves this state between renders.

In the example below useState returns a state variable category and a function setCategory that we can use to update the value of the category variable. The argument passed in is whatever you want the initial state to be and will only be used for the initial render. In the example we pass in the string "Clothing" as the argument.

import React, { useState } from 'react';

function Example() {
  const [category, setCategory] = useState("Clothing")
  return (
    <p>{category}</p>
  )
}

Unlike in class components, when we use useState, the value passed in as the argument does not have to be an object. We can pass in a string, a number, an object, null etc. We can also use useState multiple times to create different state variables. The function returned by useState is similar conceptually to calling this.setState in a class component. However, unlike this.setState in a class, updating a state variable always replaces it instead of merging it.

So we created some local state, how do we use and update it in our code?

In the example below we have a function component ProductListing that has two calls to useState. Since the first item in the pair useState returns is just a variable with the initial value we provided as the argument, we can use this variable directly in our components jsx without having to write something like this.state.category as we do in class components.

import React, { useState } from 'react';

function ProductListing() {
  const [category, setCategory] = useState("Clothing")
  const [product, setProduct] = useState({"id" : 1, "name": "jeans"});

  return (
    <div>
      <h1>{category}</h1>
      <p>{product.name}</p>
    </div>
  );
}

Lets add an input that allows us to type in a category and update our category state variable. Our input has an event handler handleCategoryChange that uses the setCategory function to update the category state variable with the current value of the input. As we type we will see the category being updated in real time.

import React, { useState } from 'react';

function ProductListing() {
  const [category, setCategory] = useState("Clothing")
  const [product, setProduct] = useState({"id" : 1, "name": "jeans"});

  const handleCategoryChange = (e) => {
    setCategory(e.target.value)
  }

  return (
    <div>
      <input onChange={handleCategoryChange}/> 
      <h1>{category}</h1>
      <p>{product.name}</p>
    </div>
  );
}

However, i would like to reiterate that updating a state variable always replaces it instead of merging it as this.setState in a class does. If we wanted to update our product state variable and called setProduct with a different product object, we would be replacing the whole product object and not merging it with the previous one. This is a big part of the reason why we can have many different state variables. It is recommended to split state into multiple state variables based on which values tend to change together. You can read more about ways to think about this in the official react docs here.

Hopefully you have come away with a better understanding of how the useState hook works to allow you to add local state to your function components! I would recommend reading through the react docs on the useState hook for a deeper dive!

If you have any questions, comments, or feedback - please let me know. Follow for new weekly posts about JavaScript, React, Python, and Django!

A Guide to Rest and Spread: Part 2

Angelika Jarosz — Fri, 21 Jun 2019 18:48:43 +0000

In Part 1, we briefly explained the difference between the rest parameter and the spread operator, and took a deep dive into the rest parameter. This post will continue on to take a dive into the spread operator. Here are the quick explanations from part 1 for a quick concept refresher:

Rest parameter: collects all remaining elements or arguments into an array.

Spread operator: allows iterables such as arrays and strings to be expanded into single arguments or elements. Object expressions will be expanded into another object.

Dive into the spread operator

In the previous post we saw the rest operator took some individual elements or arguments and collected them into one array. The spread operator essentially has the opposite function. It takes an iterable and expands it into multiple individual elements or arguments. Lets look at what this looks like in code and situations in which it is helpful to use.

Using the spread operator with:

a string will give you the individual characters of the string

let aString = "spread string"
console.log(...aString) // s p r e a d  s t r i n g

an array will give you the individual elements in the array

let anArray = ["puppies", "kittens", 5, null]
console.log(...anArray) // puppies kittens 5 null

an object will give you

let anObject = {"name": "Angelika",
                "hairColor": "purple"}
console.log(...anObject) // Whoops we get a TypeError because anObject is not an iterable
console.log({...anObject}) // but we can spread it into another object and get
// {"name": "Angelika", "hairColor": "purple"}

Now that we understand the basics of what the spread operator does, lets look into how we would actually use it in our code.

Spread Operator Use Cases:

Copying arrays

If we want to make a copy of an array we can spread the array into another array literal like so:

let anArray = ["puppies", "kittens", 5, null]
let copyOfAnArray = [...anArray]
console.log(copyOfAnArray) // ["puppies", "kittens", 5, null]

Combining arrays

We can use the spread operator to combine arrays into a new array of all the individual elements like so:

let dogs = ["beagle", "corgi", "labrador", "poodle"]
let cats = ["persian", "ragdoll", "munchkin", "siamese"]
let animals = [...dogs, ...cats] 
console.log(animals) // ["beagle", "corgi", "labrador", "poodle", "persian", "ragdoll", "munchkin", "siamese"]

If we didn't use the spread operator here we would get an array of two arrays.

animals = [dogs, cats]
console.log(animals)
// [["beagle", "corgi", "labrador", "poodle"], ["persian", "ragdoll", "munchkin", "siamese"]]

Passing elements of an array as arguments to a function

If we have an array of elements and we want to use those elements as the arguments to a function we can use the spread syntax instead of using the apply method. In the fruits function below we have 3 parameters describing types of fruits. We have an args array whose elements we want to use as the arguments to the function. By using the spread operator on the args array, the elements will be passed in as the arguments to the function instead of the whole array as one argument.

function fruits(citrusFruit, stoneFruit, berry) {}
var args = ["lemon", "plum", "strawberry"]
fruits(...args) 
// this is equivalent to calling fruits like so: 
// fruits("lemon", "plum", "strawberry")
fruits(args)
// this is equivalent to calling fruits like so:
// fruits(["lemon", "plum", "strawberry"])
// which is not what we want

Using the above knowledge we can see how this can be useful with Math functions

let numbers = [10, 99, 5, 23, 4]
Math.min(...numbers) // 4
Math.max(...numbers) // 99

Object Spread

We can use spread to create a shallow copy of an object in another object and add a property to it without changing the original object. In the example below we have an object primitiveTypes that has some examples of primitive types as key value pairs. We then create a new object dataTypes that uses the spread operator to spread all the properties in primitiveTypes into dataTypes, and we also add one more property.

const primitiveTypes = { "number" : 4, 
                         "string": "pizza",
                         "boolean" : true,
                         "null": null,
                         "undefined" : undefined, 
                        };              

const dataTypes = {...primitiveTypes, 
                   "array": ["stuff", "things"]
                   };

/* dataTypes object will be:
 { "number" : 4, 
   "string": "pizza",
   "boolean" : true,
   "null": null,
   "undefined" : undefined, 
   "array": ["stuff", "things"]
}
*/

We can also merge two objects together easily using spread like so:

const obj1 = {"one": 1, "two" : 2}
const obj2 = {"three": 3, "four": 4}
const mergedObj = {...obj1, ...obj2}
// mergedObj will be
/* {"one": 1, "two" : 2, "three": 3, "four": 4} */

However we have to be careful when using spread with objects because we can override something we didn't mean to if we get the order wrong. Pay attention in the example below what happens to the value of the citrus key in otherFruits and differentFruits depending on where we use the spread operator to spread the original fruits object.

const fruits = {
                "citrus": "lemon",
                "stone": "plum"
                }

Order matters to determine if a key gets overridden!

const otherFruits = {
                     "citrus" : "lime",
                     "berry": "strawberry",
                     ...fruits
                    }
console.log(otherFruits) // {citrus: "lemon", berry: "strawberry", stone: "plum"}

const differentFruits = {
                         ...fruits, 
                         "citrus": "lime",
                         "berry": "strawberry"
                         }
console.log(differentFruits) // {citrus: "lime", stone: "plum", berry: "strawberry"}

Hopefully you have come away with a better understanding of what the spread operator does in JavaScript and some of its use cases. As always one of the best ways to get a better understanding of the concepts is to get some practice using them!

If you have any questions, comments, or feedback - please let me know. Follow for new weekly posts about JavaScript, React, Python, and Django!

A Guide to Rest and Spread: Part 1

Angelika Jarosz — Fri, 14 Jun 2019 18:42:24 +0000

What is the rest parameter and spread operator?

Both the rest parameter and spread operator are expressed in JavaScript code as ... This might initially be confusing as they do opposite things.

Rest parameter: collects all remaining elements or arguments into an array.

Spread operator: allows iterables such as arrays, strings, or objects to be expanded into single arguments or elements.

Lets look at some examples to figure out what the above actually means.

Dive into the Rest Parameter

When defining functions in JavaScript, we can add parameters. Parameters describe arguments that will be supplied when calling the function. In the code below we have a function definition for a function puppy that returns a description of a puppy. Name, breed and size are the function's parameters. Spot, Dachshund and small are the supplied arguments when the function is called.

function puppy(name, breed, size){
  var description = `${name} is a ${size} ${breed}`
  return description
}

puppy("Spot", "Dachshund", "small")

We can add another special kind of parameter to a function called the rest parameter. This parameter will take all the remaining arguments that are supplied and collect them into an array. Because it collects all remaining arguments it must be the last parameter provided in the function definition.

You can call it whatever you'd like to as long as you use the ...something syntax. I am using ...traits below. The puppy function now returns an updated description with the traits if they are provided.

function puppy(name, breed, size, ...traits){
  console.log(traits)
  var description = `${name} is a ${size} ${breed}.`
  if (traits.length > 0) {
    return `${description} They have the following traits: ${traits.join(', ')}`
  }
  return description
}

Now if we add more arguments when calling the function and console log traits we will get the additional arguments as an array. If there are no additional arguments supplied, then traits will be an empty array.

puppy("Spot", "Dachshund", "small", "playful", "intelligent", "energetic", "stubborn")
// traits will be logged as:
// `[ 'playful', 'intelligent', 'energetic', 'stubborn' ]`.
// the function will return: 
// 'Spot is a small Dachshund. They have the following traits: playful, intelligent, energetic, stubborn'
puppy("Spot", "Dachshund", "small")
// traits will be logged as []
// the function will return:
// 'Spot is a small Dachshund.'

How is the rest operator different than the `arguments` object?

When writing JavaScript functions we also have access to an arguments object. The arguments object contains all arguments that are passed to a function. At first glance we might think that then there is no difference between

passing in the rest parameter as the only parameter to a function and
the arguments object

However, the benefit to using the rest parameter in this case is that the rest parameter returns an actual array instance. This means that we can use any array method on it directly. The arguments object is not a real array. Trying to call array methods on it will result in an error.

Using the `arguments` object:

If we have a new function puppyTraits and call it with some arguments we can log the arguments object to get all the arguments passed in. But if we try to use an array method directly on the object we get an error. We can get around this if we wanted to by using Array.from(arguments) to turn the object into an array instance. However, this is unnecessary if we use the rest operator.

function puppyTraits(){
  console.log(arguments)
  return `This puppy has the following traits: ${arguments.join(', ')}`
}

puppyTraits("playful", "intelligent", "energetic", "stubborn")
// arguments will be logged as:
/* [Arguments] {
  '0': 'playful',
  '1': 'intelligent',
  '2': 'energetic',
  '3': 'stubborn' }
*/
// the function will not return as there will be an error:
// TypeError: arguments.join is not a function

Using the rest operator

The same function using a rest parameter instead of the arguments function. Since traits is now an array we can use any array method on it in our code!

function puppyTraits(...traits){
  console.log(traits)
  return `This puppy has the following traits: ${traits.join(', ')}`
}

puppyTraits("playful", "intelligent", "energetic", "stubborn")
// traits will be logged as:
// [ 'playful', 'intelligent', 'energetic', 'stubborn' ]
// the function will return:
// 'This puppy has the following traits: playful, intelligent, energetic, stubborn'

Hopefully you have come away with a better understanding of what the rest parameter does in JavaScript and some of its use cases. We will dive into the spread operator in Part 2!

If you have any questions, comments, or feedback - please let me know. Follow for new weekly posts about JavaScript, React, Python, and Django!

Tired of Guessing What 'this' Is Referring To?

Angelika Jarosz — Fri, 07 Jun 2019 16:29:14 +0000

What is `this`?

If you are new to JavaScript it is only a matter of time before you run into the concept of the this keyword. The this keyword is the JavaScript context object in which the current code is executing. When JavaScript code is executing, it is running within a specific execution context. When a browser first loads a script, it is in the global execution context. However, once a function is called a new execution context is formed and pushed onto the call stack.

At first determining the value of this might feel a little like magic and have you throwing console.log()'s in your code. However, there are only a few rules that you can go through to figure out what this is referring to. The most important thing to first remember is that the value of this depends on how a function is called. Looking at where the function is defined will not help you.

Rules for determining the value of `this`:

First we look to see if the new keyword is used when calling the function. If new is used this inside the function will refer to the brand new object created when new runs Object.Create() under the hood.

Second we see if apply, call, or bind are used when calling the function. this inside the function will refer to the object that is passed in as the argument to apply, call, or bind.

Third, if a function is called as a method, such as obj.method() — this will refer to the object that the function is a property of.

Otherwise this is the global object. In a browser, it is the window object. If in strict mode ('use strict'), this will be undefined instead of the global object.

One thing to note is that ES6 arrow functions ignore all the rules above. They do not have their own this, so this is determined lexically. This means that JavaScript will look to its surrounding parent scope to determine what this is referring to.

Why is `this` even important?

If we think about why we write functions in general we see that functions make it easy to encapsulate and reuse logic. The this keyword lets us decide what context we want when we invoke a function. By using this we can reuse functions or methods within different contexts or with different objects.

If you have any questions, comments, or feedback - please let me know. Follow for new weekly posts about JavaScript, React, Python, and Django!

Learn Public Class Field Syntax by Refactoring a React Component

Angelika Jarosz — Fri, 31 May 2019 17:17:56 +0000

When you are reading React code, you come across many different ways of doing things that accomplish the same thing. As a beginner this can be an easy road to confusion. One of the differences you may see is a React class component using public class field syntax.

This syntax is not React specific, but something that can be used when writing any JavaScript class. Before diving in, its useful to note that public and private class field declarations are still a feature currently in stage 3 of the TC39 process. However, this feature can be used through a build system like Babel (which you are likely already using if you are writing React code).

Personally I internalize things better when I can see some code refactored through multiple steps instead of just initial and final. We have a Fundraiser component that has some state and renders two components. One a form with two inputs for the current amount and the goal, and another that displays this data. We will be refactoring this component to use public class field syntax.

Here's the original and final component for reference.

Original Component

import React from 'react';
import ProgressForm from './ProgressForm.js';
import ProgressBar from './ProgressBar.js';

class Fundraiser extends React.Component {
  constructor(props) {
    super(props);
    this.handleAmountChange = this.handleAmountChange.bind(this);
    this.handleGoalChange= this.handleGoalChange.bind(this);
    this.state = { amount: '',
                   goal: ''
                  };
  }

  handleAmountChange(amount) {
    this.setState({ amount });
  }

  handleGoalChange(goal) {
    this.setState({ goal })
  }

  render() {
    const { goal, amount } = this.state
    return (
      <>
        <ProgressBar amount={amount} goal={goal} />
        <ProgressForm
          onAmountChange={this.handleAmountChange} amount={amount}
          onGoalChange={this.handleGoalChange} goal={goal}
        />
      </>
    );
  }
}

export default Fundraiser;

Refactored Using Public Class Field Syntax

import React from 'react';
import ProgressForm from './ProgressForm.js';
import ProgressBar from './ProgressBar.js';

class Fundraiser extends React.Component {
  state = { amount: '',
            goal: ''
          };

  handleAmountChange = (amount) => {
    this.setState({ amount });
  }

  handleGoalChange = (goal) => {
    this.setState({ goal })
  }

  render() {
    const { goal, amount } = this.state
    return (
      <>
        <ProgressBar amount={amount} goal={goal} />
        <ProgressForm
          onAmountChange={this.handleAmountChange} amount={amount}
          onGoalChange={this.handleGoalChange} goal={goal}
        />
      </>
    );
  }
}

export default Fundraiser;

Lets see what changed!

In our initial component we have a class with some methods for our event handlers, handleAmountChange and handleGoalChange, the render method, and a constructor in which we set some state, and handle the correct this binding to ensure our methods work as we expected with the correct this context.

The first thing we can easily refactor is to pull our state variable out of the constructor. Using public class field syntax we can define it directly as a property or 'field' on the class.

...
class Fundraiser extends React.Component {
  constructor(props) {
    super(props);
    this.handleAmountChange = this.handleAmountChange.bind(this);
    this.handleGoalChange= this.handleGoalChange.bind(this);
  }
  state = { amount: '',
            goal: ''
          };
...

Now the only thing left in our constructor is the this binding of our methods. We can move these out of our constructor as well by refactoring our methods into arrow functions which means we can get rid of our constructor entirely! We can do this because arrow functions don't have their own this keyword, so the this keyword is bound lexically.

...
class Fundraiser extends React.Component {
  state = { amount: '',
            goal: ''
          };

  handleAmountChange = (amount) => {
    this.setState({ amount });
  }

  handleGoalChange = (goal) => {
    this.setState({ goal })
  }
...

Our code now looks pretty readable and has less boilerplate!

But, we might not always want to use public class field syntax...

As always when writing code there are tradeoffs for the decisions that we make. When a method is added to a class, under the hood it is the same thing as adding that method to the functions prototype. When a method is on the prototype, it is only defined once regardless of how many instances of the class you create. When we use class fields to add methods as we did above, the code might look more readable, but the class fields are added to the instance itself instead of the prototype. If we create 100 instances, we would be creating 100 new copies of the method!

If you have any questions, comments, or feedback - please let me know. Follow for new weekly posts about JavaScript, React, Python, and Django!

Writing a Django Data Migration with Real World Example

Angelika Jarosz — Fri, 24 May 2019 17:14:50 +0000

Most of the time when we think of migrations in Django, we are referring to schema migrations. Django can create these for you automatically as they describe a change to the structure of your database, but not a change in the data itself. However, another type of migration you may find yourself using is a data migration. Data migrations are useful when you are loading new data, or want to change the data in your database using a specific schema.

I came across this problem when I was building ickly, a search interface into NYC Restaurant Health Inspection Data. I wanted users of my app to be able to search for a restaurant by name and see all of its inspections data. The dataset was a CSV file whose rows corresponded to inspections, however, it did have a 'camis' field which was a unique identifier for a business. I wanted to transform this data to match the data models I wanted for Businesses and Inspections and I needed to get all of the unique businesses.

If you are just loading a fixture or some sample data that is already in the structure you need it to be in, you may not need a data migration, but can use the loaddata command provided by Django.

Creating a data migration

Django can't automatically generate data migrations for you, but you can write one yourself. You can run the following command to generate an empty migration file in which you will add operations.

python manage.py makemigrations --empty yourappname

The main operation that we will look at and you will use for your data migration is RunPython. Here is what the auto generated file will look like:

# Generated by Django A.B on YYYY-MM-DD HH:MM
from django.db import migrations

class Migration(migrations.Migration):

    dependencies = [
        ('yourappname', '0001_initial'),
    ]

    operations = [
    ]

RunPython expects a callable as its argument. This function which you will write takes two arguments, an app registry and a schema editor. We then add the RunPython operation passing in our function. This will cause it to be executed when we run ./manage.py migrate from the command line.

from django.db import migrations

def my_function(apps, schema_editor):
    # logic will go here
    pass


class Migration(migrations.Migration):

    dependencies = [
        ('yourappname', '0001_initial'),
    ]

    operations = [
        migrations.RunPython(my_function),
    ]

The app registry maintains a list of the historical versions of all your available models. We want to use the app registry in our function to get the historical version by using apps.get_model('your_app_name', 'your_model_name) instead of just importing the model directly. We do this because we want to make sure we are using the version of the model that this migration expects. If you use a direct import you may be importing a newer version.

The SchemaEditor can be used to manually effect database schema changes. With the exception of highly advanced cases, you most likely will not want to interact with this directly. The SchemaEditor exposes operations as methods and turns things like "create a model" or "alter a field" into SQL.

The RunPython operation can also take a second callable. This second function would contain the logic you want to happen when migrating backwards. If you do not provide one, attempting to migrate backwards will raise an exception. If you want to learn more about the RunPython operation and other optional arguments check out the documentation here

Example

Lets look at an example of a migration taken directly from my code for ickly. I've added comments to point out all the relevant parts we went over in this post.

# -*- coding: utf-8 -*-
# Generated by Django 1.10.1 on 2017-04-20 21:02
from __future__ import unicode_literals

from django.db import migrations, models
import csv
from datetime import datetime


def load_initial_data(apps, schema_editor):
    # get the correct versions of models using the app registry
    Business = apps.get_model("api", "Business")
    Inspection = apps.get_model("api", "Inspection")

    # This is where your migration logic will go. 
    # For my use case i needed to get unique businesses and 
    # transform data from the csv file into the schema i wanted 
    with open('DOHMH_NYC_Restaurant_Inspection_Results.csv') as csv_file:
        reader = csv.reader(csv_file)
        header = next(reader)

        businesses = []
        inspections = []

        for row in reader:
            camis = row[0]
            business = next((b for b in businesses if b.camis == camis), None)
            if not business:
                business = Business(camis=row[0], name=row[1],
                            address="{} {} {} {}".format(row[3], row[4], row[2], row[5]),
                            phone=row[6], cuisine_description=row[7])
                businesses.append(business)

            inspection = Inspection(business=business,
                                record_date=datetime.strptime(row[16],"%m/%d/%Y").date(),
                                inspection_date=datetime.strptime(row[8],"%m/%d/%Y").date(),
                                inspection_type=row[17], action=row[9], violation_code=row[10],
                                violation_description=row[11], critical_flag=row[12],
                                score=int(row[13]) if row[13] else None,
                                grade=row[14],
                                grade_date = datetime.strptime(row[15],"%m/%d/%Y").date() if row[15] else None)
            inspections.append(inspection)

        Business.objects.bulk_create(businesses)
        Inspection.objects.bulk_create(inspections)

## logic for migrating backwards
def reverse_func(apps, schema_editor):
    Business = apps.get_model("api", "Business")
    Inspection = apps.get_model("api", "Inspection")

    Business.objects.all().delete()
    Inspection.objects.all().delete()

class Migration(migrations.Migration):
    # Django automatically adds dependencies for your migration
    # when you generate the empty migration
    dependencies = [
        ('api', '0002_auto_20170420_2101'),
    ]

    # the RunPython operation with the two callables passed in
    operations = [
        migrations.RunPython(load_initial_data, reverse_func)
    ]

There is a lot more to know about Django data migrations, but you now have the knowledge to know whether or not you may need to write one and to get you started if you do. If you want to learn more about Django migrations in general the documentation provides a great overview.

If you have any questions, comments, or feedback - please let me know. Follow for new weekly posts about JavaScript, React, Python, and Django!

Cover Photo by Taylor Vick on Unsplash

Demystifying How JSX Renders for React Beginners

Angelika Jarosz — Fri, 17 May 2019 16:48:40 +0000

Developers new to seeing React code for the first time might see JSX and think why is there HTML in my JavaScript? However, JSX is not actually HTML or a string. It is a syntax extension to JavaScript.

What does this mean? - Anything you can do with JSX you can do with plain JavaScript. Although you will use JSX in most cases, this clears up the common misconception that you must use JSX when using React.
Since we use it all the time, it is useful to see what this abstraction is actually doing under the hood.

So what happens when we create a React component that renders some JSX? It will be converted to use the React.createElement API which returns a new React element of the type it was given. A React element describes what you want to see in your user interface and is just a plain object. This type can be any tag name as a string (examples: 'div', 'h2', 'span'), a React component, or a React fragment. React.createElement also takes in props and children arguments. The React DOM takes care of updating the DOM to match React elements.

React.createElement(
  type,
  [props],
  [...children]
)

Lets look at an example

We will create a component Cat that takes in a name prop and renders a heading with a string telling us the cats name.

Using JSX:

import React from "react";
import ReactDOM from "react-dom";

class Cat extends React.Component {
  render() {
    return <h1>My name is {this.props.name}</h1>
  }
}

ReactDOM.render( <Cat name="Fishguts" />,
  document.getElementById("app")
);

Now lets look at how we would rewrite this without JSX using React.createElement. In the ReactDOM.render function we create and pass in our Cat component and the root DOM node 'app'. We use createElement with our Cat component as the type, and an object with the name property as our props. In the Cat component itself we pass in a h1 tag as a string, and a template literal as a child.

Using React.createElement:

import React from "react";
import ReactDOM from "react-dom";

class Cat extends React.Component {
  render() {
    return React.createElement("h1", null, `My name is ${this.props.name}`);
  }
}

ReactDOM.render(
  React.createElement(Cat, { name: "Fishguts" }, null),
  document.getElementById("app")
);

Hope you have come away with a better understanding of what happens when you write JSX in your React apps!

If you have any questions, comments, or feedback - please let me know. Follow for new weekly posts about JavaScript, React, Python, and Django!

A Plan for Planning Your First Side Project

Angelika Jarosz — Fri, 10 May 2019 14:43:22 +0000

You just finished another tutorial and have decided to try to build something of your own. You get an idea you’re excited about and want to jump in and start building right away! It might feel productive and energizing at first, until soon you start hitting blocks of things that maybe you didn’t think through well enough, or possibly at all. Is this even possible? Did i just spend two weeks on a feature I don’t actually need? Should I just start this over? --- Sound familiar?

When you are learning and building a side project, often one of the first mistakes made is not creating a plan and a process for building the project. One of the first things that may cause your project to go into a pile of abandoned GitHub repos, is if you get an idea and then you don’t limit the scope of that idea to an MVP (Minimum Viable Product). To get a clear idea of what you want to build you need to think through a few major things. I suggest using the questions below to write up a quick project spec.

MVP

Description: What does your product do? What is its main purpose/function?
Features: What are the bare minimum features you need to build it?
- Go through these features and ask again if they’re really necessary for your first iteration of something you can call finished.
Architecture: What will your front-end and backend architecture look like?
- What frameworks/tools do you want to use? Are you using these because you want to learn them? Because they are the only things you know? Because they are the best choices for the project at hand?
- Do you need a backend? Will you be persisting data? how? Will you have a user system? And is it necessary for an MVP? What will your data models look like? What API endpoints do you need? Are you integrating data from third party APIs?
Design: What views/routes will you have and a very simple design mock/wireframe of each so you have a visual idea of the structure of your application.

Workflow/Process:

Create broad milestone goals for your MVP features

Create or find a project skeleton with the frameworks/tooling you have chosen
Model your data/ create API’s / backend
Front-end that consumes your data
Design

Start breaking down goals into smaller problems, and begin to write up issues/tickets. You can group these on a kanban board such as on GitHub projects, a trello board etc.

Work as though someone else might join you at any time and will need to be walked through your codebase/process.

For me this meant using the idea of feature branches that corresponded to tickets which looked something like this: Create a feature branch, work on the feature or bug, push it up to GitHub and create a PR(pull request) to get my code reviewed before merging.

Sometimes seeing your code in a different format (i.e. not in your favorite code editor/IDE), but in a PR will be enough to make your brain catch something you might not have, or hold you to maintain a better standard of code quality and readability. If you are working alone, ask yourself would I submit this code for someone else to review/understand/merge?

Create a README file. Document how to get your environment set up in development. Even if no one else ends up working on your project, your future self will thank you. Document things in general.

If you have any feedback or comments about your own processes, or lessons learned, I would love to hear them!

DEV Community: Angelika Jarosz

React Hooks: Making Function Components Stateful

Using the useState Hook

So we created some local state, how do we use and update it in our code?

A Guide to Rest and Spread: Part 2

Dive into the spread operator

Using the spread operator with:

Spread Operator Use Cases:

Copying arrays

Combining arrays

Passing elements of an array as arguments to a function

Object Spread

A Guide to Rest and Spread: Part 1

What is the rest parameter and spread operator?

Dive into the Rest Parameter

How is the rest operator different than the arguments object?

Using the arguments object:

Using the rest operator

Tired of Guessing What 'this' Is Referring To?

What is this?

Rules for determining the value of this:

Why is this even important?

Learn Public Class Field Syntax by Refactoring a React Component

Original Component

Refactored Using Public Class Field Syntax

Lets see what changed!

But, we might not always want to use public class field syntax...

Writing a Django Data Migration with Real World Example

Creating a data migration

Example

Demystifying How JSX Renders for React Beginners

Lets look at an example

Using JSX:

Using React.createElement:

A Plan for Planning Your First Side Project

MVP

Workflow/Process:

How is the rest operator different than the `arguments` object?

Using the `arguments` object:

What is `this`?

Rules for determining the value of `this`:

Why is `this` even important?