The above creates a div with a class of App – in React, we don’t use ‘class’ because class is a reserved keyword in JavaScript. ReactDOM will take care of adding it correctly when it gets to the browser.
Inside the div, we have two elements, which are just standard HTML headings. Some things to note:
• An element, in React nomenclature, is a DOM-native element, like div or p
• A component is a custom element that you (or someone else) has created in React, like App above.
• All elements start with a lowercase letter (as they would in HTML) • All components must start with an Uppercase letter
3

Exercise: A simple one to get you started. Change some of the text inside the headings and check the result.
Adding Some Functionality
So, we’ve got our first application, but it’s pretty boring. It’s just displaying static content, which is not the primary reason we use React.
We’re going to add a ‘Like’ and ‘Dislike’ button, and keep track of the overall number of ‘Likes’.
The first thing we need to do is add the buttons and a place to display the count. Buttons are added straightforwardly via the button tag.
Exercise: Add 2 buttons – one that says ‘Like’ and one that says ‘Dislike’, and add a p that says ‘Overall likes: 0’. Update the h1 with a relevant title (you can get rid of the h2).
Answer:
It doesn’t matter what else is in your App, but it should look something like this:
function App() { return (

);
}
You can go ahead and click on these buttons. Nothing will happen. We need to add some state. State is the part of your application that remembers what has happened.
To add state, we’re going to be using Hooks – these are a relatively new develop- ment in the React ecosystem, but they are part of the stable release and greatly simplify React overall. The previous way we did this was with Class Compo- nents which added a lot of overhead to the learning/understanding process. I recommend you read about them eventually, because a lot of companies will have code that uses them, but for now it’s enough to just know that Hooks aren’t the only way of doing this.
To use state, we need to import useState. This comes from the React package, and is a named export, so update you import line to look like this:
import React, { useState } from ‘react’;
Then, at the top of our App, we need to create the state.
4

function App() {
const [count, setCount] = useState(0);
…
Okay. Let’s break down what’s happening here. useState returns an Array with two elements – the state, and a function that can be called to modify the state. We use Array Destructuring to give these items useful names. The argument to useState is the initial state. So, count is a variable that holds the number 0
(currently), and setCount is a function that can be used to update the count. This will keep track of the count over time, in between renders.
To display the count, we are going to update our p:

Overall Count: {count}

The curly-braces inside of the JSX are an instruction to tell JSX to return to regular JavaScript. That means that we’re going to use our new count variable. Saving your application, you should see no changes to your page, because the count is still 0. Let’s make the count ‘changeable’.
A button has an onClick prop that we can use to help here. We can pass a function in that will allow us to change the count. For now, we’re just going to set it to something static.
setCount(10)}>Like
What we’ve done here is added the onClick prop to the button, and passed in a function. The function calls setCount with a value of 10. If you save your page now, and press ‘Like’, you should see a change.
Exercise: Add an onClick to the ‘Dislike’ button to set the count to -1
Notice, however, that when you click on the buttons it just updates the state to some completely new state. We need to use the old state to compute the new state.
To make our lives simpler, we’re going to create two functions, increment and decrement, that will add one and remove one from the count.
Inside of App, below your useState(0) call, add the following:
const increment = () => { setCount((oldCount) => oldCount + 1);
};
Note the use of lambda syntax – the () => { }; defines a function, and we will use this frequently. And the code itself may be a little confusing – we’ve just passed a function to setCount? Some of you may have been expecting increment to look like this:
const increment = () => { setCount(count + 1);
5

};
This might work, but is not ‘safe’. The reason for this is: React doesn’t always update straight away. It sometimes combines a couple of updates and does them all at the same time. That means that if you pressed the ‘Like’ button a bunch of times before the update applied, you’d be adding to the old count every time, and would end up with only 1 more than you had before. When you pass a function to setCount, it will be called with the correct value of count for when the update is run.
Tl;dr: If you are using state to update your state, pass a function. Otherwise, pass the value.
Exercise: Write the decrement function.
Once you have both functions, update the onClick for the ‘Like’ and ‘Dislike’
buttons:
Like
Dislike
And now, when you save, you’ll have a working application that keeps track of the values over time!
Exercise: Add a Super Like button that adds 10 to the count every time you press it. For bonus points, make sure it can only be pressed twice.
Reusable Components
Now that we’ve built a simple application, we should try and extend it. The goal for this section is for us to be able to have a bunch of headings, each with its own individual Like and Dislike buttons and counter.
The first thing we need to do is make a new React component for the like and dislike buttons. A component is a nice, simple unit of code that is essentially independent from anything else. We isolate components by making a new function and including the relevant pieces within that function body.
First things first, let’s make our component. As mentioned earlier, a component is just a function that returns some React code. App was our first component, and now we’re going to make a second component called LikeCounter. To do this, create a new function above App that looks like this:
function LikeCounter() {
/* our code will go in here */
}
If you want to race on ahead, try and extract the relevant pieces out of App that make up the Like and Dislike buttons. Otherwise, follow along.
The first thing we need to do is take the words and the buttons. Keep in mind that we can only return one element from a component, so we’ll need to wrap
6

