Working with React:

Intro to Components, State and Props

What is React?

To put it simply, React is a widely popular front-end framework built entirely out of JavaScript, using a combination of dependencies. When beginning to use React it might seem different to vanilla Javascript, as React provides a specific way to organise and structure the design of a web application. It uses JSX, a syntax extension of Javascript, where we can write code very similar to HTML, in which snippets of JSX get separated into components. These components allow us to separate code and functionality logically and easily to read, that when combined it can form a fully working web application. Let’s delve deeper into components and how they work within React.

Components in action:

What does a component look like in React? Essentially they can be written as a Javascript function or class. It is the heart of React and is a piece of the UI. Every app application has at least one component which we refer to as the root component that has and contains other child components, essentially making the application a ‘tree’ of components. Let’s imagine we want to build an application like Twitter. We can split this page into components, like Navbar, Profile, Trends, and Feed. Now let’s look at these components in a tree:

We have App as our root, with the four children components. Now if you think of a feed, a feed will have many tweets, and in turn, that tweet will have likes, comments, etc. Download React DevTool google extension and go on Twitter and investigate to see how many components Twitter truly has.

A component is typically implemented as a Javascript class or function that has some state and render method like so:

Also, we should call ‘super()’ in the constructor since we are inheriting from another class via the extends keyword.

The state here is the data (currently empty) that we want to display when the component is rendered. Now if you think about how we can create multiple components that render different things, you can start to get a sense of how we control what’s being rendered at any given time and how a user can interact with the page.

The component that I have shown is a class component, which I call Container Components. They are concerned with how things work in terms of functionality and provide the data and behavior to presentational or other container components.

Presentational Components Are concerned with how things look and rarely have any state and receive data and callbacks exclusively via props. They are written as functional components. Like so:

A functional component returns JSX, instead of using a render method. It doesn’t extend React.Component, so it hasn’t inherited what is needed to store state. Functional components can still receive props, but notice above that they have to explicitly be written as the argument for the function. More on props later. First, let’s look at how data is stored in the state.

What is State?:

React ‘State’ can be one of the most difficult concepts to learn. Not just what data we want to store but what it is and used for. A components state is a Javascript object that holds information that can change over time. But it only changes by calling it explicitly using this.setState from within a component. Every time it is called upon in the component, React will re-render and the current state will now be whatever this.setState returned value is. Remember, the state is for values that are expected to change during the components life.

Let’s think about Twitter for a moment. You’ve just baked a banana bread during self-isolation, and you want to share the news with the world. You go and tweet about it and you start to see your tweet getting likes, and a number representing how many you’ve gotten. Your tweet is essentially a component, that is rendering your tweet content. That tweet will have a state that stores how many likes you’ve received. Let’s see how that would look like in React:

To understand why we are setting initial state in the constructor the most important thing to know is that the constructor method runs first when a component is made and render runs later.

Of course, when you send your tweet out, it’s not going to have any likes assigned to it so it’s the initial state will be 0. But since we know that there’s a button that you can click to like a tweet, the state will change and increment the value of likes. Our increment method makes use of the ‘setState’ method, which is what we use to alter the state. When the component is rendered it the JSX within dictates how exactly that tweet is rendered. In my example, it’s just a button. When that button has been clicked the function ‘incrementLikeCount’ is invoked, thereby updating the state of the TweetComponent using this.setState. Our new state of likes is now 1. If it were to be clicked again the component would re-render, see that the state of like is 1 and now set it to 2 and so on.

Props:

What are props? Props allow us to pass values into our components. These values can be anything: strings, objects (including arrays and functions), and so on. They allow us to make our components more dynamic, and a lot more reusable. For example:

Remember our functional TweetComponent earlier? All it had was a button. We should know now that our TweetComponent should be concerned with how our banana bread tweet looks. Previously I showed you how to increment our twitter likes in a Class Component with the state. But what if we wanted out TweetComponent to only be responsible for incrementing the likes? We can use a prop to pass down the ‘incrementLikeCount’ function. In order to do so, we must change our TwitterComponent to now be a parent to TweetComponent:

Now our TwitterComponent holds the state of the likes and the functionality to set a new state. For our TweetComponent to change the state of likes, we must pass down the function that increments the likes. We have to import the component from the file directory to be able to render it. Now, all we have to do is name the prop and assign it to the class function in JSX curly braces.

<TweetComponent incrementLikeCount={this.incrementLikeCount}/>

NOTE: I’m not invoking the function when I pass it down as I want to only change the state when the button is clicked.

Now that we have passed it down. How do we incorporate it into our TweetComponent?

We can access the prop we have passed down by simply stating:

onClick={props.incrementLikeCount()}>

Our TweetComponent is no longer responsible for having a state and any functionality to change the state. By incorporating props into your components we can send data both down and up to our ‘tree’. TwitterComponent can render multiple different components that each has a different responsibility to the web application.

Conclusion:

We know how to control the flow of functionality and data through props, how to change the state of any given component and how components operate. The tricky part of React, especially when you first start using it, is figuring out what responsibilities any given component needs. That being said, it all comes with practice and understanding, and you’ll soon find out how powerful React can be for your front-end abilities.

gif of the week: