React is a front-end, open-source JavaScript library that is used to create interactive UI. It is developed and maintained by Facebook. It can be used for the development of single-page and mobile applications.

We’ll be creating a simple application where we have 2 buttons, one to increment and one to decrement.

Step 1: Create a React application using the following command:

npx create-react-app counter

Step 2: After creating your project folder i.e. counter, move to it using the following command:

cd counter

Step 3: Run the application using the following command from the root directory of the project:

npm start

After creating your application and project folder, the next thing we do is create a functional component and use the useState hook.

We will create one state variable called count and two buttons. The code will look like this.

import React,{useState} from 'react'

const App = () => {

const[count,setCount]=useState(0);

return (

<div>

<button>+</button>

{count}

<button>-</button>

</div>

)

}

export default App

So, now we have to add two functions. One will increase the value of count by 1 whereas the other will decrease the value of count by We will pass these functions in the onClick method of the two buttons. The code looks like this :

import React,{useState} from 'react'

const App = () => {

const[count,setCount]=useState(0);

const inc=()=>{

setCount(count+1);

}

const dec=()=>{

if(count>0)

setCount(count-1);

}

return (

<div>

<button onClick={inc} >+</button>

{count}

<button onClick={dec}>-</button>

</div>

)

}

export default App

Error Boundaries

we were asked to implement an error boundary page which I couldn't finish at the time of the submission but the holiday challenge was for us to revisit our exam project and improve it.

I went back to the project and try to implement the error boundary.

Error boundaries are React components that catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and constructors of the whole tree below them.

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {    // Update state so the next render will show the fallback UI.    return { hasError: true };  }
  componentDidCatch(error, errorInfo) {    // You can also log the error to an error reporting service    logErrorToMyService(error, errorInfo);  }
  render() {
    if (this.state.hasError) {      // You can render any custom fallback UI      return <h1>Something went wrong.</h1>;    }
    return this.props.children; 
  }
}

Then you can use it as a regular component.

<ErrorBoundary>
  <Counter />
</ErrorBoundary>

Conclusion: This is how to create a simple counter with react. You can use these simple steps to build yours.

Thank you for reading.

How to Build a Simple Counter using ReactJS

Error Boundaries