DEV Community: Austin Turner

State... The Thing Everyone Hates

Austin Turner — Mon, 16 Aug 2021 02:00:53 +0000

What is state?

State at its core is a React Hook. A React Hook is a special function that lets you have access to or "hook into" certain React features. The useState React Hook lets you add a state to a functional component. This allows you to set certain data to a variable that can be used in the component that you added state too, and its children as well passed down via props.

How to use State

The first thing you need to do to get state up and running is to import the useState React Hook. That would look like so...

import React, { useState } from 'react'
// or
import { useState } from 'react'

Next, you need to declare your state variable and setter function in an array format with a const and set that equal to the useState Hook. In my example I will be using state to determine if the app is currently in dark mode or light mode.

function App() {
const [darkMode, setDarkMode] = useState(false)

return...
}

Inside the parentheses of the useState Hook is what the default value of the state you just created. In this example I only need to check if dark mode is on (true) or off (false). Currently it is off due to the default value I gave to the state. Next thing to do is to wright a new function that will change the current value of the state. (This function will be called when the user clicks a button to turn dark mode on.)

function App() {
const [darkMode, setDarkMode] = useState(false)

function handleDarkMode() {
  setDarkMode(!darkMode)
}

return(
 <div>
   <button onClick={handleDarkMode}> Dark Mode </button>
 </div>
)
}

The Function handleDarkMode calls our setter function in state setDarkMode. In the parentheses of the setter function is what you want the new value of state to be. In the example above, I set the new value of state to be !darkMode or "not" darkMode which will change the value to true instead of false. With this basic set up I can tell the app to change the overall style of the app if the value of darkMode is true or false.

Wrapping it all up

This is just the beginning and something very basic that useState can be used for. Learning state was not an easy or quick thing to do. I am still working on fully understanding everything that the useState React Hook can be used for! Some things that helped me when learning this was that...

The variable that you declare for your state is just like declaring any other normal const variable. It is a variable that has data stored in it.
The setter function is what you use when you want to change the data that is being stored in your variable.
Lastly, and probably the most tricky, is to always think about what component you want to declare your state in. If the component you are currently in has no use for the data you need to store in state, you might need to go up or down your app's hierarchy to see what component is best suited to hold that state.

Keep those simple things in mind and you will be mastering state in no time!

Fresh eyes on stylesheets!

Austin Turner — Sun, 20 Jun 2021 19:49:38 +0000

Rundown

Over the last two weeks I've been working on a project for my Software Engineering class I am taking through FlatIron School. The task was to build a single page web application from scratch using everything we had learned pior, plus researching new things we didn't have much understanding on through google. One of the biggest things I was most curious about was styling a page with CSS. Then my instructor told our class about stylesheets and I was instantly intrigued!

CSS Made Simple!

My instructor gave us three websites to look into if we were curious about diving into styling our web app but didn't want to take the time to learn everything there is about basic CSS. The three that she mentioned where

Semantic UI
Bootstrap
Materialize

After looking at each of their sites I decided to go with Materialize because I liked more of their modern designs that they offered.

How I Used Materialize!

The biggest thing that I was curious about was how to get certain items in your html to be displayed on certain parts of the page! Materialize (and other stylesheets) use certain class names to style the page based on the tag given. For displaying content in a grid, Materialize uses a container class on a section tag and a row class on a div tag. Then, to separate the container, you want you use a col class on a child div tag and state how many spaces you want the row to be. There are 3 different size options you can use depending on how big the screen size is.

s for small screens
m for medium screens
l for large screens

All 3 of the sizes can be used in a single tag so your web page can be adaptable depending on the users screen size. After you choose which or how many you want to include, you put a number after the s, m, or l to state how much space in that row of the container you want it to take up. There are a total of 12 spaces that take up an entire screen when using this method, so in the example below, my section for the tabs take up the entire top part of the screen. Then each of the tabs splits those 12 spaces equally by each of them being 6 spaces long.

<section class="container section">
            <div class="row">
                <div class="col l12">
                    <ul class="tabs">
                        <li class="tab col s6">
                            <a href="#database" class="green-text text-darken-3">Database</a>
                        </li>
                        <li class="tab col s6">
                            <a href="#generator" class="green-text text-darken-3">Generator</a>
                        </li>
                    </ul>
                </div>
            </div>
        </section>

Conclusion

Materialize and other stylesheets like Bootstrap offer far more than just displaying html in certain places on the screen. The tabs in the example above are also something the Materialize provides in there stylesheet. But I think that taking this approach was a life saver for me to be able to make my project look a little more cleaner without having to do hours on hours of researching CSS. It's almost as simple as plug and play and very intuitive when you get the hang of it. I would highly recommend any new programmers who don't have a lot of time to spare but are wanting to add a little flair to their programs to look into Materialize or other stylesheets.