React Counter
How do I make an react counter?
Simple counter made in react. Using this to teach myself react. What is a react counter? How do you make a react counter? This script and codes were developed by Bryan Smith on 21 November 2022, Monday.
React Counter - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>React Counter</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="container">
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
React Counter - Script Codes CSS Codes
body { display: flex; justify-content: center; font-family: Arial; background: #A7A2A9;
}
.counterBox { background: #1E1E24; height: 150px; width: 300px; border-radius: 4px; padding: 10px; box-shadow: 0px 6px 1px #ccc;
}
.counterBox .count { text-align: center; font-size: 2.5em; color: #F4F7F5;
}
.counterBox .buttonHolder { text-align: center;
}
.counterBox .buttonHolder button { height: 60px; width: 100px; border: none; border-radius: 3px; margin: 5px; text-transform: uppercase; font-size: 1.75em; cursor: pointer;
}
.counterBox .buttonHolder .plus { background: #21A179; box-shadow: 0px 4px 0px #156b50;
}
.counterBox .buttonHolder .minus { background: #FB9F89; box-shadow: 0px 4px 0px #ad6c5c;
}
.counterBox .buttonHolder .clicker:focus { outline: 0;
}
.counterBox .buttonHolder .clicker:active { position: relative; top: 3px; box-shadow: none;
}
React Counter - Script Codes JS Codes
"use strict";
var Master = React.createClass({ displayName: "Master", render: function render() { return React.createElement( "div", null, React.createElement(CounterLogicWrapper, null) ); }
});
var CounterLogicWrapper = React.createClass({ displayName: "CounterLogicWrapper", getInitialState: function getInitialState() { return { counter: 0 }; }, minusOne: function minusOne() { this.setState({ counter: this.state.counter - 1 }); }, plusOne: function plusOne() { this.setState({ counter: this.state.counter + 1 }); }, render: function render() { return React.createElement( "div", { className: "counterBox" }, React.createElement(Counter, { counter: this.state.counter }), React.createElement( "div", { className: "buttonHolder" }, React.createElement( "button", { className: "plus clicker", onClick: this.plusOne }, "+1" ), React.createElement( "button", { className: "minus clicker", onClick: this.minusOne }, "-1" ) ) ); }
});
var Counter = React.createClass({ displayName: "Counter", render: function render() { return React.createElement( "div", { className: "count" }, this.props.counter ); }
});
ReactDOM.render(React.createElement(Master, null), document.getElementById('container'));
Developer | Bryan Smith |
Username | beeg |
Uploaded | November 21, 2022 |
Rating | 3 |
Size | 3,296 Kb |
Views | 42,504 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Credit Card Check | 2,285 Kb |
A Pen by Bryan Smith | 2,573 Kb |
Sudoku Validator | 1,841 Kb |
Animated SVG Signature | 2,905 Kb |
Customer Checkout | 7,261 Kb |
Gradient Text | 1,586 Kb |
JSWatch | 3,294 Kb |
User login | 3,195 Kb |
Credit Card Wallet | 7,621 Kb |
CSS Super Nintendo Controller | 3,374 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Custom checkbox example | Capelo | 3,495 Kb |
Firefox Breakout Guide | Quincysoeliman | 2,576 Kb |
Border image | JohnRiordan | 2,120 Kb |
How to add Css Fold Notes In Blogger By Askwithloud.com | Askwithloud | 2,280 Kb |
Buttons for autumn | Nikazawila | 1,795 Kb |
Multiple jCarousel | Pafnuty | 2,461 Kb |
Get third wednesday | Wojtek1150 | 2,691 Kb |
Website Concept | Sagoza | 3,104 Kb |
My Starter Kit For Codepen | Dkdesign | 2,012 Kb |
Css color for svg | Ademilter | 2,392 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!