NOTE: Learn React — Part 1

NOTE: 0017 — Wednesday 13 September 2017

In this post, we’ll be focusing on building apps with React.

Reason for this?

For one reason, and one reason only:

React really shines when your data changes over time.

This is a note to breakdown the React JS Crash Course by Traversy Media in his video: https://www.youtube.com/watch?v=A71aqufiNtQ

What you’ll need:

• Node.js installed
• Understand how to use Node.js commands
• Link to React website for information https://facebook.github.io/react/
• Text Editor — Up to you as to which program you use — Brackets, Atom, Sublime Text, etc.

PROCESS

STEP 1 — Getting started with React / Installation

After you have node.js installed and up and running, go to https://facebook.github.io/react/docs/installation.html where you’ll find the code to install React straight through Node.js globally:

1. Open Node.js
2. Type:

npm install -g create-react-app

3. Find the folder you want to place your project in. You can use:

c: or d: to switch between hard drives

4. Once you’ve found the folder, you type in the command ‘create-react-app’ space ‘yourprojectname’. One thing to note is that the project name cannot have any capital letters:

create-react-app projectnamehere

5. Hit enter, and this will load.

6. Type:

cd projectnamehere

7. Type:

npm start

8. This will open your application in a localhost website!

STEP 2 — Opening your project

Use your text editor to open up your project you’ve just created.

• In ‘package.json’, you’ll find the version of React you’re using and the script commands for running the application.
• In the ‘public’ folder, you’ll find ‘index.html’ all set up for you. Here, you can delete the comments to make the code tidier.
• In the ‘index.html’ file, the one thing to know is that the <div> has the id of “root” where the application will be rendered.
• You can also change the name of the application’s tab on the browser in the <title> tags to the project’s name.

STEP 3 — Where React Sits

In our src folder, all of our React stuff goes in here.

index.js

• Imports React, ReactDOM and the App component
• It also renders the App to the “root” <div> of the index.html file

App.js

• Is our gateway to our main App component
• Imports React, App.css
• Can delete the logo that originally sits there
• Has a class called ‘App’ which extends the Component, with a render function which returns the JSX
• When returning elements in the render, everything has to sit in ONE main div.
• Can have as many elements inside the main div
• Can delete everything inside the main div to start
• Can delete everything inside the ‘App.css’ file
• Delete ‘logo.svg’

STEP 4 — Setting up to Start

Open the web browser (Google Chrome) to see changes you make as well as the inspector (console).

This is a blank React Application that you’ve just set up.

STEP 5 — Let’s Start!

For this main App component, we should use it as a placeholder for all of our smaller components. We can import them and place them within the render function.

Therefore, we should have a folder inside our ‘src’ folder called ‘Components’.

Create a new file within the ‘Components’ folder called ‘Projects.js’. It will be responsible for listing all of our projects.

Copy everything from within ‘App.js’ because we need that same basic format in ‘Projects.js’. We don’t need the imported CSS file and must change all of the ‘App’ names to ‘Projects’.

Then go back to ‘App.js’ to import the ‘Projects’ component. Below is ‘App.js’

import React, { Component } from 'react';
import Projects from './Components/Projects';
import './App.css';
class App extends Component {
  render() {
    return (
      <div className="App">
        My App
        <Projects />
      </div>
    );
  }
}
export default App;

You can also add properties (props) by going into the element and creating it in the tag:

<Projects test="Hello World" />

Then in the ‘Projects.js’:

import React, { Component } from 'react';
class Projects extends Component {
  render() {
    return (
      <div className="Projects">
        My Projects
        {this.props.test}
      </div>
    );
  }
}
export default Projects;

It will then render:

My App
My ProjectsHello World

STEP 6 — States

All of our projects are going to be held in states. That’s where our data needs to be held. Usually, we would need to fetch it from some API or database and then put it in our state, but we’re just going to put the data right in our state.

So first we want to create a ‘constructor’. So right above our render in ‘App.js’, we add in a constructor:

import React, { Component } from 'react';
import Projects from './Components/Projects';
import './App.css';
class App extends Component {
  constructor() {
    
  }
  render() {
    return (
      <div className="App">
        My App
        <Projects test="Hello World" />
      </div>
    );
  }
}
export default App;

This is where we want to define our initial states / state keys:

constructor() {
    super();
    this.state = {
    }
}

In the state, we want our projects to be an array of objects:

constructor() {
    this.state = {
      projects: [
        {
          title: 'Business Website',
          category: 'Web Design'
        },
        {
          title: 'Social App',
          category: 'Mobile Development'
        },
        {
          title: 'Ecommerce Shopping Cart',
          category: 'Web Development'
        }
      ]
    }
  }

We want to take this state and pass it into <Projects /> as a property. So basically, you want everything at the top in your application in the state, and then pass it down into other components through properties. The data should be immutable. It should be from the top, down.

We can render the projects through the property:

<Projects projects={this.state.projects} />

But when we refresh the page, it will show an error, because we hadn’t called the ‘super( );’ function. So make sure to add that in first in the ‘constructor( )’ method.

Then in ‘Projects.js’, between the render and return function, add:

console.log(this.props);

But it will only show the projects in the console like so:

We can now access the data through our ‘Projects’ component.

