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:-
- Creating a new react application using NPX
- Adding new components
- Using React bootstrap within our project
- Adding SCSS in a React project
- Structuring components and styles
- 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.14. 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.
