Learning to Create App Components with Create React App

Note: This Part 2 post is continuation from the previous post React App Development Setup on MacOs. This post is work-in-progress learning-note and still in active development and updated regularly.

In the previous learning-note post Learning to Work With React Components, how to build a simple react component using run time <script> in a HTML file were discussed. Such an approach is useful for small applications or as learning / testing a component snippets but is resource taxing and painfully slow.

The main objective of this post is to get familiarize with create react app package, learn to create small components and wired into a single container component to pass into ReactDOM.render() function to render to the browser DOM for display.

Set Up & Environment

React app development environment used in this post has been described in a previous post.

Step 1: Install Create React App Package

This project was created in react-projects folder described in previous post. The create-react-app npm package was installed as follows:

#! install app in project folder
create-react-app blog-post

The blog-post project was successfully created as shown in screenshot below:

#! app install successfully
Success! created blog-post app ...
.....
Happy hacking!
Step 2: Start React App Server

To ensure that the app installation was successful, start React App Development Server as shown below:

#! move to project directory
cd blog-post

#! start app
npm start

If now error, following message is displayed in the browser screen:

#! project created successfully
Compiled successfully!

 You can now view learn-react in the browser.
 Local:  http://localhost:3000/
 ...
 
Happy hacking!
Step 3: React Developer Tools

The React Developer Tools by React, a Firefox add-ons was installed on my Machine. Like wise React Developer Tools for Chrome was installed in my Chrome browser. These tools allow to inspect React Component hierarchies, elements, props, state & DOM output.

Creating the Components

In a previous post, two react components Site Header and Static Blog Post were created using ES6 Class features. React components can be created using simple JS functions, referred as functional component, which was discussed briefly in Learning ReactJs – A Basic Overview post. In this project, both the class and functional components will be used.

Step 1: Re-organize Files in SRC Folder

File structures of React App is described in previous post.To avoid file cluttering the src/ folder was organized as shown below.

#! File structure
blog-post/
  ....
  ....
  public/
  ....
  src/
    App.css
    App.js
    index.css
    index.js
    image/
       headerimg.jpg
    components/
        Header.js
        Nav.js
        BlogPost.js
        Footer.js

A new src/components/ folder was created to hold all newly created components files. For images, src/image folder was created. The mock up, HTML markup, components code snippets and styles were used from previous post. For creating the Header, Nav, BlogPost and Footer components, the same code used in the previous post were used.

Step 2: Edit Index File

To start fresh, all the files except index.css, index.js, App.js and App.css were deleted. The index.js files was modified as shown below:

// src/Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));
Step 3: Edit App.js & App.css Files

The original App.js file is shown in the previous post. The App.js file was edited between the required return () methods <div></div> (shown in lines: 9-18 in previous post) except a place holder (line 10) below.

// src/App.js (modified)
import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    return (
      <div>
         //Header component goes here
          <p>Welcome to React</p> 
         </div>
    );
  }
}

export default App;

For styling the components, basic styles from Learning to Work With React Components were copied to the App.css. Then the App.css file was linked to App.js by import './App.css'; statement (line 3)

Step 4: Header Component

The highlighted snippets (lines:2-13) was cut from the SiteHeader component from the previous post and pasted as shown below (lines: 4-14).

// src/components/Header.js
import React, { Component } from "react";

class Header extends Component {
   render() {
      return (
         <div className="site-header">
            <div className="site-title-text">
	      <h1 className="site-title">My React Blog</h1>
	    </div>
         </div>
      );
   }
}
export default Header;

The file was linked to App.js component, shown below in final App.js file (Step 8) with import keyword (line 5) and the <Header /> component was called (line 15) inside return() method, replacing the filler content (lines: 9-10, Step 3).

Step 5: The Nav Component

The highlighted snippets (lines: 2-15) were copied from Nav component from previous post and pasted as shown below (lines: 4-16).

// src/components/Nav.js
import React, { Component } from "react";

class Nav extends Component {
   render() {
      return (      
        <div className="main-menu">
	     <ul className="main-nav">
	       <li className="active">Home</li>
	       <li>About</li>
	       <li>Contacts</li>
	   </ul>		
       </div>
      );
   }
}
export default Nav;

The file was linked to App.js component, shown below in final App.js file (Step 8) with import keyword (line 6) and the <Nav /> component was called below <Header /> component as shown in 16.

Step 6: The BlogPost Component

The highlighted snippets shown below (lines: 8-20) were copied from BlogList component from the previous post (lines: 15) and reorganized the content as shown below.

// src/components/BlogPost.js
import React, { Component } from "react";

class BlogPost extends Component {
   render() {
      return (
      <div>
           {/* .post-1 -*/}
	   <div id="main" className="site-main" role="main">
	   <header className="entry-header">
	   <div className="entry-title">Hello World </div>		
	   </header>{/* .entry-header */}
	  <div className="entry-meta">
	  Written by : Blake Shelton. Posted on: October 20, 2018. 
          File under: uncategorized.
	  </div>
	  <div className="entry-content">
	  Contrary to popular belief, Lorem Ipsum is not simply random text.
     </div>
     </div>
</div>
      );
   }
}
export default BlogPost;

The file was linked to App.js component (Step 8) as shown in line (line 7) and the <BlogPost /> component was called as shown in 19.

Step 7: The Footer Component

The following highlighted snippets (lines: 4-13) were copied from Footer component from the previous post (lines: 2-11).

// src/components/Footer.js
import React, { Component } from "react";

class Footer extends Component {
   render() {
      return (
         <div className="site-footer">
            <p>Powered by ReactJS | Content, Layout, Design: TinjureWP 
            | @2018 All Right Reserved.</p>
         </div>
      );
   }
}
export default Footer;

Similar to previous components, the file was also linked to App.js component (line 8, Step 8) and the <Footer /> component was called as shown in 20.

Step 8: Putting All Together in App.js

The App.js a container component. What this component does is to call all the four components, Header, Nav, BlogPost & Footer in the same hierarchical order. This is the only way the App component is pass to ReactDOM.render() function to display all the components.

// src/App.js
import React, { Component } from 'react';
import './App.css';

import Header from "./components/Header";
import Nav from "./components/Nav";
import BlogPost from "./components/BlogPost";
import Footer from "./components/Footer";

class App extends Component {
  render() {
    return (
     <div>
	<div>
	  <Header />
          <Nav />
	</div>
        <div>
          <BlogPost  />
          <Footer />
        </div>	
     </div>
    );
  }
}

export default App;

For styling and layout purposes, the <Header /> and <Nav /> components were combined within one <div> (lines: 14-16) and <BlogPost /> and <Footer /> components in  another <div> (lines: 18-21)

Step 9: Preview in Browser

If VS Code terminal is still running live updates, the App component loads to the browser DOM and displays as shown below. Otherwise run npm start from the project folder again to lunch the App again for browser preview.

Figure: Screenshot of blog post live update in browser preview window.
Wrapping Up

In this learning-note post, the React component from static run time <script> in a HTML file from a previous post were transferred into different react components and wired into container App component. The main objective of this post was to get familiarize with create react app package, learn to create small components and wired into a single container component to pass into ReactDOM.render() function to render to the browser DOM for display. The next step is learn how to create list react component.

NEXT: Creating a Simple Blog Listing React Component

Useful Resources and Links

While preparing this post, I have referred the following references extensively. Please to refer original posts for more detailed information.