create-react-app

/docs/theming/create-react-app.md

In this tutorial, we're going to customize a base react application with HEx. We're going to use create-react-app to generate the boilerplate. The only prerequesites are node and npm. We use yarn to install the packages, but it's optional.

  1. Install create-react-app

    yarn global add create-react-app # npm install -g create-react-app
    
  2. Create a new cool project!

    create-react-app my-cool-project
    cd my-cool-project
    
  3. Add SASS to the react project. All the required steps are described in this oficial guide

  4. Add HEx to the project

    yarn add @bitnami/hex # npm install @bitnami/hex
    
  5. Create the src/_theme.scss file, import the lib.scss and add all the required customization. The lib.scss file imports all the theming mixins. The following example modifies several parameters:

    // src/_theme.scss
    @import './node_modules/@bitnami/hex/lib';
    
    // Update the base color palette:
    @include colorTheme(
     (
       'brand': #4fa1f2
     ),
     $color-interval // Use the default value
    );
    
    // Update the font-size and the line-height
    @include baseSizing(
     $base-type-zoom,
     1.15em,
     $scale,
     1.45
    );
    
    // Update the font families
    $body: Arial, Verdana;
    @include fontFamilies(
     $body,
     Arial,
     Consolas
    );
    
    // Modify the grid
    @include gridConfig(
     1500px,
     10,
     2em
    );
    
  6. Import the _theme.scss and the main HEx file in your src/index.scss:

    // src/index.scss
    @import './theme';
    @import './node_modules/@bitnami/hex/src/index';
    
  7. Start the project and check it:

    yarn start # npm start