DEV Community: Jen Kennedy

What is a digital garden?

Jen Kennedy — Thu, 16 Jul 2020 20:58:17 +0000

A digital garden is a new way of writing and creating content. I always wanted to create my blog and talk about everything I'm learning and showcase my progress as a developer. Flatiron requires all their students to write blogs and this was the perfect chance, I wrote quite a few blogs on dev.to and some even got some recognition! Post-graduation I started getting more anxiety out posting blogs and agonizing over their correctness and my general writing skills. Suddenly blogs became less fun and more of a way to market myself for my job search. I whole-heartedly agree with what Joel Hooks said:

Everybody is treating writing as a "content marketing strategy" and using it to "build a personal brand" which leads to the fundamentally flawed idea that everything you post has to be polished to perfection and ready to be consumed.

In order to escape this need for perfection and get back to writing and exploring for fun, enter the digital garden! I first learned about digital gardens from Joel Hooks and swyx. Digital gardens focus on the process of creating content and constantly updating and curating as you learn and grow. Like real gardens, each post is at a different stage. They're either finished (🌻), or in progress (🌱) and are being pruned and updated as I learn more. Even as I'm writing this post I feel a lot less pressure and it feels more like a conversation. I hope people are encouraged to start their own garden and release more thoughts and notes into the world. We hold ourselves to their high standards of perfection and I much rather be focusing on growing and learning. I want this garden to be a place where I can learn. Expect some mistakes, ramblings, and incomplete articles as you peruse the garden. If you'd like to help me learning by correcting a mistake or sharing some of your knowledge on a subject feel free to reach out to me on Twitter!

What is GraphQL?

Jen Kennedy — Sat, 21 Mar 2020 18:38:04 +0000

What is GraphQL

GraphQL is a query language for APIs invented and open-sourced by Facebook. It can be used as an alternative to REST and boasts a lot of advantages. GraphQL was originally made to keep up with the increase in mobile device usage because it helps limit the amount of data sent. Normally we use different endpoints to get data from a server and display it to the client and we are forced to accept whatever data the endpoint gives us. GraphQL uses declarative data fetching meaning the client can define exactly what they want from the API. GraphQL has a lot of moving pieces so my goal with this series of posts is to break them down into manageable chunks.

GraphQL vs REST

REST has been around for a while and most websites on the internet follow RESTful patterns. If you want something different from the traditional paths you'll have to create your own custom endpoint and continue to create and change these depending on the needs of the client. REST APIs have multiple different endpoints, such as your typical Create, Read, Update, and Delete(CRUD), whereas GraphQL only has one endpoint.

Benefits of GraphQL

A major benefit of GraphQL goes back to declarative data fetching. Because you can create a request for exactly what you need, the client isn't stuck with any unnecessary data nor is it lacking information. This can save you requests, as sometimes we need to find the id of a specific model and then ask the API again for all the information about the object with that particular id. In a RESTful API, this can take 2 different requests but with GraphQL we only need to send one query.

Another nice feature is that declarative data fetching defines what the response will look like as well. When you send a query to the GraphQL API the response will be in the same exact shape. This was a breath of fresh air for me because it meant I didn't have to spend time toggling between my code and the response to make sure I was accessing the data correctly.

GraphQL can be used to combine multiple APIs into one GraphQL endpoint. Sometimes clients need to talk to multiple different APIs and with GraphQL you can stitch these APIs together. GraphQL can be wrapped around existing REST APIs and secure it under one endpoint.

One of my favorite things about GraphQL is the playground that comes with it. The playground makes it easy to test out requests to the API and comes with a ton of information about your specific GraphQL project.

GraphQL has become extremely popular and is definitely picking up speed. I hope this article gives you a small insight into this cool technology. Be sure to look out for more articles in the series that will cover GraphQL Schema, Resolvers, and Apollo!

Additional Resources

How To GraphQl
Apollo Docs

Reading helped me become a better developer

Jen Kennedy — Sat, 14 Mar 2020 16:12:05 +0000

Since I was younger I've always loved reading. I was able to explore new places and learn so many new things without having to experience these things myself. I'm convinced my love of reading has helped me level up as a developer. Here are my three favorite sources to read from.

Documentation

