Previous: Building Your First React App, Up: Chapter One---Getting Started [Index]
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:
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.
package.json
file.
The package.json
is a standard npm
‘manifest’ file that holds various
information about the project, such a
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:
source/
App.js
index.html
package.json
webpack.config.js
• React App Boilerplate | ||
• Advanced Boilerplate | ||
• Facebook's Create React App |
Previous: Building Your First React App, Up: Chapter One---Getting Started [Index]