React.Js Simple News Cards

This code helps you to create a simple news cards. It is written in JavaScript using the React library. It defines two components, “App” and “Article”. The “renderArticle” function is used to render the “Article” component with the data from the “articles” state object passed in as props. The “render” function is used to render the “App” component with the “Article” components rendered for each article in the “articles” state object. Finally, the “ReactDOM.render” function is used to render the “App” component to the HTML element with the ID of “app”. Overall, this code creates a web application that displays a list of articles with their categories, titles, and excerpts.

How to Create React.Js Simple News Cards

First of all, load the following assets into the head tag of your HTML document.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

Create the HTML structure for simple news cards as follows:

<div id="app"></div>

Now, style the simple news cards using the following CSS styles:

/* Base */
body {
  background: #F3F3F3;
  padding: 20px;
  font-family: "Open Sans", sans-serif;
}
.cd__main{
display: block !important;
}
/* Container */
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 90%;
  max-width: 960px;
  margin: 0 auto;
}

/* Column */
.column {
  flex-basis: 33.3333333333%;
  width: 33.3333333333%;
  padding: 0 10px;
  box-sizing: border-box;
}
@media (max-width: 900px) {
  .column {
    flex-basis: 50%;
    width: 50%;
  }
}
@media (max-width: 600px) {
  .column {
    flex-basis: 100%;
    width: 100%;
  }
}

/* Article (Component) */
.article {
  background: #FFF;
  margin: 0 0 20px;
  padding: 20px;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: 0.3s ease;
}
.article:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 4px 8px rgba(0, 0, 0, 0.2);
}
.article:active {
  box-shadow: none;
  transform-origin: center;
  transform: scale(0.98);
}
.article__category {
  display: inline-block;
  padding: 8px 10px;
  margin: 0 0 10px;
  color: #FFF;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.075rem;
  text-transform: uppercase;
}
.article__excerpt {
  color: #666;
  line-height: 1.5rem;
  font-size: 0.875rem;
}
.article__title {
  margin: 0 0 10px;
  color: #444;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.75rem;
}

Load the following scripts before closing the body tag:

<script src='https://fb.me/react-0.14.7.min.js'></script>
<script src='https://fb.me/react-dom-0.14.7.min.js'></script>

Finally, add the following JavaScript function for its functionality:

/*
  App
  <App />
*/
var App = React.createClass({ displayName: "App",
  getInitialState: function () {
    return {
      articles: {
        'article': {
          "color": "FEC006",
          "title": "Snow in Turkey Brings Travel Woes",
          "thumbnail": "",
          "category": "News",
          "excerpt": "Heavy snowstorm in Turkey creates havoc as hundreds of villages left without power, and hundreds of roads closed",
          "date": new Date() },

        'article-1': {
          "color": "2196F3",
          "title": "Landslide Leaving Thousands Homeless",
          "thumbnail": "",
          "category": "News",
          "excerpt": "An aburt landslide in the Silcon Valley has left thousands homeless and on the streets.",
          "date": new Date() },

        'article-2': {
          "color": "FE5621",
          "title": "Hail the size of baseballs in New York",
          "thumbnail": "",
          "category": "News",
          "excerpt": "A rare and unexpected event occurred today as hail the size of snowball hits New York citizens.",
          "date": new Date() },

        'article-3': {
          "color": "673AB7",
          "title": "Earthquake destorying San Fransisco",
          "thumbnail": "",
          "category": "News",
          "excerpt": "A massive earthquake just hit San Fransisco leaving behind a giant crater.",
          "date": new Date() } } };



  },
  renderArticle: function (key) {
    return /*#__PURE__*/(
      React.createElement("div", { className: "column" }, /*#__PURE__*/
      React.createElement(Article, { key: key, index: key, details: this.state.articles[key] })));


  },
  render: function () {
    return /*#__PURE__*/(
      React.createElement("div", { className: "app" }, /*#__PURE__*/
      React.createElement("div", { className: "container" },
      Object.keys(this.state.articles).map(this.renderArticle))));



  } });


/*
  Article
  <Article />
*/
var Article = React.createClass({ displayName: "Article",
  render: function () {
    var details = this.props.details,
    styles = {
      backgroundColor: '#' + details.color };


    return /*#__PURE__*/(
      React.createElement("article", { className: "article" }, /*#__PURE__*/
      React.createElement("h3", { className: "article__category", style: styles }, details.category), /*#__PURE__*/
      React.createElement("h2", { className: "article__title" }, details.title), /*#__PURE__*/
      React.createElement("p", { className: "article__excerpt" }, details.excerpt)));


  } });


ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.querySelector('#app'));

That’s all! hopefully, you have successfully created the React.Js Simple News Cards. If you have any questions or suggestions, feel free to comment below.