Back to Basics (React)

6 min readDec 22, 2020

If there is anything Ive learned from taking a month off from coding in React after graduating from Flatiron(Software Engineering Program), is that it’s a month too long. Writing and developing software is one of those things in life that is a constant pursuit. In this blog post I thought it might be helpful just to get back to basics, to get down into what makes React..well React. From things like State, Props, Classes, Hooks, Life Cycle Methods…etc. All these concepts are vital to understanding the core principle of how they differ from other software languages and what makes React so unique. With that being said, let’s get started by making a simple counter app that will increment, decrement and reset; this will help drive down some fundamental understandings in React.

Lets Get Building

Now that we know are intentions are clear, let’s go ahead and get building. First step is to create a new react project in our Terminal. Once navigated over to your Terminal you can simply run …

npx create-react-app my-app //my-app is interchangeable

This will go ahead and create our new React app. Once created, in order to access your app you can run …

cd my-app //change directory into React app
npm start //start your React app

That’s it, this will get your new app started, you will just need to navigate over to your favorite IDE to start counting!

Simple Counter

Now that we have out app created, we can go ahead and start fleshing out our app. To start, let’s clean up our App.js, to make this easy I am going to go ahead and just delete everything in this file and start from scratch. Once all the code is deleted, let’s start putting in what we will need. First code we will implement will be to import React library in order to use React. In this example I am also going to use a React class to hold build out our counter, but you can definitely do this in other ways.

import React from 'react'class App extends React.Component {//state
//functionsrender() {
  return(
//onClick
  )
 } 
}export default App

Above is our basically template, it outlines our class component, also illustrates what code we will put where. We will hit on these three areas that are commented out above while building this out.

Ever the Statesman

Oh State, how I loathe to love you. When I was first introduce to React from JavaScript I was mind blown! The idea of being able to set state in different parts of code was something out of The Matrix. Little did I know then the ever passing of State I was in store for, luckily here we will only be dealing with one component; but I digress, let’s go ahead and get into State. Setting State is quite simple, understanding State can get weird, at least it was for me at the start. A bit about State from GeeksforGeeks.org

"The state is an instance of React Component Class can be defined as an object of a set of observable  properties that control the behavior of the component. In other words,  the State of a component is an object that holds some information that  may change over the lifetime of the component....."

This I feel is the best example of State I have found so far, I am looking at you official React Documentation. To be fair, it could simply be that their definition goes over my head. Then again this is the value of the internet, being able to pull from a multitude of resources that is ever changing and always refining is encouraging to say the least. Now back to the easy part, setting our State. For a class component it’s quite simple, in this case we will use the key of counter to initiate our state at 0, this way when we write out some code we know where our “State” always begins.

import React from 'react'class App extends React.Component {//state
state = {
counter:0
}//functionsrender() {
  return(
//onClick
  )
 } 
}export default App

Functions

Every time I think of functions in any programming languages, I am brought back to a simpler time of Schoolhouse Rocks. “Conjunction junction whats your function…’’ these words have never rang more true when creating functions in React. I like to think it as the “keep it simple stupid” principle. This will ensure that our functions only ever do one thing at its core, this allows for better integration and will just keep your fellow developers happy should they ever have to read through your code. Now another tried and true concept in React is “this”. We will use “this” in the context of referring to our function, in order to place our state from the counter, that will ultimately allow us increment, decrement or reset. There is a great article I found on “this” you can check out here to get some real in depth analysis on the concept. Another key take away from the “keep it simple stupid” analogy is our naming. Naming functions in a clear and consist way will go along way with your peers, but will also improve the codes overall readability.

Lets get these functions built! First we will build our increment function, that will do just that, increment our count by one each time we click on it. Should come out to something like this …

... 
countIncrement = () => {
   this.setState({
    counter: this.state.counter + 1
  });
}
...

Let’s break it down real quick. Using an arrow function, we are using “this.setState” in order to call on this function. In the next line we are simply setting our counter with “this.state.counter” and then using “+ 1” to increment that counter by one each time we call on this method. The great part is once we understand “setState” and “this” we can really start taking advantage of these concepts to build some pretty cool stuff. Now with this understand let’s go ahead and create our next two methods, the decrement and the reset.

...
countDecrement = () => {
 this.setState({ //call on function
  counter: this.state.counter - 1 //decrement by 1
 });
}countReset = () => {
 this.setState({ //call on function
  counter: 0 //reset counter to 0
 });
}
...

Now that we have all our function, let’s go ahead and look at using these methods on buttons.

onClick

onClick I feel is the easiest to understand out of all we have gone thru so far, simply because it does just what it says; it allows “onClick” to call the function that we created above. In order to use “onClick” we simply call on it inside a button tag, and then use “this” to refer to the specific function in our class. We will also add a “counter” in a h1 tag in order to see where the current count is. In the end our code should end up something like this…

render() {
  return (
    <div>
       <h1>{this.state.counter}</h1>
        <button onClick={this.countIncrement}>increment</button>
        <button onClick={this.countDecrement}>decrement</button>
        <button onClick={this.countReset}>reset</button>
   </div>
  )
 };
}

Thats it! We have created an easy counter that allows us to increment, decrement and reset time! Our final code..

import React from 'react'class App extends React.Component {state = {
counter: 0
}countIncrement = () => {
 this.setState({
  counter: this.state.counter + 1
 });
}countDecrement = () => {
 this.setState({
  counter: this.state.counter - 1
 });
}countReset = () => {
 this.setState({
  counter: 0
 });
}
render() {
  return (
    <div>
        <h1>{this.state.counter}</h1> //current state of counter
        <button onClick={this.countIncrement}>Increment</button>
        <button onClick={this.countDecrement}>Decrement</button>
        <button onClick={this.countReset}>Reset</button>
    </div>
   )
  };
 }export default App

In conclusion this is just a simple counter, we could obviously do more with this like add life cycle methods to add a counter that continuously counts by 1 when the page loads, and then unmounts to prevent it to keep re-initializing.

....
interval = undefined componentDidMount(){
 this.interval = setInterval(this.countIncrement, 1000)
}	
componentWillUnmount(){
 clearInterval(this.interval)
}
...

In future blogs I hope to expand upon my journey with building and developing in React. Below I listed some resources to stay up to speed on all things React.