Create a Simple Voting App Using React

Before start reading this article, I would like to pin a point that, it is only made for purpose of learning React. To make a voting app real, we need to set up a backend and database to store results. Here we are only creating the frontend of a simple voting app using React.js

After completing this article, we will get an idea about the steps for building a react app such as:-

1. Creating a new react application using NPX
2. Adding new components
3. Using React bootstrap within our project
4. Adding SCSS in a React project
5. Structuring components and styles
6. Dealing with states and props

Prerequisites

A person with a bit of knowledge in HTML, CSS, and basic computer knowledge can easily understand this article.

Now, let’s start creating the voting app in React.

Before entering this app, the below image will give us an exact idea of our project file structure.

1. Create a new React app

After successful installation of Node.js, we can easily create a new React project using the NPX tool with the below command.

npx create-react-app voting-app

Now enter the project and open it with any code editor. Here I am using Visual Studio code for editing code.

cd voting-app
code .

Now start our react app using npm start command.

npm start

It will open up the React application we have created in our browser window with the address https://localhost:3000. The port may vary if 3000 is busy.

If you need further assistance in the installation of React on your system, use the below links.

Install React on Windows, Ubuntu, and macOS

2. Install React bootstrap

Now install React bootstrap and bootstrap package for the basic styling.

npm i react-bootstrap
npm i bootstrap

After installing these packages on our app, we will get a list of bootstrap components for creating UIs.

3. Install Node Sass

Using Bootstrap, we can create beautiful UIs. If it requires more styling, we need to add custom CSS. But in this guide, we will use SCSS instead of CSS.

But we need to install a node-sass package for adding SCSS support. So use the below command to install node-sass version 4.14.1. Right now, React does not compatible with the latest version of node-sass.

npm install node-sass@4.14.1

4. Create teams data as JSON

Because our app does not have a backend or database, we need to create a JSON array.

So inside src directory, create a directory lib and create a teams.json file.

[
    {
        "_id": 1,
        "name": "FC Barcelona",
        "logo": "fcb.png",
        "votes":0
    },
    {
        "_id": 2,
        "name": "Juventus F.C.",
        "logo": "juventus.png",
        "votes":0
    },
    {
        "_id": 3,
        "name": "Manchester United F.C.",
        "logo": "mu.png",
        "votes":0
    }
]

5. Store team logo images

Here we can see that the team object contains _id, name, logo, and votes. It only has the file name of the logo. So we need to store the images to access them.

Inside public directory, create directory assets and images inside it. Now paste all the logo files there.

6. Create VotingCard component

Now we are going to create a VotingCard.jsx component inside src/components to display each team’s information.

This will show up the team logo, name, number of votes and a button to add votes.

Here, the value team and function incrementCount are coming from the parent component(App.js) as props.

So, when we press the Vote button, it calls the prop incrementCount and pass the id of the team with it.

The function is defined in App.js and we will discuss it later.

7. App component

Clear all default code from the App.js component. Now import the react-bootstrap components, bootstrap.css file, and teamsJson array, VotingCard component we created earlier. We also imported styles.scss file that will explain later.

Now let’s dig in to the App() function. Here we need to initialise a state called teams and a function to update the state called setTeams.

let [teams, setTeams] = useState([]);

Now, when the component App mounts, we need to assign the teamsJson data to teams state for further usage.

The useEffect feature in React will take care of it.

 useEffect(() => {
    setTeams(teamsJson);
  }, []);

Inside the return function, we are mapping the teams array and each team data is passed to the VotingCard. This data is shown up in the frontend.

We could also see that a function incrementVoteCounter is also passed to VotingCard component to get the teamId from VotingCard. This teamId is used to update the votes of each team.

  return (
    <Container className="app">
      <Row>
        {teams.map((team) => {
          return (
            <Col md={4}>
              <VotingCard
                team={team}
                incrementVoteCount={(teamId) => incrementVoteCount(teamId)}
              />
            </Col>
          );
        })}
      </Row>
    </Container>
  );

So, when we press the Vote button in the VotingCard component, it passes the _id value of the team to App.js

The incrementation of votes must be done from here. For this we have defined a function incrementVoteCount().

  function incrementVoteCount(teamId) {
    teams = teams.map((team) => {
      if (team._id === teamId) {
        team.votes = team.votes + 1;
      }
      return team;
    });
    setTeams(teams);
  }

This function maps through the teams and increments the votes field if the teamId passed to the function matches the mapped team.

After that, we will update the state teams using setTeams function to re-render the component. Otherwise, the update will not show up in real-time.

So the complete App.js component looks the same as below.

Now our app works the exactly as below.

Codesandbox

Refer to the CodeSandbox link to view the live app.

https://codesandbox.io/s/busy-dream-5l8kv

GitHub

You can always refer to the GitHub repository to clone this project.

https://github.com/syamjayaraj/ReactVotingApp

Summary

In this article, we learned the basic structure of building a simple React app. This covers the topic components, props, states, etc. Adding react-bootstrap and custom SCSS are also explained here. Combining all these, we made a voting app using React.js.