I'd like to think we all read the documentation, but let's be honest sometimes Stack Overflow can be simpler and faster when we are looking for the answer. Over the years I've started reading more and more documentation and I feel like my grasp on certain topics has increased. I really enjoy reading the documentation, especially when I first start learning a new technology since they tend to have a great 'Getting Started' section that isn't too robust or complicated. In recent times there's been a big push to make good readable documentation. It's also a great place to make your first open source pull request. Documentation is great because it tends to get updated as the technology changes while other resources can be out of date. We can often save ourselves a lot of time and futures headaches by reading documentation or other resources instead of finding the first answer that solves the problem on Stack Overflow.

Newsletters

I seem to get most of my information through newsletters these days. I love them because I just sign up once and interesting resources come right to me. I don't have to put any work in and because these newsletters come weekly there's always a lot of recent, relevant information. We can't always be looking out for all the new technology emerging so newsletters help me stay up to date. Any time there's a new exciting technology I can at least hear the name and know it's purpose or advantages. This helps reduce my imposter syndrome because I don't feel as overwhelmed by all the new technology. Newsletters tend to be shorter and have a higher density of information.

Some of my favorite newsletters:
Cassidy Williams
Alex Kallaway
Veni Kunche
Do you have a favorite newsletter?

Articles

Last but definitely not least is articles. I personally love articles. While newsletters help sift through all the information out there, articles are what makes newsletters so useful. A lot of my learning is done through articles. Because everyone has a different experience learning I find articles helpful after struggling with the documentation. They can be especially helpful for us beginners since they tend to break things down one step further and really get to the why behind some of the concepts.

Before I started programming I had no idea how much reading was involved. I thought you were taught everything in classes and didn't have to do so much extra research. I enjoy reading on my commute because it gets me excited to start the day. As soon as I sit down at my computer I'm ready to work!

React Redux with hooks

Jen Kennedy — Sat, 07 Mar 2020 19:47:29 +0000

If you're not familiar with Redux or hooks feel free to check out my other articles explaining the topics and then come back! When I was first learning Redux I found all the moving parts and files incredibly hard to wrap my head around. Surprisingly, React hooks made the process of using Redux a lot easier for me. Hooks allow us to write smaller and sometimes easier to read functional components and with Redux hooks we can eliminate the tedious and confusing connect, mapStateToProps, and mapDispatchToProps.

Connecting your app to the Redux store still follows the same process with hooks as it does without hooks. You will need to create a store, which accepts a reducer, and pass that store to the Provider component that will wrap your app. The main difference with hooks comes in connecting specific components to the store to access state.

Before hooks if we wanted a component to have access to the store we needed to use the connect higher-order component.

import {connect} from 'react-redux'

export default connect()(Animes)

Now our Animes component has access to the store and if we wanted state or the ability to change the state we would have to mapStateToProps and mapDispatchToProps

import { increaseVote, decreaseVote } from '../actions';
import { connect } from 'react-redux';

const mapStateToProps = state => {
   return {
      animes: state.animes,
   };
};

const mapDispatchToProps = dispatch => {
   return {
      increaseVote: id => dispatch(increaseVote(id)),
      decreaseVote: id => dispatch(decreaseVote(id)),
   };
};

export default connect(mapStateToProps, mapDispatchToProps)(AnimeCard);

For me, it was pretty easy to mess up these lines or even forget to add them in the first place! Compare the above non-hooks version to the hooks version below.

import { useSelector, useDispatch } from 'react-redux';
import { INCREASE_VOTE as increaseVote } from '../actions';

const dispatch = useDispatch();
const animes = useSelector(state => state.animes);
<button onClick={() => dispatch(increaseVote)}>Increase Vote</button>

We can use the useSelector hook to access the state of the store, instead of mapStateToProps. useSelector takes the current state of the store as a parameter and returns a piece of state you want. A potential hurdle with useSelector is that it uses strict equality, different from the previous mapStateToProps, which checked if the fields changed. This can cause potential problems when trying to return an object from useSelector, so it's best practice to call useSelector once for each value of your state. Instead of using mapDispatchToProps we can use the useDispatch hook and individually dispatch any actions we need to the reducer. To get the overall picture of hooks versus non-hooks here is the same component written in both ways.

No-Hooks

import React from 'react';
import { increaseVote, decreaseVote } from '../actions';
import { connect } from 'react-redux';

