Do you want to get started in React or just get an idea of how it works, then you have come to the right place. I will go through how to get setup with React and how to use some of the hooks React have to ensure your code is clean. We will be building a simple React app that will dispense programming jokes.

Final page of tutorial

What is React?

React is a Front-end framework, one of , if not, the most used Front-end framework right now. React is used to create dynamic single page applications so that the site is loaded up as soon as the request is made and then future page requests are very quick. It does this by splitting the pages into components that can be reused in many different places and pacing data between applications.

Photo by Ferenc Almasi on Unsplash

Prerequisites

  • Be able to use a computer and computer terminal (Required)
  • Familiar with HTML/CSS (Required)
  • Know JavaScript (Optional but recommended )

How to start with React

First, download Node.js with npm if you have not already from: https://nodejs.org/en/ .

next you can simply create a React app by running

npx create-react-app {app name}

and replacing {app name} with your app name.

After running that command, a folder with your app name will be created. Navigating into it and running npm start should open a browser with the default React app.

Default React site

Building React

As was mentioned before React creates single page applications. That page is App.js in your src folder. You can ignore the other files for now as we will not be able to into detail about them this tutorial.

Within App.js you will find a JavaScript function that returns what looks like HTML but is actually JSX. It serves the same purpose as HTML but allows incorporating React elements and other JavaScript code. Feel free to clear out the all the JSX code and replace it with a single div with Hello World inside. Lets also clear out App.css and replace it with some styling for our Hello world div. The code and page should look something like this.

current code
current output

Notice that the page changes automatically once you save your changes, this is a feature that comes in really handy for development. Next, lets create a component, to do create a new folder in scr named components and create Joke.js. In Joke.js input the following code.

import React from 'react';function Joke() {return (<div>This is a joke!</div>);}export default Joke;

This is a functional component and will return whatever is in the div.

Now replace Hello World in App.js with the Joke component and import it as such.

import React from 'react';import './App.css';import Joke from './components/Joke';function App() {return (<div className="HelloWorld"><Joke /></div>);}export default App;

when saying you should see the updated page with text saying this is a joke.

Next we can pass in parameters into the component by adding props to the function and then calling them in the code. Lets add a jokester prop that will set the name of the person telling the Joke (you). To do this add (props) to the function and then with it you are able to incorporate it into the JSX with {}.

Joke.js file

Next we need to pass in the jokester data from App.js as such.

<Joke jokester = {"Youssef"}/>

Lets also display How many jokes we displayed by creating a variable to save it and a function to increase it. Lets also pass in this function to the component. Passing functions to components is the main way to get information from a component back to its parents as props are read only. Likewise props are the main way to get information from a parent into a component.

Side Note: The above statement is true for vanilla react but there are libraries such as Redux which provide another source of data to pass between components.

Next lets add a button that will call newJoke within the Joke component using React’s onClick feature.

If you run this code you will notice that nothing changes on the page even though new numbers are shown in the console. This is because nothing has been bound in React so it doesn’t know to update. This is where Hooks come in.

Are you Hooked yet?

We will only use the useState hook with is the most common, but more exist and I advise looking into them for further development.

To useState we have to import it as such.

import {useState} from 'react';

Then we can bind jokenumber to a state as such.

const [jokenumber, setJokenumber] = useState(0);const increaseJoke = () =>{setJokenumber(jokenumber + 1);console.log(jokenumber);
)

When using useState a variable is declared with an initial state and a set function is created that is used to set the value of the variable.
This tells React to update when a new value is created or set, so now when pressing the button on the web page the number should update.

Now lets implement joke getting. In the Joke component create a joke state and a new async newJoke function that will update joke and run props.newJoke.

newJoke will fetch a joke from the official joke api : https://github.com/15Dkatz/official_joke_api. It will then turn it into a Json.

newJoke should look something like this

const [joke, setJoke] = useState();const newJoke = async () => {let newJoke = await (await fetch("https://official-joke-api.appspot.com/jokes/programming/random")).json();setJoke(newJoke);props.newJoke();};

Then lets replace “This is a joke” with the actual joke we got and add some style to our code.

<div><h1 style={{ color: "green" }}>{joke["0"]["setup"]}</h1><h2 style={{ color: "red" }}>{joke["0"]["punchline"]}</h2></div>

Let us also add a conditional so before we have any jokes we display the text we had before.

{joke ? (<div><h1 style={{ color: "green" }}>{joke["0"]["setup"]}</h1><h2 style={{ color: "red" }}>{joke["0"]["punchline"]}</h2></div>) : ("This is a Joke")}

That should it for the tutorial, the page is now working, providing new jokes and following react principles. The code is available at : https://github.com/YoussefZayed/Medium-content/tree/main/demoapp

Refreshed final page
Final page

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store