App Component in React

This is the third part of Create react app with GraphQL in WordPress

In this part, we will build App component in src/components/App.js

Here kick on styled-components. And we use Posts and PostWidget component here. For that, we can introduce with props.

First, import CSS library, styled-componets. After that, we will import two components- Posts and PostWidget component from respective file. So, let’s write

import styled from "styled-components";
import Posts from "./components/Posts";
import PostWidget from "./components/PostWidget";

In App component, we will use render method. Here, return our defined JSX. Firstly, we design as simple. Two area in page. Details of grid can find here, https://milligram.io/#grids. So, we write here,

render() {
    return(
        <div className="row">
          <div className="column column-80">Post Archive</div>
          <div className="column column-20">Widget</div>
        </div>
    );
  }

At our App component, we will use two return. One return is used before state has any post. After return it return main component. So, our render function will be,

render() {
   if (this.props.state.length) {
    return(
        <div className="row">
          <div className="column column-80">Post Archive</div>
          <div className="column column-20">Widget</div>
        </div>
    );
  }
  return <p>Loading...</p>;
  }

At post archive, we will use posts array of state of this component. posts array map every items with render Posts. We render Posts component with props name state in this map. For clear about array map, we will read this.

However, in code it will be

{this.props.state.map(post => (
  <Posts key={post.node.id} post={post} />
))}

At Widget, we use same code. But, before array map, we will slice this array for that only first two posts render here. In code

{this.props.state.slice(0, 2).map(post => (
  <PostWidget key={post.node.id} post={post} />
))}

Lets, try styled-components.
Define Widget with styled. styled create an div tag and it styled as our defined style.

const Widget = styled.div`
  border: 1px solid gray;
  padding: 10px;
  p {
    margin-bottom: 0;
    border-top: 1px solid gray;
    }
  }
`;

Use this Widget component like this

<Widget>
   <h3>Recent posts</h3>
     {this.props.state.slice(0, 2).map(post => (
       <PostWidget key={post.node.id} post={post} />
     ))}
</Widget>

So, the final code is-

import React from "react";
import styled from "styled-components";
import Posts from "./Posts";
import PostWidget from "./PostWidget";

const Widget = styled.div`
  border: 1px solid gray;
  padding: 10px;
  p {
    margin-bottom: 0;
    border-top: 1px solid gray;
    }
  }
`;

class App extends React.Component {
  render() {
    if (this.props.state.length) {
      return (
          <div className="row">
            <div className="column column-80">
              {this.props.state.map(post => (
                <Posts key={post.node.id} post={post} />
              ))}
            </div>
            <div className="column column-20">
              <Widget>
                <h3>Recent posts</h3>
                {this.props.state.slice(0, 2).map(post => (
                  <PostWidget key={post.node.id} post={post} />
                ))}
              </Widget>
            </div>
          </div>
      );
    }
    return <div>Loading...</div>;
  }
}
export default App;

Screenshot at this point will be

Leave a Reply

Your email address will not be published. Required fields are marked *