const AnimeCard = ({ anime, increaseVote, decreaseVote, animesInStore }) => {
   return (
      <div className="card">
         <p>{Object.keys(animesInStore).length}</p>
         <h2>Name: {anime.name}</h2>
         <p>Votes: {anime.votes}</p>
         <img src={anime.image} alt={anime.name}></img>
         <br />
         <button
            onClick={() => {
               increaseVote(anime.id);
            }}
         >
            UpVote
         </button>
         <button
            onClick={() => {
               decreaseVote(anime.id);
            }}
         >
            DownVote
         </button>
      </div>
   );
};

const mapStateToProps = state => {
   return {
      animesInStore: state.animes,
   };
};

const mapDispatchToProps = dispatch => {
   return {
      increaseVote: id => dispatch(increaseVote(id)),
      decreaseVote: id => dispatch(decreaseVote(id)),
   };
};

export default connect(mapStateToProps, mapDispatchToProps)(AnimeCard);

With Hooks

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increaseVote, decreaseVote } from '../actions';

const AnimeCard = ({ anime }) => {
   const dispatch = useDispatch();
   const animesInStore = useSelector(state => state.animes);
   return (
      <div className="card">
         <p>{Object.keys(animesInStore).length}</p>
         <h2>Name: {anime.name}</h2>
         <p>Votes: {anime.votes}</p>
         <img src={anime.image} alt={anime.name}></img>
         <br />
         <button
            onClick={() => {
               dispatch(increaseVote(anime.id));
            }}
         >
            UpVote
         </button>
         <button
            onClick={() => {
               dispatch(decreaseVote(anime.id));
            }}
         >
            DownVote
         </button>
      </div>
   );
};

export default AnimeCard;

Not only did we save about 10 lines of code, personally I think it became a lot easier to read and write. And because we aren’t using the connect higher-order component anymore our render tree is much cleaner. I hope you enjoyed this blog post and are thinking about using Redux with hooks in one of your upcoming projects. Feel free to comment with any questions!

Favorite Resources:
React-Redux docs
Using Redux with React Hooks article

Beginner's Guide to React Redux

Jen Kennedy — Sun, 01 Mar 2020 00:09:53 +0000

Redux is a library used to contain the state of your application in one single location. Redux is language-agnostic and can be used with React, Vue, Angular, or even vanilla JS. I really love using Redux with React. As our React apps become bigger and more complicated the state can get unwieldy and hard to pass around to different components. This is where Redux can help us. It's generally recommended to start with Redux at the beginning of creating your project but it's not impossible to convert a project to using Redux.

We can keep all of the data we need in a store that is separate from our React components. One of the biggest benefits of React is how fast and performant it is, but unnecessary re-renders can slow your project down. One of React’s core features is that whenever a component’s state or props are updated the component will re-render. This tends to slow down our app when we have long component trees and complex state that needs to be passed to multiple children. The general flow of Redux is you send an action to the reducer which then updates the state. Only the components that rely on that state will then be re-rendered, which saves us on performance. The first step to setting up Redux is creating the store.

Redux Store

In order to save our state we will want to set up our store and hook it up to our app. Luckily Redux comes with the createStore() method when we install the package. The createStore method accepts a reducer. A reducer is a function that updates our state. The Provider is used to connect our app with the store we created. In the index.js file, we can create the store and connect it with our App component so that all our child components have access to the store.

import {createStore} from 'redux'
import {Provider} from 'react-redux'
import reducer from './reducers'

const store = createStore(reducer, initialState)

