Learning React

• Part 1: Installing and Configuring
• Part 2: Understanding Render()
• Part 3: Building Classes
• Part 4: React JSX

Using React

• Part 1: Importing Media
• Part 2: Working with Modules
• Part 3: States
• Part 4: Handling Events
• Part 5: Playing with AJAX

React is a popular JavaScript library for creating user interfaces. It combines many features of JavaScript ES6 together to create a powerful way to quickly create front-end functionality.

---

Importing Media

In previous examples, the results from using React was text. Although generated through using multiple uses of render() from different React Components, it was still only text. To begin to change that, review the following code from Building Classes:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class Item extends React.Component {
  render() {
    return (
      <li>I am number {this.props.number}</li>
    );
  }
}

class ShoppingList extends React.Component {

  createItem(x) {
    return (
      <Item number={x} />
    )
  }

  render() {
    return (
      <ul>
      {this.createItem(1)}
      {this.createItem(2)}
      {this.createItem(3)}
      </ul>
    );
  }
}

ReactDOM.render(
  <ShoppingList />,
  document.getElementById('root')
);

For the Shopping List, it would make sense to be able to check off items. For that purpose, and this example, an image of a checkmark could be combined with the lists and appear before the item itself.

Src But Not Src

Placing the image in the src folder is the first step to using it as part of the React application. However, using images and other media is a little different than might be expected.

When a React application is compiled, its files are parsed and put into other files to compress and better organize them. This uses Webpack, a tool that React uses.

While it may make sense to simply include an image, for example, using a src attribute in an IMG element, it won’t actually include the image.

The reason it won’t is that React isn’t hosting the files from the src directory. It has packaged them and the relative path doesn’t exist in the package. To help React (and Webpack) with this, images can be imported like other JavaScript files.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import checkmark from './checkmark.png'

class Item extends React.Component {
  render() {
    return (
      <li><img src={checkmark} />I am number {this.props.number}</li>
    );
  }
}

Internally, React will treat the imported file as its path. This allows developers to include media files through importing them as different variable names and then use JSX to have their values set during runtime.

As part of the project package through being imported, Webpack (and React) knows where it is and will show the file correctly.

Because import paths are relative to the files, this means media can be better organized into their own directories with their paths updated in the files that import them.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import checkmark from './images/checkmark.png'

class Item extends React.Component {
  render() {
    return (
      <li><img src={checkmark} />I am number {this.props.number}</li>
    );
  }
}

class ShoppingList extends React.Component {

  createItem(x) {
    return (
      <Item number={x} />
    )
  }

  render() {
    return (
      <ul>
      {this.createItem(1)}
      {this.createItem(2)}
      {this.createItem(3)}
      </ul>
    );
  }
}

ReactDOM.render(
  <ShoppingList />,
  document.getElementById('root')
);