React JS add project
How do I make an react js add project?
What is a react js add project? How do you make a react js add project? This script and codes were developed by Tushar Mehrotra on 16 September 2022, Friday.
React JS add project - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>React JS add project</title>
</head>
<body> <div id="root"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/node-uuid/1.4.8/uuid.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
React JS add project - Script Codes JS Codes
"use strict";
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; }
// Component to add project
var AddProject = function (_React$Component) { _inherits(AddProject, _React$Component); function AddProject(props) { _classCallCheck(this, AddProject); var _this = _possibleConstructorReturn(this, _React$Component.call(this, props)); _this.state = { newProject: {} }; return _this; } AddProject.prototype.handleSubmit = function handleSubmit(e) { if (this.refs.title.value == "") { alert("Please enter a project"); } else { this.setState({ newProject: { id: uuid.v4(), title: this.refs.title.value, category: this.refs.category.value } }, function () { this.props.addProjects(this.state.newProject); }); } e.preventDefault(); }; AddProject.prototype.render = function render() { var categoryOptions = this.props.categories.map(function (category) { return React.createElement( "option", { key: category, value: category }, category ); }); return React.createElement( "form", { onSubmit: this.handleSubmit.bind(this) }, React.createElement( "div", null, React.createElement( "label", null, "Title" ), React.createElement("input", { type: "text", ref: "title" }) ), React.createElement( "div", null, React.createElement( "label", null, "Category" ), React.createElement( "select", { ref: "category" }, categoryOptions ) ), React.createElement( "button", { type: "submit" }, "Submit" ) ); }; return AddProject;
}(React.Component);
AddProject.defaultProps = { categories: ['Web Development', 'Web Design', 'Mobile Development']
};
/* Add Project Component ends */
/* App Component Starts */
var App = function (_React$Component2) { _inherits(App, _React$Component2); function App(props) { _classCallCheck(this, App); var _this2 = _possibleConstructorReturn(this, _React$Component2.call(this, props)); _this2.state = { projects: [] }; return _this2; } App.prototype.handleAddProjects = function handleAddProjects(project) { var projects = this.state.projects; projects.push(project); this.setState({ projects: projects }); }; App.prototype.render = function render() { return React.createElement( "div", null, React.createElement(AddProject, { addProjects: this.handleAddProjects.bind(this) }), React.createElement(Projects, { projects: this.state.projects }) ); }; return App;
}(React.Component);
/* App Component ends */
/* Projects Component Start */
var Projects = function Projects(_ref) { var projects = _ref.projects; return React.createElement( "div", null, React.createElement(Project, { projects: projects }) );
};
/* Projects Component ends */
var Project = function Project(_ref2) { var projects = _ref2.projects; var project = projects.map(function (project) { return React.createElement( "p", null, project.title, " - ", project.category ); }); return React.createElement( "p", null, project );
};
ReactDOM.render(React.createElement(App, null), document.querySelector("#root"));
![React JS add project - Script Codes](http://shots.codepen.io/MTushar/pen/LWrLYL-512.jpg)
Developer | Tushar Mehrotra |
Username | MTushar |
Uploaded | September 16, 2022 |
Rating | 3 |
Size | 3,543 Kb |
Views | 18,216 |
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 |
Github profile finder | 2,514 Kb |
Codepen Pens | 3,066 Kb |
Full Page JS jQuery Plugin | 2,029 Kb |
Show Hide Alert with Angular JS | 2,360 Kb |
Animated Responsive Skill Bar | 2,312 Kb |
AngularJS Form Validation | 2,896 Kb |
Random Programming Quote Generator | 5,855 Kb |
Form Email validation | 2,148 Kb |
Hamburger menu animation | 2,469 Kb |
Angular ToDo App | 2,863 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 |
Progressively reveal dots on a Bezier curve | GreenSock | 2,489 Kb |
Foundation 5 Menu - Accessibility | Xporter | 1,999 Kb |
Monochrome Form | AlienPiglet | 3,096 Kb |
404 Page | Saransh | 2,666 Kb |
Wikipedia Viewer | Thalpha | 4,426 Kb |
Find The Penguin | Lelder | 2,212 Kb |
Blog Concept - Single Post | Marionebl | 9,603 Kb |
Resize image | Happyhj | 1,892 Kb |
Preloader | Rikki_Sixx | 2,815 Kb |
Custom checkbox example | Capelo | 3,495 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!