https://github.com/srikanth-kandi/react-counter-app
Simple Counter App using ReactJS ⚛️
https://github.com/srikanth-kandi/react-counter-app
reactjs
Last synced: 30 days ago
JSON representation
Simple Counter App using ReactJS ⚛️
- Host: GitHub
- URL: https://github.com/srikanth-kandi/react-counter-app
- Owner: srikanth-kandi
- License: mit
- Created: 2023-08-08T18:33:47.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-08-12T17:57:59.000Z (over 1 year ago)
- Last Synced: 2025-02-08T07:27:56.448Z (3 months ago)
- Topics: reactjs
- Language: JavaScript
- Homepage: https://srikanth-kandi.github.io/react-counter-app/
- Size: 1.13 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Counter Application using ReactJS ⚛️
Live demo - [https://srikanth-kandi.github.io/react-counter-app/](https://srikanth-kandi.github.io/react-counter-app/)
Executing on Local Machine 💻
Steps to Run on your Local Machine
Requirements
- Install `NodeJS` from [https://nodejs.org/en/download](https://nodejs.org/en/download)
- Install `Git` from [https://git-scm.com/downloads](https://git-scm.com/downloads)
1. Cloning this repository
```bash
git clone https://github.com/srikanth-kandi/react-counter-app
```
2. Move to the cloned directory
```bash
cd react-counter-app
```
3. Installing all the dependencies
```bash
npm install
```
4. Start the development server
```bash
npm start
```
5. If everything works fine you can see the output at [http://localhost:3000/react-counter-app](http://localhost:3000/react-counter-app)
6. Check [Details of Implementation 👨🏻💻](#details-of-implementation) section for more information
Deploying your ReactJS Application in GitHub (Optional)
- Visit [this](https://youtu.be/7wzuievFjrk) video for reference
- Install the `gh-pages` package
```bash
npm install gh-pages --save-dev
```
- Add `homepage` to the `package.json` file
```json
"homepage": "https://.github.io/"
```
- Add `predeploy` and `deploy` scripts to the `package.json` file
```json
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
}
```
- Deploy the application
```bash
npm run deploy
```
- After successful execution of the above command you can see the deployed application at [https://\.github.io/\](https://.github.io/) and `gh-pages` branch will be created in your repository.
Details of Implementation 👨🏻💻
1. Implemented using the [ES6 Class](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes) to define a component.
```jsx
import { Component } from 'react'
class Counter extends Component {
...
}
```
_As we are extending the `Component` class all the pre-defined methods and objects will be [Inherited](https://en.wikipedia.org/wiki/Inheritance_(object-oriented_programming)) to the `Counter` class, so we can easily implement new functionality to the `Counter` component._
2. So to define a new component we need to create a folder under the `src/` as `src/components`, under this directory we will store our new components.
3. Now, we need to create the `Counter` component under the path `src/components/Counter`
_NOTE: In ReactJS all the Components we create must be started with an Uppercase Alphabet_
4. Under the `src/components/Counter` we create two files `index.js` and `index.css` which hold the functionality and design part of the `Counter` component.
In the `index.js` file, we create the `Counter` class extends the `Component` class, and link the `index.css` to the `Counter` component.
5. `render()` is a method Inherited from the `Component` class which is crucial for rendering the `JSX` elements to `` elements.
```jsx
import { Component } from 'react'
import './index.css'
class Counter extends Component {
render() {
return (
Counter
0
Decrease 🔽
Increase 🔼
)
}
}
export default Counter
```
Now, import the `Counter` component to the `src/App.js` file for displaying on Homepage.
```jsx
import Counter from './components/Counter'
const App = () => {
return
}
export default App
```
To see the output on your Local machine follow [Executing on Local Machine 💻](#executing-on-local-machine) section
6. But we developed the static app till now, to make it dynamic we need to use the `state` object which is Inherited from the `Component` class.
```jsx
class Counter extends Component {
state = {
count: 0
}
}
```
_NOTE: `state` object is used to store the data which is frequently updated during the runtime of the application._
7. Now, we need to display the `count` value in the `
` tag, so we need to use the `JSX` syntax to display the `count` value.
```jsx
class Counter extends Component {
state = {
count: 0
}
render() {
const { count } = this.state
return (
Counter
{count}
Decrease 🔽
Increase 🔼
)
}
}
```
_NOTE: [this](https://en.wikipedia.org/wiki/This_(computer_programming)) is a keyword in Object Oriented Programming that refer to the object, class, or other entity of which the currently running code._
8. Now, we need to implement the functionality of the `Increase 🔼` and `Decrease 🔽` buttons, so we need to add the `onClick` event to the buttons.
```jsx
class Counter extends Component {
state = {
count: 0
}
render() {
const { count } = this.state
return (
Counter
{count}
Decrease 🔽
Increase 🔼
)
}
}
```
_NOTE: `onClick` is a [Event Handler](https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Event_handlers) which is used to handle the click event on the element._
9. Now, we need to implement the `onIncrement()` and `onDecrement()` methods to increase and decrease the `count` value using the `setState()` method which is Inherited from the `Component` class.
The `setState()` method takes the `prevState` object as an argument and returns the updated `state` object.
```jsx
class Counter extends Component {
state = {
count: 0
}
onIncrement = () => {
this.setState(prevState => {
return { count: prevState.count + 1 }
})
}
onDecrement = () => {
this.setState(prevState => {
return { count: prevState.count - 1 }
})
}
render() {
const { count } = this.state
return (
Counter
{count}
Decrease 🔽
Increase 🔼
)
}
}
export default Counter
```
_NOTE: `setState()` is a method that is used to update the `state` object of the component._
10. Now, we can see the `count` is updating by clicking on the `Increase 🔼` and `Decrease 🔽` buttons. See the output on the browser by following the [Executing on Local Machine 💻](#executing-on-local-machine) section.