2.1.2 React Development Workflow

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

• Write JSX and transform it into regular JavaScript on the fly
• Write code in a module pattern
• Manage dependencies
• Bundle JavaScript files and use source maps for debugging

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 npm ‘manifest’ file that holds various information about the project, such a

   • name,
   • description,
   • information about the author, etc.
   • It lets the developer specify dependencies (that can get automatically downloaded and installed) and define script tasks.
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

   • Grunt,
   • Gulp,
   • Brunch,
   • Webpack

   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:

• Project
  • source/
    • App.js
  • index.html
  • package.json
  • webpack.config.js