React Design Patterns and Best Practices

The project follows a standard structure. For the build to succeed, 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:

• All JS and CSS files must be placed inside the src directory for Webpack to process them.
• You can create subdirectories inside src for organization.
• Top-level directories (outside src) will not be included in the production build and are suitable 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 project follows a standard structure where Webpack processes files. For the project to build correctly, the following files must exist with these exact names:

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

Key Rules:

• Put all JS and CSS files inside src/: Webpack only processes files inside src. If they are outside, they won't be included in the build.
• Top-level directories: You can create directories at the root (outside src), but they will not be included in the production build (useful for documentation).

Example structure:

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

The project automatically minifies CSS and adds vendor prefixes using Autoprefixer. You can write standard CSS, and the build process will ensure compatibility with different browsers.

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;
      -ms-flex-align: center;
          align-items: center;
}

Note: Currently, there is no support for CSS preprocessors like Less or sharing variables across CSS files.

While lint errors appear in the terminal and browser console by default, you can enable them in your editor (like VS Code or Atom) by installing an ESLint plugin.

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

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

Additionally, 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

To associate a CSS file with a JavaScript component, import the CSS file directly inside the JavaScript file. This allows Webpack to handle the dependency and enables hot-reloading in development.

Note: This approach uses Webpack-specific semantics, making the code less portable to other build tools. If you prefer standard CSS, you can place all styles 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" />;
  }
}

Webpack supports relative module references in CSS files. When you use url() with a path starting with ./, Webpack replaces it with the final path from the compiled bundle. If the file is missing, it will trigger a compilation error.

.Logo {
  background-image: url(./logo.png);
}

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

npm install --save <library-name>

While lint errors appear in the terminal and browser console, you can enable editor integration (e.g., for VS Code, Atom, or Sublime Text) by installing an ESLint plugin for your editor and ensuring your package.json includes the following configuration:

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

Note for Atom linter-eslint users: You must check the Use global ESLint installation option in the plugin settings.

Additionally, you may need to install the following packages globally:

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

Surge is a quick way to deploy your build folder.

1. Install the CLI: npm install -g surge.
2. Run surge and follow the login prompts.
3. Specify your build folder and custom domain.

Handling Client-Side Routing: If you use routers that rely on the HTML5 pushState API, rename index.html in your build folder to 200.html before deploying. This ensures that all URLs fall back to your app instead of returning a 404.

To associate a CSS file with a JavaScript component, import the CSS file directly within the .js file. This tells Webpack to include the styles in the dependency graph.

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;

Note: This approach uses Webpack-specific semantics. If you want to avoid tool-specific code, you can place all CSS in src/index.css and import it in src/index.js.

To use Bootstrap components in your React application, follow these steps:

1. Install both react-bootstrap and bootstrap via npm:

   npm install react-bootstrap --save
   npm install bootstrap@3 --save

2. Import the Bootstrap CSS files in your src/index.js:

   import 'bootstrap/dist/css/bootstrap.css';
   import 'bootstrap/dist/css/bootstrap-theme.css';

3. Import specific components in your component files (e.g., src/App.js):

   import { Navbar, Jumbotron, Button } from 'react-bootstrap';