React - Create React App

Creating a react app was… harder than I expected, although Repl.it supported React template and even the Create React App template.

Concept of React

With React, front end can be broken down into “Components”, which allows for further uses of the function later on.

Literally, it means that parts of html is written in pieces in javascript form, so that it can be written more efficiently with lots more extensibility.

Start

Creating a react.js file starts with importing react on the very top of the file, which allows importing further elements to the file.

import React, { Component } from 'react';

In React, only a single element, a chunk can be rendered or returned. For this to be possible, if there is more than a single element, these are wrapped around the div tag. And when using the class property of Html on react, since we are working on a js file, we need to use className instead of class.

const Card = ({ name, email, id }) => {
  return (
    <div className='tc bg-light-green dib br3 pa3 ma2 grow bw2 shadow-5'>
      <img alt='robots' src={`https://robohash.org/${id}?200x200`} />
      <div>
        <h2>{name}</h2>
        <p>{email}</p>
      </div>
    </div>
  );
};

More recent updates to React allowed this to be simplified.

More on ⇒ https://blog.logrocket.com/rendering-sibling-elements-react-fragments/

As in the above, properties can be passed through to be utilized across the app. (Needs further clearance)

Create RoboFriends App

Create Card List using Loop

In order to DRY the code, instead of hard-coding all the cards with index, a card list function was created, which maps all the cards, creating an automatic loop.

const CardList = ({ robots }) => {
  return (
    <div>
      {
        robots.map((user,i) => {
          return (
            <Card 
            key={i} 
            id={robots[i].id} 
            name={robots[i].name} 
            email={robots[i].email}/>
          );
        })
      }
    </div>
  );
};

Create Search box that interacts with the Card List

The logic behind this is actually quite simple. When there is a change with the input box, event is triggered, which calls the onSearchChange function. This function changes the ‘state’ of the app, more specifically ‘searchfield’ state of the app, which is empty by default. The search field value is changed to the actual value of input that is being typed in. This searchfield state is used to create a filtered robot list, using the built in array filter function, and compares the name of the robots in the initial robot list with the search field value. And only the ones that have passed this filter is displayed on the page.

App.js

class App extends Component {
  constructor() {
    super()
    this.state = {
      robots: robots,
      searchfield: ''
    }
  }

In order for all of the above to work, the app needs to be an object that has the constructor function of state. Notice that this could only be used after using super()

onSearchChange = (event) => {
    this.setState({ searchfield: event.target.value })
  }

The state of the app can only be changed with this.setState.

render() {
    const filteredRobots = this.state.robots.filter(robot => {
      return robot.name.toLowerCase().includes(this.state.searchfield.toLowerCase());
    });
    return (
        <div className="tc">
          <h1>RoboFriends</h1>
          <SearchBox searchChange={this.onSearchChange} />
          <CardList robots={filteredRobots} />
        </div>
    ); 
  }
}

 
export default App;

And each of the components need to be exported, so that it can be used outside this file.

SearchBox.js

const SearchBox = ({ searchChange }) => {
  return (
    <div className='pa2'>
      <input 
        className='pa3 ba b--green bg-lightest-blue'
        type='search' 
        placeholder='search robots'
        onChange={searchChange} 
      />
        
    </div>
  );
};

export default SearchBox;