Component Props

Developer
Ruslan Marin
Size
3,113 Kb
Views
14,168
  1. Component Props Previews
  2. Component Props HTML Codes
  3. Component Props CSS Codes
  4. Component Props JS Codes

How do I make an component props?

What is a component props? How do you make a component props? This script and codes were developed by Ruslan Marin on 07 December 2022, Wednesday.

Component Props Previews
IQ Test

Component Props - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Component Props</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="root"></div> <script src='https://npmcdn.com/[email protected]/dist/react.min.js'></script>
<script src='https://npmcdn.com/[email protected]/dist/react-dom.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Component Props - Script Codes CSS Codes

body { background: rgba(0, 102, 255, .38); font-family: sans-serif;
}
p { margin: 0 0 1em;
}
article { background: #fff; border: 1px solid rgba(0, 89, 181, .82); width: 50em; margin: 0 0 .5em; box-shadow: 2px 2px 5px -1px rgb(0, 81, 202); padding: 0.5em 1em;
}
.header { text-align: left;
}
.content { text-align: left;
}
.news-author { font-weight: bold; color: #007ddc;
}
.news-text { font-style: italic;
}
.none { display: none !important;
}

Component Props - Script Codes JS Codes

"use strict";
var Article = React.createClass({ displayName: "Article", render: function render() { var article = this.props.data; return React.createElement( "article", { className: "content" }, React.createElement( "span", { className: "news-author" }, article.author, ": " ), React.createElement( "span", { className: "news-text" }, article.text ) ); }
});
var News = React.createClass({ displayName: "News", render: function render() { var data = this.props.newsdata; var newsTemplate; if (data.length > 0) { newsTemplate = data.map(function (item, index) { return React.createElement(Article, { data: item }); }); } else { newsTemplate = React.createElement( "p", null, "No news" ); } return React.createElement( "div", null, React.createElement( "div", null, newsTemplate ), React.createElement( "div", { className: data.length > 0 ? "" : "none" }, "Всего новостей: ", data.length ) ); }
});
var Comments = React.createClass({ displayName: "Comments", render: function render() { return React.createElement( "p", { className: "content" }, "No comments yet" ); }
});
var newsData = [{ author: "RM", text: "Something has happened" }, { author: "RM", text: "Something else has happened" }, { author: "Admin", text: "All our servers are down" }];
var App = React.createClass({ displayName: "App", render: function render() { return React.createElement( "section", null, React.createElement( "h3", { className: "header" }, "News" ), React.createElement(News, { newsdata: newsData }), " ", React.createElement(Comments, null) ); }
});
var container = document.getElementById('root');
ReactDOM.render(React.createElement(App, null), container);
Component Props - Script Codes
Component Props - Script Codes
Home Page Home
Developer Ruslan Marin
Username marinru
Uploaded December 07, 2022
Rating 3
Size 3,113 Kb
Views 14,168
Do you need developer help for Component Props?

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!

Ruslan Marin (marinru) Script Codes
Name
Rotating Cube with p5.js
BnW
SimplePager
Vue 001. Hello World
P5.js Clock
Simple Component Example 2
Vue.js User Input
Sidescroller with p5.js
Component State
Vue.js Attribute Binding
Create amazing SEO content 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!