Previous: , Up: Chapter One---Getting Started   [Index]


2.1.2 React Development Workflow

In even the most basic scenarios, we want a development workflow that allow us to do the following:

With this in mind, the basic project structure for a React project contains the following:

  1. A source folder, to contain all your JavaScript modules.
  2. An index.html file.

    In React applications, the HTML page tends to be almost empty. It is responsible only for loading the application’s JavaScript and providing a ‘div’ (or any other element, actually) that is used by React to render the application’s components into.

  3. A package.json file.

    The package.json is a standard npmmanifest’ file that holds various information about the project, such a

  4. A module packager or build tool, which will be used for JSX transformation and module/dependency bundling.

    The usage of modules helps organize JavaScript code by splitting it into multiple files, each one declaring its own dependencies. The module bundler then automatically packs everything together in the correct load order.

    There are a lot of tools that handle this intermediary step, including

    among others. You can easily find recipes for React in any of those tools, but in general, the React community has adopted webpack as the preferred tool for this job. At its core, webpack is a module bundler, but it can also put the source code through loaders that can transform and compile it.

Here is an outline of a minimum project files and folders structure:


Previous: , Up: Chapter One---Getting Started   [Index]