Using React: Part 2: Working with Modules

On By Dan CoxIn code, JavaScript

Learning React

Using React

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.

Working with Modules

In the previous part, media files were imported into the project.

As a project gets more complex, it is highly recommended to place classes within their own files to better help with organization and code maintenance. These can then be imported into the “index.js” file as well.

For each of the classes in previous example, they could be broken up into their own files.

ShoppingList.js


import React from 'react';
import Item from './Item.js';

class ShoppingList extends React.Component {

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

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

export default ShoppingList;

Item.js


import React from 'react';
import checkmark from './images/checkmark.png'

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

export default Item;

index.js


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

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

Notice how ShoppingList now import Item, which now imports the checkmark image. All that “index.js” imports is ShoppingList, which now handles its own importing of the files it uses.

Such a modular approach helps to break up the code into the same components as the interface itself. Now, code can be updated or changed without needing to update all the classes.

Importing and Export Defaulting

Any use of the import expression understands only what is exported from another file. Depending on what is exported (or not), an import expression can pass variables, functions, or objects directly into their code or change their name.

When exporting multiple variables, functions, or objects, an import expression can choose to use all of them or a subset. However, the use of the combination export default constraints this.

In the above examples, the code uses export default and the name of its class to quick convey that the default export is the class itself. Nothing else is exported.

In the “index.js”, then, its import expressions can take in the object as they are, passing them from their files into the one importing them.

From Images to Emoji

The image of the checkmark is useful, but some emoji would be better. Not only would they scale with the device on which they are shown, but they would also match the font sizes of the text around them.

To safely include emoji in React, symbols needs to be enclosed in an element.

<span role="img" aria-label="checkmark">✅</span>

Along with the role attribute and an aria-label to help screen readers and other assistive technologies, a checkmark can be included.

For right now, it can be enough that the HTML around the emoji is saved as a const and then imported as part of Item. (In order to use JSX, React must be within the scope of the file. In other words, to use JSX, React has to be imported.)

Checkmark.js


import React from 'react';

const Checkmark = <span role="img" aria-label="checkmark">✅</span>;

export default Checkmark;

Item.js


import React from 'react';
import Checkmark from './Checkmark.js'

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

export default Item;

Play with the example on Repl.it!