DEV Community: austinckohler

useState hook with Functional Components

austinckohler — Thu, 16 Jul 2020 02:48:20 +0000

What is useState?

Potentially the most important React hook. It is important because it allows you to have state variables in functional components. According to the official documentation on React.org,

Hooks are a new addition in React 16.8. They let you use state and other React features without writing a class.

Prior to the addition of hooks we would need to write a class to store state and make a dynamic component.

How do you implement its functionality?

First, we must import the hook from react like so:

Before diving in it is important to note:

Hooks can only be used inside functional components
Hooks must execute in exact order in every component render. For example,

if (true) { useState() } useState()

will give you and error:

React hook "useState" is called conditionally

In other words they can't be placed inside functions, conditionals, loops, etc. and must be at the top level.

How do you use it?

Import useState.
Initialize useState. The first argument in useState(initialState) is default state. For example, I want a user to click a grey button and the background color of an icon turn pink. default state is false. In other words, the user has not clicked the button; therefore, its initial state is false, the button hasn't been clicked and the background of the icon is grey.

import React, { useState } from 'react';

function iconColor() {
  const [color, setColor] = useState(false);

}

When the function, useState(false) is invoked, it will return an array with two values. Our first value is state and our second value is a function that allows us to update the current state.

Update state. Using the second value, again a function, we will update state.

function changeColor() {
const [color, setColor] = useState(false);

  const iconGrey = () => setColor(false);
  const iconPink = () => setColor(true);

  return (
    <>
      <div className={color ? "icon-pink" : "icon-grey"} />
      <button onClick={iconPink}>On</button>
      <button onClick={iconGrey}>Off</button>
    </>
  );
}

for this example, "icon-pink" and "icon-grey" are icons that have preset colors.

Conclusion

This is the absolute basic use case of useState. If you would like to learn more about different use cases I would recommend checking out React.org's official documentation.

Beginners guide to writing a compelling README.md

austinckohler — Wed, 15 Jul 2020 15:17:43 +0000

What is a README.md?

README.md is the first thing someone reviewing your project will see, so it really needs to captivate the viewer.

What's up with the .md? It means markdown. It is a markup language for text.

Your README should explain how your project could be used and how to use it. Think of it as the front page of the project and a place to get started.

Do I need a README?

short answer, YES. Make a short README on your first commit.

Why?

Good question. There are several reasons why you NEED a README:

For reference during your project to remind yourself of the goals you set.
You know your project is great, so make it easy to understand why it is so great. No one likes trying to understand a project by reading poor documentation.
To stand out and entice people to learn more about your amazing project.

What should it include?

At a minimum, your README should include:

A brief description of your project, what it does, and how to use it
A demo - screen recorded and uploaded to YouTube
Screenshots of your project
Technologies used and the requirements
Acknowledgements
The developer and contact information

Resources:

Conclusion

When job searching, employers will review your top projects and having a well written README.md could help land that dream job. Also spending an extra 10-20 minutes writing up a kickass README.md could make a huge impact on how many people take the time to look at your project. Many developers will spend a lot of time adjusting the background image or fixing the letter spacing but won't make a README.md for their project. This can discourage potential employers and connections from looking further into your work. Don't be that person. Make the README.

Hello World: What I wish I knew at the beginning of my programming journey.

austinckohler — Wed, 15 Jul 2020 04:10:26 +0000

Hello World:

Where do the bootcampers get a drink after a full day of coding? You guessed it, foo bar!

On a more serious note, I began my programming journey a measly four months ago. Other than learning the very basics about programming on sites like codecademy and Khan Academy I knew little to nothing about the culture.

I attended a programming bootcamp and learned a lot throughout the process but here are a few things I wish I knew when I started the bootcamp:

You are not limited to the resources the bootcamp has to offer. This seems like a given, right? It might be, and I'm sure my instructors probably told us this; however, I probably could've heard that a few more times. It took me twelve weeks to realize some of the best introductions to a new technology are simply the official documentation for the technology, scouring GitHub for any juicy documentation, or just going to the handy dandy youtube.
Star sindresorhus/awesome on GitHub. Don't forget to thank him for all the effort he put into this repository. Before I start learning any new technology I go the above mentioned repository and drink all the information from the firehose. There is not much more to say here, but this was something I wish I learned about before I started programming.
Take breaks, and take them often. When I first started programming, I would catch myself typing away till two in the morning. I would get stuck with error message after error message searching Stack Overflow for answers I'd never find. Eventually I would tire out, not solving the issue at hand, wake up in the morning look at the code for 5 minutes or less and solve the issue. This happened countless times, and admittedly still does, but I am starting to understand the importance of taking breaks.
Attend Meetups. Dive into the community, learn to embrace the uncomfortable, and make friends while you do it. When you first start programming there is a lot to take in and it may be hard to jump into meetups not sure of what to say or what is going on. I wish I would've known that it's perfectly fine to show up to a meeting, listen, and not be sure of what is going on. Eventually you'll be participating and making connections that may lead to future job opportunities.
Make an effort to help others to solidify your knowledge. Moving information from short term memory to long term memory can be achieved by teaching a recently acquired skill to someone else after learning it. I wish I would've known how effective this can be when starting to program. Talking your code out like you eventually will in an interview will give anyone a leg up.

During my process of becoming a software engineer there are many other things I wish I would've known but these 5 tips would have had the greatest impact on my learning experience.