react.js quick start

Create new react project

npx create-react-app my-app
cd my-app
npm start

Set up environment

Create a .env file. Suggested entries:

# Allow relative imports
NODE_PATH=src/
# Override default port
PORT=5000
# Connect to API
REACT_APP_API_ROOT=http://localhost:3000

Note that the REACT_APP_* syntax is required for any custom environment values. From within the application, you can read them from process.env, p.e. process.env.REACT_APP_API_ROOT. For more information, see here.

Set up page title

Change the HTML <title> in /public/index.html
Change title and abbreviation in /public/manifest.json

Install Dependencies

Install from command line with npm install package-name

Suggestions:

Install Linter

npm install eslint

To use the default linting rules from create-react-app, add the following to your package.json:

"eslintConfig": {
	"extends":"react-app"
}

Organizing your Components

This is the recommended organization of your /src folder:

/actions: Sync and async actions for your components
/assets: Styles and images you need to package
/components: All components
/reducers: All reducers, reacting to sync actions to update the store
/selectors: Store filters
/store: Main store file
/util: API utilities for AJAX access, service workers, and other utilities
/index.js: Main entry point for the file