React Design Patterns and Best Practices

The repository contains supporting project files for the book React Design Patterns and Best Practices.

Code is organized into numbered folders corresponding to book chapters (e.g., Chapter03). Note that code for Chapter 1 and Chapter 2 is not included in the repository as they consist of basic introductory examples.

The build process automatically minifies CSS and adds vendor prefixes using Autoprefixer. You can write standard CSS, and the tool will handle cross-browser compatibility for properties like Flexbox.

Example Input:

.App {
  display: flex;
  flex-direction: row;
  align-items: center;
}

Example Output (after post-processing):

.App {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
          align-items: center;
}

Note: There is currently no support for CSS preprocessors like Less or sharing variables across CSS files.

The project follows a standard Create React App structure. For the project to build successfully, the following files must exist with these exact names:

• index.html: The page template.
• favicon.ico: The browser tab icon.
• src/index.js: The JavaScript entry point.

Key Rules:

• Processing: Only files inside src are processed by Webpack. To ensure your JS and CSS files are bundled, they must be placed inside src.
• Subdirectories: You can create subdirectories within src to organize your code.
• Top-level directories: You can create directories at the root level (outside src), but they will not be included in the production build (useful for documentation).

my-app/
  README.md
  index.html
  favicon.ico
  node_modules/
  package.json
  src/
    App.css
    App.js
    index.css
    index.js
    logo.svg

The build system automatically minifies CSS and adds vendor prefixes using Autoprefixer. You can write standard CSS, and the build process will handle cross-browser compatibility (e.g., adding -webkit- or -ms- prefixes) automatically.

/* Input */
.App {
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* Output (automatically prefixed) */
.App {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* ... other prefixes ... */
}

The project follows a standard structure. For the application to build correctly, the following files must exist with these exact filenames:

• index.html: The page template.
• favicon.ico: The browser tab icon.
• src/index.js: The JavaScript entry point.

Important Rules:

• Place all JS and CSS files inside the src directory. Webpack only processes files within src. If files are outside src, they will not be included in the build.
• You can create subdirectories inside src for organization.
• You can create top-level directories (outside src) for non-build assets like documentation, but they will not be included in the production build.

my-app/
  README.md
  index.html
  favicon.ico
  node_modules/
  package.json
  src/
    App.css
    App.js
    index.css
    index.js
    logo.svg

The build system automatically minifies CSS and adds vendor prefixes using Autoprefixer. You can write standard CSS, and the build process will handle cross-browser compatibility (e.g., adding -webkit- or -ms- prefixes) automatically.

/* Input CSS */
.App {
  display: flex;
  flex-direction: row;
  align-items: center;
}

/* Output CSS (automatically prefixed) */
.App {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  flex-direction: row;
  /* ... other prefixes ... */
}

While lint errors appear in the terminal and browser console, you can view them directly in editors like VS Code, Atom, or Sublime Text by installing an ESLint plugin for your editor.

For Atom linter-eslint users, ensure the 'Use global ESLint installation' option is checked and that your package.json contains the following configuration:

{
  "eslintConfig": {
    "extends": "./node_modules/react-scripts/config/eslint.js"
  }
}

To support this, you must install the following packages globally:

npm install -g eslint babel-eslint eslint-plugin-react eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-flowtype

The project uses Webpack to handle CSS. To associate a stylesheet with a component, import the CSS file directly inside the JavaScript file.

Example:

Button.css:

.Button {
  padding: 20px;
}

Button.js:

import React, { Component } from 'react';
import './Button.css';

class Button extends Component {
  render() {
    return <div className="Button" />;
  }
}

export default Button;

Benefits and Limitations:

• Development: Styles reload on the fly as you edit them.
• Production: All CSS files are concatenated into a single minified .css file.
• Portability: This approach uses Webpack-specific semantics. If you need to migrate to a different build tool later, consider putting all CSS in src/index.css and importing it from src/index.js.

The project uses Webpack to handle assets. To associate a CSS file with a JavaScript component, import the CSS file directly inside the JavaScript file.

Example:

1. Create Button.css:

.Button { padding: 20px; }

2. Import it in Button.js:

import './Button.css';

class Button extends Component {
  render() {
    return <div className="Button" />;
  }
}

Note: This approach makes your code less portable to build tools other than Webpack. If you want to avoid Webpack-specific semantics, you can place all CSS in src/index.css and import it in src/index.js.

import React, { Component } from 'react';
import './Button.css';

class Button extends Component {
  render() {
    return <div className="Button" />;
  }
}

You can import static assets like images and fonts directly into your JavaScript modules. Webpack will process the import and return a string representing the final URL/path of the asset in the compiled bundle. This allows you to use the imported variable in src attributes or CSS url() functions.

Note: This is a Webpack-specific feature and may not be portable to environments like Node.js or Browserify.

import React from 'react';
import logo from './logo.png'; // Webpack returns the final path string

function Header() {
  return <img src={logo} alt="Logo" />;
}

export default Header;

To add new libraries (such as react-router) to your project, use npm install with the --save flag:

npm install --save <library-name>