Hey React
How do I make an hey react?
This is a simple chat window thing I built in React. My first React project.. What is a hey react? How do you make a hey react? This script and codes were developed by Joshua P. Larson on 23 July 2022, Saturday.
Hey React - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hey React</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="example"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.14.1/react.min.js'></script>
<script src='https://fb.me/react-dom-0.14.0.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Hey React - Script Codes CSS Codes
html { width: 100%; height: 100%;
}
body { background: #336699; background: -webkit-radial-gradient(#003399, #336699); background: radial-gradient(#003399, #336699);
}
#example { padding: 1rem;
}
Hey React - Script Codes JS Codes
'use strict';
var ChatMessage = React.createClass({ displayName: 'ChatMessage', render: function render() { return React.createElement( 'p', { style: { marginBottom: 0 } }, this.props.message, React.createElement('br', null), React.createElement( 'small', null, this.props.timestamp ) ); }
});
var ChatMessageHistory = React.createClass({ displayName: 'ChatMessageHistory', render: function render() { var createMessage = function createMessage(message, index) { var liStyles = { backgroundColor: index % 2 == 1 ? '#ddd' : '#efefef', padding: '1rem', borderBottom: '1px solid #ddd' }; return React.createElement( 'li', { style: liStyles }, React.createElement(ChatMessage, { message: message.message, timestamp: message.timestamp }) ); }; var ulStyles = { listStyle: 'none', margin: 0, padding: 0 }; return React.createElement( 'ul', { style: ulStyles }, this.props.messages.map(createMessage) ); }
});
var MESSAGES = [{ message: 'Hi Josh', timestamp: 'Tuesday' }, { message: 'How are you?', timestamp: 'Wednesday' }];
var ChatWindow = React.createClass({ displayName: 'ChatWindow', getInitialState: function getInitialState() { return { messages: MESSAGES, inputText: '' }; }, handleSubmit: function handleSubmit(e) { e.preventDefault(); var nextMessages = this.state.messages.concat([{ message: this.state.inputText, timestamp: 'Thursday' }]); var nextInputText = ''; this.setState({ messages: nextMessages, inputText: nextInputText }); }, onChange: function onChange(e) { this.setState({ inputText: e.target.value }); }, render: function render() { var windowStyles = { maxWidth: '40em', margin: '1rem auto' }; var formStyles = { display: 'flex' }; var inputStyles = { flex: '1 auto' }; var btnStyles = { backgroundColor: '#00d8ff', border: 'none', color: '#336699', textTransform: 'uppercase', letterSpacing: '0.05em', fontWeight: 'bold', fontSize: '0.8em' }; return React.createElement( 'div', { style: windowStyles }, React.createElement(ChatMessageHistory, { messages: this.state.messages }), React.createElement( 'form', { style: formStyles, onSubmit: this.handleSubmit }, React.createElement('input', { style: inputStyles, type: 'text', onChange: this.onChange, value: this.state.inputText }), React.createElement( 'button', { style: btnStyles }, 'Send' ) ) ); }
});
ReactDOM.render(React.createElement(ChatWindow, null), document.getElementById('example'));
Developer | Joshua P. Larson |
Username | jplhomer |
Uploaded | July 23, 2022 |
Rating | 3.5 |
Size | 3,959 Kb |
Views | 52,624 |
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 |
Seamless Scrolling Background | 2,535 Kb |
JS Geolocator | 2,653 Kb |
Animated Donut Chart | 3,808 Kb |
Displaying a Google Street View of your current location | 2,275 Kb |
Responsive HTML Timeline | 3,137 Kb |
Populate Native HTML Datalist with AJAX | 2,763 Kb |
Fixed Nav HoverIntent Example | 4,444 Kb |
CSS-Only Art Direction | 4,086 Kb |
Hey React | 3,959 Kb |
Verge-Style Homepage Tiles | 5,147 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 |
Slider for stackoverflow | KKOKU | 3,222 Kb |
Email Marketing Mock | Kristenzirkler | 8,224 Kb |
Simple jQuery Slider | Jurbank | 2,874 Kb |
CSSOff 2013 Submission | Codewunder | 14,766 Kb |
JS Countdown Timer | Ayoungh | 2,435 Kb |
Scarlett Johansson Tribute Page | Diomed | 3,233 Kb |
A Pen by Alex Edwards | Exards | 8,218 Kb |
Adding Items | Valhead | 4,008 Kb |
Part 19 Bootstrap split button dropdown | Venkatesha | 1,601 Kb |
Animate elements with fixed gradient | Badabam | 4,406 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!