content logo

React Buttons:

Click Counter Button using React JS

If you need a counter for your website, we have prepared it for you with the least amount of code. This code is displayed in the middle of the page. This counter is green and the numbers inside it are white. Each time you click on this button, the number inside it increases. This button is rectangular. The button we have in this post is made by React.

#

Free Counter Button Code

#

HTML Click Counter Button

#

React Counter Button Code

#

Javascript React Counter Button

<!-- This script got from frontendfreecode.com -->
<div id="root"></div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>
                                                                            
body {
  text-align: center;
}
.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  margin: 10px;
  cursor: pointer;
}
const { createStore } = Redux;
const { Provider, connect } = ReactRedux;
// action
const COUNT = 'ACTION';
function count() {
  store.dispatch({ type: COUNT });
}
// reducer
const initialState = { count: 0 };
function counter(state = initialState, action) {
  switch (action.type) {
    case COUNT:
      return Object.assign({}, state, { count: state.count + 1 });
    default:
      return state;}
}
class Button extends React.Component {
  render() {
    return /*#__PURE__*/(
      React.createElement("button", { className: "button", onClick: count },
      this.props.count));
  }}
const store = createStore(counter);
function mapStateToProps(state) {
  return { count: state.count };
}
let ConnButton = connect(mapStateToProps)(Button);
ReactDOM.render( /*#__PURE__*/
React.createElement(Provider, { store: store }, /*#__PURE__*/
React.createElement(ConnButton, null)),
document.getElementById('root'));
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.0/react-redux.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from frontendfreecode.com -->

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.0/react-redux.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js'></script>
<style>
body {
  text-align: center;
}
.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  margin: 10px;
  cursor: pointer;
}
</style>

</head>
<body>
<div id="root"></div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Free Frontend</a></div>
<script>
const { createStore } = Redux;
const { Provider, connect } = ReactRedux;
// action
const COUNT = 'ACTION';
function count() {
  store.dispatch({ type: COUNT });
}
// reducer
const initialState = { count: 0 };
function counter(state = initialState, action) {
  switch (action.type) {
    case COUNT:
      return Object.assign({}, state, { count: state.count + 1 });
    default:
      return state;}
}
class Button extends React.Component {
  render() {
    return /*#__PURE__*/(
      React.createElement("button", { className: "button", onClick: count },
      this.props.count));
  }}
const store = createStore(counter);
function mapStateToProps(state) {
  return { count: state.count };
}
let ConnButton = connect(mapStateToProps)(Button);
ReactDOM.render( /*#__PURE__*/
React.createElement(Provider, { store: store }, /*#__PURE__*/
React.createElement(ConnButton, null)),
document.getElementById('root'));
</script>

</body>
</html>
Preview