our buttons and text in something. For now, we’ll use a div, because it doesn’t really change what anything looks like.
function LikeCounter() { return (

);
}
Some things to note. First, I’ve changed ‘Overall Count’ to ‘Like Count’ – keep in mind that we want to show the number of likes per title. Secondly, note that we wrap the element we’ve returned in parentheses. This is technically optional, but is very good practice to avoid the problems that can arise from Automatic Semicolon Insertion. You don’t need to think about it too much – just remember to wrap your return statements in parentheses if they span multiple lines.
Now that we have our LikeCounter component, we can bring across the state. In this case, the state will reflect the individual count, and is used only in the one component – nothing else needs to reference it, so we can bring it in to our new component with no problems.
function LikeCounter() {
const [count, setCount] = useState(0);
const increment = () => { setCount((oldCount) => oldCount + 1);
};
const decrement = () => {
setCount((oldCount) => oldCount – 1); };
return (

);
}
Now, inside of App, you can remove the state, the ‘Overall Count’ text and the Like + Dislike buttons. Then, add in your LikeCounter as shown below. When you save, you should notice only a difference in the text – everything should work in the same way as before.
7

function App() { return (

);
}
Cool! Now we’ve made our first reusable component! You can add as many LikeCounters as you like to the page, and they’ll all work independently.
The next thing we need to do is make a component to hold our titles + like buttons. What we’re aiming for is something that looks like this:

Inside the component we will have an h1 that displays the title text, and the LikeCounter from above. We’ll have to figure out how to access the text we’ve passed in.
This is called a prop in React. A prop is something you pass into a React component. You can think about it almost like the parameter to a function
(because they are!).
Every React component you create has all its props passed to it as an object in the first argument. Take the following example:
function Test(props) {
console.log(props);
return null; // every component *must* return something
}
Now, in the following examples, props will be an object that contains whatever values you pass in:

// `props` is an object like this: { title: Hello }

// `props` is an object like this: { number: 5 }
console.log(‘hello!’)} enabled={true} disabled={false} />
// `props` is an object like this: { fn: Function, enabled: true, disabled: false }
As you can see, you can pass any values you like as props. You can also see that for values other than String, you must wrap it in curly braces – remember from above that the curly braces allow for regular JavaScript to be used inside JSX. The final thing you should know about props – if you have a boolean prop, and you want to set its value to true, you can just add the name of the prop. For false, you must still pass in the value explicitly. See the following:
8

// `props` is an object like this: { enabled: true, disabled: false }
Here, enabled is set to true, because we’ve used the prop name there directly. However, for disabled to be marked as false, we must specify it.
Now, we probably have enough information to make our Headline component.
Exercise: Create the Headline component with the API from above. It should have an h1 that displays the title you pass in as a prop, and a LikeCounter. Try this yourself before looking below for the solution.
Answer:
function Headline(props) { return (

);
}
Now, you can use your Headline in App as many times as you like with a bunch of titles, and they’ll all show up. You can like and dislike each of them individually.
Resources
• If you want to get ahead of the pack, I highly recommend watching the (free) EggHead course ‘The Beginner’s Guide to React’ by Kent C. Dodds.
It covers a lot of content, and is designed for beginners. Link here. • The official React docs
9