CodeSchool Powering Up with React

Developer
Christian Fleschhut
Size
7,420 Kb
Views
40,480
  1. CodeSchool Powering Up with React Previews
  2. CodeSchool Powering Up with React HTML Codes
  3. CodeSchool Powering Up with React CSS Codes
  4. CodeSchool Powering Up with React JS Codes

How do I make an codeschool powering up with react?

What is a codeschool powering up with react? How do you make a codeschool powering up with react? This script and codes were developed by Christian Fleschhut on 11 August 2022, Thursday.

CodeSchool Powering Up with React Previews
IQ Test

CodeSchool Powering Up with React - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CodeSchool Powering Up with React</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.2/css/bootstrap.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='container-fluid'> <div id='comment_app'></div> <div id='story_app'></div>
</div> <script src='https://fb.me/react-15.0.1.js'></script>
<script src='https://fb.me/react-dom-15.0.1.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<script src='https://wzrd.in/bundle/react-router@latest'></script> <script src="js/index.js"></script>
</body>
</html>

CodeSchool Powering Up with React - Script Codes CSS Codes

.avatar { display: inline-block; width: 50px; margin-right: 10px;
}

CodeSchool Powering Up with React - Script Codes JS Codes

'use strict';
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _reactRouter = require('react-router');
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var CommentForm = function (_React$Component) { _inherits(CommentForm, _React$Component); function CommentForm() { _classCallCheck(this, CommentForm); var _this = _possibleConstructorReturn(this, _React$Component.call(this)); _this._handleSubmit = function (ev) { ev.preventDefault(); var author = _this._author; var body = _this._body; if (!author.value || !body.value) { alert("Please enter your name and comment"); return; } _this.props.addComment(author.value, body.value); _this._author.value = ''; _this._body.value = ''; _this.setState({ characters: 0 }); }; _this._getCharacterCount = function () { _this.setState({ characters: _this._body.value.length }); }; _this.state = { characters: 0 }; return _this; } CommentForm.prototype.render = function render() { var _this2 = this; return React.createElement( 'form', { className: 'comment-form m-y-2', onSubmit: this._handleSubmit }, React.createElement( 'h3', null, 'Join the discussion' ), React.createElement( 'div', { className: 'comment-form-fields' }, React.createElement( 'fieldset', { className: 'form-group' }, React.createElement('input', { className: 'form-control', placeholder: 'Name:', ref: function ref(input) { return _this2._author = input; } }) ), React.createElement( 'fieldset', { className: 'form-group' }, React.createElement('textarea', { className: 'form-control', placeholder: 'Comment:', ref: function ref(textarea) { return _this2._body = textarea; }, onKeyUp: this._getCharacterCount }), React.createElement( 'div', { className: 'text-xs-right' }, React.createElement( 'span', { className: 'label label-pill label-default' }, this.state.characters ) ) ) ), React.createElement( 'div', { className: 'comment-form-actions' }, React.createElement( 'button', { type: 'submit', className: 'btn btn-primary btn-block' }, 'Post comment' ) ) ); }; return CommentForm;
}(React.Component);
var Comment = function (_React$Component2) { _inherits(Comment, _React$Component2); function Comment() { var _temp, _this3, _ret; _classCallCheck(this, Comment); for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } return _ret = (_temp = (_this3 = _possibleConstructorReturn(this, _React$Component2.call.apply(_React$Component2, [this].concat(args))), _this3), _this3._handleDelete = function (ev) { ev.preventDefault(); if (confirm('Delete this comment?')) { _this3.props.onDelete(_this3.props); } }, _temp), _possibleConstructorReturn(_this3, _ret); } Comment.prototype.render = function render() { return React.createElement( 'div', { className: 'comment card' }, React.createElement( 'div', { className: 'card-block' }, React.createElement( 'h5', { className: 'card-title' }, React.createElement( 'span', { className: 'avatar' }, React.createElement('img', { src: this.props.avatarUrl, className: 'img-fluid' }) ), React.createElement( 'span', { className: 'comment-author' }, this.props.author ) ), React.createElement( 'p', { className: 'comment-body card-text' }, this.props.body ) ), React.createElement( 'div', { className: 'card-footer' }, React.createElement( 'a', { href: '#', onClick: this._handleDelete }, React.createElement( 'small', null, 'Delete comment' ) ) ) ); }; return Comment;
}(React.Component);
var CommentBox = function (_React$Component3) { _inherits(CommentBox, _React$Component3); function CommentBox() { _classCallCheck(this, CommentBox); var _this4 = _possibleConstructorReturn(this, _React$Component3.call(this)); _this4._handleClick = function () { _this4.setState({ showComments: !_this4.state.showComments }); }; _this4._addComment = function (author, body) { var comment = { id: _this4.state.comments.length + 1, author: author, body: body }; $.ajax({ url: '//codepen.io/cfleschhut/pen/zqMyZN', method: 'POST' }); _this4.setState({ comments: _this4.state.comments.concat(comment) }); }; _this4.state = { showComments: false, comments: [], characters: 0 }; return _this4; } CommentBox.prototype.componentWillMount = function componentWillMount() { this._fetchComments(); }; CommentBox.prototype.componentDidMount = function componentDidMount() { // this._timer = setInterval(() => this._fetchComments(), 10000); }; CommentBox.prototype.componentWillUnmount = function componentWillUnmount() { clearInterval(this._timer); }; CommentBox.prototype._fetchComments = function _fetchComments() { var _this5 = this; $.ajax({ url: this.props.apiUrl, method: 'GET', dataType: 'json', success: function success(comments) { _this5.setState({ comments: comments }); } }); }; CommentBox.prototype._getComments = function _getComments() { var _this6 = this; return this.state.comments.map(function (comment) { return React.createElement(Comment, _extends({}, comment, { key: comment.id, onDelete: _this6._deleteComment.bind(_this6) })); }); }; CommentBox.prototype._deleteComment = function _deleteComment(comment) { $.ajax({ url: 'https://codepen.io/cfleschhut/pen/zqMyZN/' + comment.id, method: 'DELETE' }); //const comments = [...this.state.comments]; //const commentIndex = comments.indexOf(comment); //comments.splice(commentIndex, 1); var comments = this.state.comments.filter(function (cmt) { return cmt.id != comment.id; }); this.setState({ comments: comments }); }; CommentBox.prototype.render = function render() { var comments = this._getComments(); var commentNodes = undefined; var buttonText = 'Show comments'; if (this.state.showComments) { buttonText = 'Hide comments'; commentNodes = React.createElement( 'div', { className: 'comment-list' }, comments ); } return React.createElement( 'div', { className: 'comment-box m-b-2' }, React.createElement(CommentForm, { addComment: this._addComment }), React.createElement( 'div', null, React.createElement( 'h3', null, 'Comments' ), React.createElement( 'div', { className: 'm-b-2' }, React.createElement( 'h4', { className: 'comment-count pull-xs-left m-r-1' }, comments.length, ' comments' ), React.createElement( 'button', { className: 'btn btn-secondary btn-sm', onClick: this._handleClick }, buttonText ) ), commentNodes ) ); }; return CommentBox;
}(React.Component);
CommentBox.propTypes = { apiUrl: React.PropTypes.string.isRequired
};
var Greeting = function Greeting(props) { return React.createElement( 'div', null, props.message );
};
var StoryBox = function (_React$Component4) { _inherits(StoryBox, _React$Component4); function StoryBox() { _classCallCheck(this, StoryBox); return _possibleConstructorReturn(this, _React$Component4.apply(this, arguments)); } StoryBox.prototype.render = function render() { var now = new Date(); var topicsList = ['HTML', 'JavaScript', 'React']; return React.createElement( 'div', { className: 'card m-b-2' }, React.createElement( 'div', { className: 'card-block' }, React.createElement( 'h3', null, 'Story Box' ), React.createElement( 'p', { className: 'lead' }, now.toTimeString() ), React.createElement( 'ul', null, topicsList.map(function (topic, i) { return React.createElement( 'li', { key: i }, topic ); }) ), React.createElement(Greeting, { message: 'hello stateless fn component' }) ) ); }; return StoryBox;
}(React.Component);
var Layout = function (_React$Component5) { _inherits(Layout, _React$Component5); function Layout() { _classCallCheck(this, Layout); return _possibleConstructorReturn(this, _React$Component5.apply(this, arguments)); } Layout.prototype.render = function render() { return React.createElement( 'div', null, React.createElement( 'nav', { className: 'navbar navbar-light bg-faded' }, React.createElement( 'ul', { className: 'nav navbar-nav' }, React.createElement( 'li', { className: 'nav-item' }, React.createElement( _reactRouter.Link, { to: '/blog', className: 'nav-link' }, 'Blog' ) ), React.createElement( 'li', { className: 'nav-item' }, React.createElement( _reactRouter.Link, { to: '/picture', className: 'nav-link' }, 'Picture' ) ), React.createElement( 'li', { className: 'nav-item' }, React.createElement( _reactRouter.Link, { to: '/video', className: 'nav-link' }, 'Video' ) ) ) ), this.props.children ); }; return Layout;
}(React.Component);
var BlogPage = function (_React$Component6) { _inherits(BlogPage, _React$Component6); function BlogPage() { _classCallCheck(this, BlogPage); return _possibleConstructorReturn(this, _React$Component6.apply(this, arguments)); } BlogPage.prototype.render = function render() { return React.createElement( 'div', null, React.createElement( 'h2', null, 'Blog page' ), React.createElement(CommentBox, { apiUrl: '//codepen.io/cfleschhut/pen/zqMyZN.js' }) ); }; return BlogPage;
}(React.Component);
var PicturePage = function (_React$Component7) { _inherits(PicturePage, _React$Component7); function PicturePage() { _classCallCheck(this, PicturePage); return _possibleConstructorReturn(this, _React$Component7.apply(this, arguments)); } PicturePage.prototype.render = function render() { return React.createElement( 'div', null, React.createElement( 'h2', null, 'Picture page' ) ); }; return PicturePage;
}(React.Component);
var VideoPage = function (_React$Component8) { _inherits(VideoPage, _React$Component8); function VideoPage() { _classCallCheck(this, VideoPage); return _possibleConstructorReturn(this, _React$Component8.apply(this, arguments)); } VideoPage.prototype.render = function render() { return React.createElement( 'div', null, React.createElement( 'h2', null, 'Video page' ) ); }; return VideoPage;
}(React.Component);
var app = React.createElement( _reactRouter.Router, { history: _reactRouter.hashHistory }, React.createElement(_reactRouter.Redirect, { from: '/', to: '/blog' }), React.createElement( _reactRouter.Route, { path: '/', component: Layout }, React.createElement(_reactRouter.Route, { path: 'blog', component: BlogPage }), React.createElement(_reactRouter.Route, { path: 'picture', component: PicturePage }), React.createElement(_reactRouter.Route, { path: 'video', component: VideoPage }) )
);
ReactDOM.render(app, document.querySelector('#comment_app'));
//ReactDOM.render(<StoryBox />, document.querySelector('#story_app'));
CodeSchool Powering Up with React - Script Codes
CodeSchool Powering Up with React - Script Codes
Home Page Home
Developer Christian Fleschhut
Username cfleschhut
Uploaded August 11, 2022
Rating 3
Size 7,420 Kb
Views 40,480
Do you need developer help for CodeSchool Powering Up with React?

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!

Christian Fleschhut (cfleschhut) Script Codes
Name
Json data for todolist
Givie.io Logo in CSS
Bootstrap 3 Playground
AngularJS tutorial app
React-Bootstrap sandbox
AngularJS comments form
HubSpot Odometer Quicktest
Starting out with Ember.JS
CSS3 loading spinner
Processing.js Playground
Create amazing blog posts with AI!

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!