Now, when you have an array of objects like this, you usually want to create a separate component for each individual item and then you want to map through those projects and output that component.

So, we’re going to create a new component in the ‘Components’ folder called ‘ProjectItem.js’.

Copy everything from ‘Projects.js’ and place into ‘ProjectItem.js’ where you’ll replace the specific word ‘Projects’ with ‘ProjectItem’. We’re also going to make it wrapped within an <li> list item with a className of “Project”. Like so:

import React, { Component } from 'react';
class ProjectItem extends Component {
  render() {
    console.log(this.props);
    return (
      <li className="Project">
        My Projects
      </li>
    );
  }
}
export default ProjectItem;

Now go back into ‘Projects.js’. Create a variable called “projectItems” in the render function:

let projectItems;

We’re then going to test if there is any projects coming through by using an if statement in the render function in ‘Projects.js’:

import React, { Component } from 'react';
import ProjectItem from './ProjectItem';
class Projects extends Component {
  render() {
    let projectItems;
    if(this.props.projects){
      projectItems = this.props.projects.map(project => {
        console.log(project);
      });
    }
    return (
      <div className="Projects">
        My Projects
        {projectItems}
      </div>
    );
  }
}
export default Projects;

So now each object is logged in the console. We’re getting each individual project.

Now we will comment out the ‘console.log’ function with a ‘return’ function. It will return the <ProjectItem /> component where we want to pass in each object as a property.

class Projects extends Component {
  render() {
    let projectItems;
    if(this.props.projects){
      projectItems = this.props.projects.map(project => {
        //console.log(project);
        return (
          <ProjectItem project={project} />
        );
      });
    }

We’re assigning each <ProjectItem /> with the the variable ‘projectItems’.

So now in the Projects.js return function, we are able to pass each listed project as a component into the “Projects” div. Make sure to import the ProjectItem component into ‘Projects.js’.

It’s also good to add a key property to our <ProjectItem /> element:

<ProjectItem key={project.title} project={project} />

Now, this will show an empty bullet list because we haven’t brought out the data in ‘ProjectItem.js’ return function within the <li> tag.

import React, { Component } from 'react';
class ProjectItem extends Component {
  render() {
    console.log(this.props);
    return (
      <li className="Project">
        <strong>{this.props.project.title}</strong>: {this.props.project.category}
      </li>
    );
  }
}
export default ProjectItem;

It’s better to place predetermined data in the ‘componentWillMount’ lifecycle method rather than instantiated in the ‘constructor’ method. Like so:

class App extends Component {
  constructor() {
    super();
    this.state = {
      projects: [] //is an empty array
    }
  }
componentWillMount(){
    this.setState({projects: [
      {
        title: 'Business Website',
        category: 'Web Design'
      },
      {
        title: 'Social App',
        category: 'Mobile Development'
      },
      {
        title: 'Ecommerce Shopping Cart',
        category: 'Web Development'
      }
    ]});
  }

To Summarise

We’re basically setting our state in the App component in App.js using: this.state and this.setState.

The state is called ‘projects:’ which has an array of objects (or in this case, projects)

App.js

{projects: [
      {
        title: 'Business Website',
        category: 'Web Design'
      },
      {
        title: 'Social App',
        category: 'Mobile Development'
      },
      {
        title: 'Ecommerce Shopping Cart',
        category: 'Web Development'
      }
]}

We’re passing ‘projects:’ into <Projects /> as a property by calling ‘this.state.projects’:

In App.js

<Projects projects={this.state.projects} />

Then inside ‘Projects.js’, we’re mapping through that array using the .map function:

In Projects.js

class Projects extends Component {
  render() {
    let projectItems;
    if(this.props.projects){
      projectItems = this.props.projects.map(project => {
        console.log(project);
      });
    }
    return (
      <div className="Projects">
        My Projects
        {projectItems}
      </div>
    );
  }
}

and we’re outputting a <ProjectItem /> component

class Projects extends Component {
  render() {
    let projectItems;
    if(this.props.projects){
      projectItems = this.props.projects.map(project => {
        //console.log(project);
        return (
          <ProjectItem project={project} />
        );
      });
    }
    return (
      <div className="Projects">
        My Projects
        {projectItems}
      </div>
    );
  }
}

which has each project where we output the title and category

ProjectItem.js

class ProjectItem extends Component {
  render() {
    console.log(this.props);
    return (
      <li className="Project">
        <strong>{this.props.project.title}</strong>: {this.props.project.category}
      </li>
    );
  }
}
export default ProjectItem;

Final Result of Part 1

This is a basic app that does not hold any form of interactivity. But it does present a range of basic principles used in React and allow us to understand the interconnected relationship of building components.

Next post will focus on developing an interface of adding buttons, submitting data to create new components in the application.

Because it is looking into the front end aspect of the application, I may have to develop an understanding of connecting that to back end programming (or in this case, potentially flux?).

© Emily Y Leung and Project Redback, 2017. Unauthorized use and/or duplication of this material without express and written permission from this site’s author and/or owner is strictly prohibited. Excerpts and links may be used, provided that full and clear credit is given to Emily Y Leung and Project Redback with appropriate and specific direction to the original content.

Last modified on Wednesday 13 September 2017