Master ES6 Modules with Create‑React‑App: A Step‑by‑Step Setup Guide

For newcomers, setting up an ES6 development environment can be challenging because learning build tools is a large topic, but create-react-app provides a simple, low‑cost solution.

1. Ensure Node and npm are installed

Download and install Node from the official website; npm is bundled with it.

2. Install a friendly command‑line tool

On Windows, use Git Bash or Cmder instead of the default cmd. On macOS, the built‑in Terminal works, but iTerm2 with oh‑my‑zsh is recommended.

Download links: Git https://git-scm.com/downloads , Cmder http://cmder.net/ , iTerm2 http://www.iterm2.com/downloads.html , Oh My Zsh themes https://github.com/robbyrussell/oh-my-zsh/wiki/External-themes .

3. Install create-react-app

After confirming Node and npm, install globally:

Then create a project in a folder named develop:

The command creates an es6app directory, installs dependencies, and shows prompts for npm start and npm run build.

4. Understand the project structure

The generated project contains three main folders:

node_modules – stores all dependencies after running npm install based on package.json.

public – holds static assets; index.html is the entry HTML file.

src – contains source code. index.js is the JavaScript entry point, analogous to a script tag in index.html.

For learning ES6 modules, delete everything in src except index.js and start from a clean slate.

ES6 Modules

1. Importing modules

Create test.js inside src and add any simple code.

In index.js import it:

The syntax import test from './test' means: import the default export from ./test.js and bind it to the name test.

2. Exporting interfaces

Use export or export default in test.js. For example, export default { foo: 'bar' } makes the object the default export.

To import all named exports, use import * as test from './test'. The * is a wildcard, and as test assigns the collected exports to the object test.

When you log test you will see the exported members.

Named exports can also be destructured, e.g., import { bar, zcar } from './test', which extracts specific members from the default‑exported object.

This pattern is common in React code, such as import React, { Component } from 'react', showing how modules are bundled and consumed.

The ability to import react directly works because it resides in node_modules , where any installed package can be required similarly.

Overall, mastering ES6 module syntax—how to import and export—provides a solid foundation for further learning of React, Vue, or any modern JavaScript framework.