Creating a simple counter app in React JS is an excellent way to get familiar with the core concepts of React, such as components, states, and events. In this blog, we will build a counter app from scratch, focusing on React features and best practices. By the end of this tutorial, you will have a functional counter app that you can increment, decrement, and reset.
Before we dive into the code, let's set up our React project. To create a new React application, we will use the following command provided by the Create React App tool:
1npx create-react-app counter-app 2
After running the following command, a new project folder will be created with all the necessary files and configurations to start our React app. Navigate to the project folder and start the development server with the following commands:
1cd counter-app 2npm start 3
The development server will serve your React app on a local web server, usually at http://localhost:3000/.
The core of our simple counter app will be the counter component. This component will manage the count state and render the user interface for our app. Let's start by creating a new file in the src directory for our counter component.
1// src/Counter.js 2import React, { useState } from 'react'; 3 4const Counter = () => { 5 const [count, setCount] = useState(0); 6 7 const increment = () => setCount(prevCount => prevCount + 1); 8 const decrement = () => setCount(prevCount => prevCount - 1); 9 const reset = () => setCount(0); 10 11 return ( 12 <div> 13 <h2>Count: {count}</h2> 14 <button onClick={increment}>Increment</button> 15 <button onClick={decrement}>Decrement</button> 16 <button onClick={reset}>Reset</button> 17 </div> 18 ); 19}; 20 21export default Counter; 22
In the code above, we import React and the useState hook to manage the count state within our counter component. The useState hook is initialized with an initial count of 0. We then define functions for incrementing, decrementing, and resetting the count. These functions are attached to button onclick events to update the count state when users interact with the buttons.
Now that we have our counter component, we must integrate it into our main app component. We will import and render the counter component within our app's user interface.
1// src/App.js 2import React from 'react'; 3import Counter from './Counter'; 4 5const App = () => { 6 return ( 7 <div className="App"> 8 <h1>Simple Counter App</h1> 9 <Counter /> 10 </div> 11 ); 12}; 13 14export default App; 15
In the App component, we import the Counter component and include it in the JSX returned by our function app. This is how we compose components in React to build complex user interfaces from simpler pieces.
We will add some styles to make our simple counter app visually appealing. Create a CSS file in the src directory and import it into our counter component.
1/* src/Counter.css */ 2.Counter { 3 text-align: center; 4} 5 6.Counter h2 { 7 margin: 20px 0; 8} 9 10.Counter button { 11 margin: 0 10px; 12 padding: 10px 20px; 13} 14
1// src/Counter.js 2import React, { useState } from 'react'; 3import './Counter.css'; 4 5// ... rest of the Counter component code 6
By importing the CSS file into our counter component, we ensure that the styles are applied when the component is rendered. The styling is simple but effective, centering the text and spacing out the buttons for better user interaction.
We have successfully created a simple counter app using React. This app demonstrates the use of components, state management with the useState hook, and handling user events with button onclick handlers. By following the steps outlined in this blog, you can build your counter app and experiment with React features such as lifecycle methods and state management.
Remember to keep your code organized and modular by separating concerns into different components. This will make your React applications easier to maintain and scale. With your new React counter app up and running, you're ready to dive deeper into React's capabilities and craft even more interactive applications. Happy coding!
Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!
You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.