ReactDOM.render(
  <Provider store={store}>
    <App/>
  <Provider/>,
document.getElementById('root');

Reducers

Now that we've created our store, which takes a reducer, we'll have to make the reducer. Reducers take in actions and return a new state based on the type of action. Reducers rely on pure functions to return a new state and not mutate the current state.

const reducer = (state, action) => {
   switch (action.type) {
      case 'INCREASE_VOTE':
         return {
            animes: {
               ...state.animes,
               [action.payload.id]: {
                  ...state.animes[action.payload.id],
                  votes: state.animes[action.payload.id].votes + 1,
               },
            },
         };
      default:
         return state;
   }
};

The code above is an example of a reducer that is typically written with a switch statement. You'll notice that we use the ES6 spread operator, which is very important for creating pure functions. The INCREASE_VOTE case will return a new object with all of the animes in the previous state (...state.animes) except the particular id of the anime we send in the payload. All the information about that particular anime will stay the same (...state.animes[action.payload.id]), except we will increment the number of votes it has. The default case of the switch statement is very important because if we send an action that doesn't have a case in the switch statement we don't want to affect the original state.

Actions

The only way to change the state of the store is to dispatch an action. An action is just a plain JavaScript object. Actions normally contain a type key which describes the state change, and a payload of any data needed to change the state.

export const increaseVote = id => {
   return {
      type: 'INCREASE_VOTE',
      payload: { id },
   };
};

This action will be dispatched or sent to the reducer which will read the type on the object and do something based on that. It is standard to define your types in SNAKE_CASE with all capitals. Like the function's name suggest if you look at the reducer we wrote above this increaseVote function will increment the vote of a specific anime, based on the id, by 1.

Connect

In order to connect our components to the store, we need to use the connect function provided by react-redux. In our export statement, we can use the connect function to wrap the component we want to have access to the store.

import {connect} from 'react-redux'

export default connect()(Animes)

Now our component is connected to the store but we need to do one more thing in order to use the state that is held in our store. We need to map state to props.

const mapStateToProps = state => {
   return {
      animes: state.animes,
   };
};

export default connect(mapStateToProps)(Animes);

We pass mapStateToProps into the connect function and now we can access the state in the store as props(props.anime). Before adding Redux to our app if we wanted to update the state we had to call setState, but with Redux we will need to dispatch our actions to the reducer. And this is done through a function mapDispatchToProps. Similar to our mapStateToProps we will create another function that returns an object of all of our actions.

import { increaseVote, decreaseVote } from '../actions';

const mapDispatchToProps = dispatch => {
   return {
      increaseVote: id => dispatch(increaseVote(id)),
      decreaseVote: id => dispatch(decreaseVote(id)),
   };
};

export default connect(null, mapDispatchToProps)(AnimeCard);

You'll notice the connect now features a null because the first argument accepted by connect is always mapStateToProps, and in this component we only need mapDispatchToProps.

And with that our app should be connected to the Redux store and be able to read and update from the store. If you'd like to see more of the code I made a small demo app!

Favorite Resources:
React-Redux Docs
Lecture given by my Flatiron Coach Lucy

Introduction to React Hooks

Jen Kennedy — Sat, 22 Feb 2020 17:50:34 +0000

Thumbnail image credit

React hooks were added to React in February 2019. One of their main features is they give us a way to use state without having to define a class component. Our functional components can now have features that were specific to class components like state and lifecycles. Without large class components in our code, it is easier and cleaner to read. Using hooks helps simplify state management and component layouts. Hooks are completely optional and backward-compatible. This means that all our working knowledge of React isn’t obsolete, but can be grown and updated. Hooks were proposed to solve some of React’s problems like sharing state, components becoming unwieldy as they grew more complex, and confusing class syntax.

useState Hook

const Theme = () => {
  const [theme, setTheme] = React.useState('light')
  const toDark = () => setTheme('dark')
  const toLight = () => setTheme('light')
  return (
      <div className={theme}>
        {theme === "light" 
          ? <button onClick={toDark}>🔦</button>
          : <button onClick={toLight}>💡</button>}
      </div>
  )
}

The useState hook allows us to add state to a functional component, and it's one of the first hooks I suggest using. The useState hook can be initialized with a starting value and it returns two values. The first is equivalent to the initial state you're used to setting up with this.state. The second value is a function that can be used to update the state, similar to this.setState. We can assign these two values to whatever variable names we want with array destructuring.

const [theme, setTheme] = React.useState('light')

Now we have our state set in the variable theme and we can update our state with the setTheme function. The useState hook can be used multiple times in the same component and should be used for every state value you want to keep track of. An important aspect of the useState hook is its ability to preserve values between re-renders. Normally any values within a function will be re-initialized when the function is called. But when a functional component with the useState hook re-renders, React knows that the useState hook has already been invoked and it will remember the previous value of the state.

useEffect Hook

The useEffect is important for controlling the side effects of your component. A side effect is anything that interacts with the outside world or outside its scope. This includes fetching data, changing the DOM, and making network requests. These effects were normally done with class components and lifecycle methods before hooks. useEffect runs every time a component renders, because of this if you re-render within useEffect you will cause an infinite loop. In order to prevent this, useEffect takes an optional second parameter.

React.useEffect(() => {
  // will be invoked on the initial render and every subsequent re-render  
})

React.useEffect(() => {
  // will be invoked on the initial render and when id changes
}, [id])

React.useEffect(() => {
  // will be invoked ONLY on the initial render 
}, [])

Through the power of the useEffect and useState hooks we can write functional components with all the power that is normally reserved for class components.

useEffect(() => {
      fetch(
         `https://bookclub-builder-server.herokuapp.com/api/v1/bookclubs/${match.params.id}`,
      )
         .then(response => response.json())
         .then(data => {
            setBookclubUsers(data);
            dispatch(currentPoll(data.poll[0]));
         })
         .finally(() => {
            setFetched(true);
         });
   }, [match.params.id]);

Above is an example of a useEffect hook I used in my final project at Flatiron. The hooks fetches a specific bookclub from my backend. You'll notice that the dependency array includes match.params.id which means that every time a new bookclub is clicked on the useEffect hook will run.

I hope you've enjoyed this beginner introduction to hooks! There's still a lot of cool things out there to learn and I hope this gets you on the right path.

Favorite Resources:
React Docs
React Hooks Tutorial for Beginners by Valentino Gagliardi
React Hooks Video by Tyler McGinnis

New Additions to JavaScript

Jen Kennedy — Fri, 03 Jan 2020 22:38:26 +0000

The language of JavaScript is constantly being updated. Any new ideas or features that want to be added to the language are brought to the TC39 committee. TC39 is responsible for creating, approving, or denying proposals, and it is made up of delegates. ECMA which oversees TC39 standardizes the language specifications.

When someone submits a proposal it starts at stage 0. Once a proposal reaches stage 4 it is ready to be included in the official specifications.

Array.prototype.flat

This method is very useful and allows you to flatten a nested array. If the array is deeper just calling flat() once will not fully flatten the array. You can pass flat() a number to tell it how deep to flatten

const array = [1,2,[3,4]];
array.flat() // [1,2,3,4]; =)

const nestedArray = [1,2,[[3,4],5, [6,[7,8]]]];
nestedArray.flat(Infinity) // [1,2,3,4,5,6,7,8]; typeof Infinity is number

Nullish Coalescing

Often we want to provide a default value when accessing properties on an object. We can't depend on the value always being there so to combat this we used the or operator.

const myObj = {
  favoriteAnimal: '',
  age: 0,
  nullValue: null
}

const undefinedValue = myObj.favoriteFood || 'Pizza'; // 'Pizza'
const nullValue = myObj.nullValue || 'some default'; // 'some default'

This works well for null and undefined values, we can assign them to default values with a little extra work. Unfortunately JavaScript falsy values can produce some unexpected results.

const age = myObj.age || 111; // 111 because 0 is falsy
const favoriteAnimal = myObj.favoriteAnimal || 'Seagull' // 'Seagull' because '' is also a falsy value

This is where nullish coalescing comes in. Written as ?? it performs a similar job to || but with one major difference. If the value on the left-hand side of the ?? operator is null or undefined only then will the right-hand side be used!

//works in the same way with null and undefined values
const undefinedValue = myObj.favoriteFood ?? 'Pizza'; // 'Pizza'
const nullValue = myObj.nullValue ?? 'some default'; // 'some default'

const age = myObj.age ?? 111; // 0!
const favoriteAnimal = myObj.favoriteAnimal ?? 'Seagull' // ''
//because the values on the left-hand side were not null or undefined the right-hand side is ignored!

Optional Chaining

When working with APIs or deeply nested objects we often have to check multiple levels of the object before we can access the property we are looking for. This process is tedious and can quickly get repetitive.

const myObj = {
  favoriteThings: {
   anime: ["Dragon Ball"]
  }
}

const anime = myObj.favoriteThing.anime //This works if favoriteThings exists but if it is undefined we will get an error
const anime = myObj.favoriteThing ? myObj.favoriteThing.anime : undefined //works but very tedious

Enter optional chaining which is written as ?.

const anime = myObj.favoriteThings?.anime

Optional chaining will not throw an error and will instead evaluate the expression to undefined! Optional chaining gets even more powerful when used with nullish coalescing.

const bad = myObj.badThings?.insects ?? 'Mosquitos' //Because myObj.badThings evaluates to undefined nullish coalescing will return the right-hand side 'Mosquitos'

Optional chaining can be used multiple times in a single expression for deeply nested objects or potentially null objects. It is also not confined to just objects, you can use optional chaining on arrays and function calls!

To stay up to date with other potential changes coming to JavaScript, I encourage you to follow TC39 on github. There you can find meeting notes and any active or inactive proposals.

What is Testing?

Jen Kennedy — Fri, 06 Dec 2019 21:12:15 +0000

Why Do We Test?

In its simplest definition, a software test is code that returns an error when the actual value does not equal the expected value. Testing your code helps increase your workflow. If you don't know what needs to be worked on or fixed it's easy to follow Test Drive Development to guide you. Testing gives us confidence. If we write good tests, we can eliminate future bugs before they are ever pushed to production. This gives us confidence that we are writing good code that won't break anything and keeps our users happy.

const actual = true
const expected = false
if (actual !== expected) {
  throw new Error(`${actual} is not ${expected}`)
}

Different Type of Test

There are four main types of testing, they differ in the cost to run, the speed at which they execute, and how much confidence they give you in your code. Every level of testing has its trade-offs.

Static Tests

Static Testing is the easiest level of testing that gives you the best return on investment. If you are looking to begin your testing journey this is where you should start. They're fast and easy to run, but don't give you a lot of confidence in your code since they don't test logic. Static Testing is used for finding typos and type errors in your code. While this sounds simple it can save you a lot of time and headaches. Popular tools include ESLint and TypeScript.

Unit Tests

Unit Tests are used to test just a single part of your program. You want to verify the behavior of a function independently of the other pieces of your code. Unit Tests are cheap and easy to set up as well as fast to run. They are vital to see if each piece of your code is working independently.

Integration Tests

Unit Tests can cover a lot of ground but they can still pass with broken code. Two tests might pass in isolation but fail when used together. This is where integration tests can help us cover more code and behavior. Integration Tests make sure everything is working together correctly. They balance the trade-offs between speed and confidence. Unit Tests and Integration Tests combined will give you a lot of confidence that your code is working correctly and any code you refactor or change will be reflected in your tests.

End to End Tests

End to End (E2E) tests help you test your whole application, from login and sign up to endpoint. These tests should reflect what you think your user will do and the flow of the page. E2E testing helps you determine if everything connects and works well with each other, such as the database, network, and other parts of your code. E2E touches all parts of your code, and because of this, they are slow and expensive to write. But they give you the most confidence that your code is working as expected.

Testing is an important part of software development and now you're on your way. The first step of learning how to write tests is learning what are the different tests. I hope you'll continue to read along on my testing journey!

Beginner's Guide to React

Jen Kennedy — Tue, 26 Nov 2019 00:36:07 +0000

Beginner’s Guide to React

React is a JavaScript library, created by Facebook and open-sourced in 2013. React was created to help build simple and reusable interfaces. The main idea was to divide the UI into small individual components. These individual and reusable components are the core feature of React. The important pieces to understand about React are Components, JSX, State, and Props.

Components

React interfaces are made up of small components that all have just one purpose. These components are translated into HTML and then added onto the DOM to be rendered. React components come in two different styles, class-based components, and functional components.

class Welcome extends React.Component {
  render() {
    return <h1>Hello</h1>
  }
}

The main difference between the two is Class components can hold state (note this was changed with the addition of React Hooks, check out my other post to learn about hooks). Although we will talk about state later, think of it as a parameter. State allows your components to be dynamic and flexible. Functional components cannot hold their own state. What Functional components do well is their simpleness and readability.

function Welcome() {
  return <h1>Hello</h1>
}

JSX

JSX is an extension of JavaScript that is used to tell React what the UI will look like. Although it looks like HTML, JSX allows us to create what the UI and logic should look like in one place. By using JSX we can embed JavaScript logic right into our UI. JSX is similar to Ruby's ERB, we can use them to create a layout with variable flexibility.

const name = 'Jen';
const element = <h1>My name is {name}</h1>;

State

State is an object that is tied to a Class component. It can be initialized or changed through user input or APIs. State is held by a parent component and can be passed to its children through props. This Unidirectional Flow is a key feature of React. A component's state must be stored high enough in the component hierarchy to pass it to all its children, without having to pass it through unnecessary components. State can only be passed down and not laterally to sibling components. Whenever a components' state is altered, the component, as well as all its children, will update and reflect this new state.

class FetchData extends React.Component {
   constructor(props) {
      super(props);
      this.state = {
         isLoading: false,
      };
   }
}

Props

Props are objects given to components by their parents. Props are passed to create dynamic components. We won't always want to render static data, and that's where props come in. Props are passed to different components because the main goal of React is to create small pure components. Sure we could create a large class component with state and have it render every piece of the UI, but this would be hard to read and hard to reuse. If we ever wanted to render just a small piece on a different page, we would need to render the whole large component again!

const KanjiData = props => {
   return (
      <div>
         <p>Character: {props.character}</p>
         <p>Meaning: {props.meaning}</p>
         <p>Kunyomi Reading: {props.kunyomi}</p>
         <p>Onyomi Reading: {props.onyomi}</p>
      </div>
   );
};

Remember a library is just a tool to help make developers' lives easier. If you find yourself wanting to learn more React I highly encourage you to take a look at the React Docs, they are my favorite resource or look through the small Kanji App I made. Everything you do in React can be done with vanilla JavaScript. React and other JavaScript libraries like Angular, Vue, and Ember are be no means required tools.

How/Why You Should Start Blogging

Jen Kennedy — Mon, 11 Nov 2019 17:02:04 +0000

Cover Photo by Nick Morrison on Unsplash

So you’re looking to write your first blog post? Blogging is great practice for both new and experienced developers. I encourage everyone to at least try blogging as it can be a big benefit both you and your potential readers. You don’t need to be an expert to release a blog post. Writing about a topic and researching it can help you teach yourself. So find a journal, some fun topics, and get writing!

Topics

A lot of people want to blog but can’t find a good topic or think they need to write about something new and novel. My best advice is to keep a journal or notes app with you at all times and write down any potential topics that come across your mind. Even mindlessly scrolling through Twitter can give you your next blog post.

Finding topics at the beginning can be slow but soon you’ll acquire topics quicker than you can write. For your first post I would recommend just writing about what you’re currently doing. Write about an app you're building, interview prep, or your journey so far.

Your experience and words are valuable, and your blog post could be the motivation a CodeNewbie needs to continue pushing or the puzzle piece that finally helps that pesky concept make sense. Because you’re using your own experience it can be easier to write than a jargony technical post. The more you look for topics the easier they’ll be to find.

First Draft and Editing

No one starts off as a great writer. Like programming it’s important to practice every day for progress and growth. If your writing process is anything like mine your first draft will be terrible, but that’s okay! Like programming we can refactor and clean up concepts.

My first drafts tend to be a mess of ideas all jumbled up in disorganized paragraphs with random side thoughts. But it’s important to get words on the page. It's important to reread your blog post to catch any typos or grammatical mistakes. I definitely suggest reading your work out loud to help you find any confusing or long winded sentences.

There’s also great technology out there like Grammarly or Hemingway App to help revise sentences and increase word choice. No matter what your writing process is, make sure the end product is easily readable and engaging. I think if you’re passionate about the topic that feeling with be expressed through your blog post.

In this day and age it can be hard to keep your readers’ attention, so make sure your writing is broken up into paragraphs, and try to include pictures, gifs, or code snippets so that a reader doesn’t load your page and see a large block of text. No one’s first blog post is going to be perfect or become an instant success, we all have to start somewhere.

Publish

So you’ve finally written your first blog post and you’re ready to release it to the public, but where?

You’re probably reading this blog on Dev.to! I decided to post by first blog post here because of the supportive and engaging community. Writing and putting your work out there can be scary, so having support from other users has really been motivating for me. Dev.to is also open source! Blogging on their platform is a great way to support open source and maybe even be brave enough to start contributing.

FreeCodeCamp is a platform most self taught developers know as a great place to learn and develop your programming skills for free. FreeCodeCamp was one of the first coding resources I used and I think a lot of my JavaScript experience can be correlated to FCC. They recently launched their own FreeCodeCamp News to encourage blog posts from the community.

Another great place to publish can even be your very own blog. Creating your own blog can turn into a blog post itself. Talking through how you made it, what technology you chose, and all sorts of other decisions you made along the way. Your blog is a great representation of you and can be a place to truly showcase your personality and skills.

If you want to start writing right away and not get bogged down creating and hosting your own blog, it might be best to start with a WordPress. WordPress is a great place to get up and running quickly and it can also be upgraded and customized when you find yourself with more time.

After you’ve posted your blog feel free to post on other platforms to help get more readers and feedback. While you’re there grab some inspiration for your next blog post from all the great articles on the site.

As your publish your blog post make sure to take a second and remember this moment. This is a personal victory and can be a big step in your journey and help you grow. The most important thing to remember is to keep writing for yourself and have fun with it!