Tag: reactjs

Categories
Web Development

How to use Google Typescript Style Guide in a ReactJS project

gts is Google’s TypeScript style guide, and the configuration for formatter, linter, and automatic code fixer. No lint rules to edit, no configuration to update, no more bike shedding over syntax. there are a few configurations to use it in a ReactJS project and I logged here:

1. Create a new React project with the TypeScript template

%npx create-react-app client-demo --template typescript
%cd client-demo
%yarn

2. Add and initiate gts into the project

Before adding gts, please backup your tsconfig.json file because gts will generate a new one overwriting it.

Execute the below command, it will prompt if you want to overwrite the existing “tsconfig.json”, just select “y” here.

%npx gts init

We have installed ReactJS and gts in our project, however, if you try starting the project with “yarn start” now, you will encounter the below error due to the eslint setting conflicts between reactjs and gts, we need to do some extra work to solve it.

3. Restore tsconfig.json changed by gts

The tsconfig.json file overwritten by gts is like this:

{
  "extends": "./node_modules/gts/tsconfig-google.json",
  "compilerOptions": {
    "rootDir": ".",
    "outDir": "build"
  },
  "include": [
    "src/**/*.ts",
    "test/**/*.ts"
  ]
}

Replace the above with our backup file, just keep the first “extends” line,

{
  "extends": "./node_modules/gts/tsconfig-google.json",
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

4. Eslint settings

Install required eslint plugins:

%yarn add -D eslint-plugin-react eslint-plugin-node eslint-plugin-prettier

Update eslintrc.json:

/* This is original created by gts */
{
  "extends": "./node_modules/gts/"
}

To:

{
  "extends": [
    "./node_modules/gts/",
    "plugin:react/recommended"
  ],
  "env": {
    "browser": true,
    "jest": true
  }
}

Now, you have completed all the above four-step settings and can run ReactJS successfully.

There is one more optional setting I would recommend is adding husky pre-commit check so the system will execute gts check automatically when committing your code every time.

1. Install husky

npx husky-init && yarn

2. Edit “./husky/pre-commit” file

Replace "npm test" as "./node_modules/.bin/gts check"

All done, now the system will do “gts check” before committing your code.

Thanks for reading, please comment and let me know if you have any questions.

Categories
Web Development

Customize Zurb Foundation CSS in ReactJS

Use Zurb Foundation Layout Framework in ReactJS project and customize CSS by your requirements.

Add Foundation into your ReactJS project

Add foundation-sites and jquery into your project, the reason for adding jQuery is there are some Foundation javascript animations require Foundation initiation using jQuery.

$npm i foundation-sites jquery

Copy the default setting sass file from foundation-sites to your project, and you can customize any elements styles in _settings.css later.

$cp node_modules/foundation-sites/scss/settings/_settings.scss _settings.scss

Edit _settings.scss

...

@import 'util/util';  

// Change the above line to follow:
@import '~foundation-sites/scss/util/util';

...

Include the default settings in your sass file, then you can use the foundation HTML class in your JSX file.

// App.scss
@import "settings";
@import "~foundation-sites/scss/foundation";
@include foundation-everything;

// Example of changing the top bar background colour
.top-bar {
  background: #ff0000;
  .menu {
    background: #ff0000;
  }
}

There are some Foundation components using javascript so you need to activate the foundation HTML code by initiating it as below

import React, {useCallback, useEffect} from 'react';
import $ from 'jquery';
import Foundation from 'foundation-sites';

export default function () {

    const foundationTopNav = useCallback(node => {
        if ( node !== null ) {
            $(node).foundation();  // Initiate Foundation code at here.
        }
    })

    return (
        <div ref={foundationTopNav}>
            <div className="title-bar" data-responsive-toggle="responsive-menu" data-hide-for="medium">
                <button className="menu-icon" type="button" data-toggle="responsive-menu"></button>
                <div className="title-bar-title">Menu</div>
            </div>
            <div className="top-bar" id="responsive-menu">
                <div className="top-bar-left">
                    <ul className="dropdown menu"  data-responsive-menu="drilldown medium-dropdown">
                        <li className="menu-text">Site T1itle</li>
                        <li>
                            <a href="#">One1</a>
                            <ul className="menu vertical">
                                <li><a href="#">One</a></li>
                                <li><a href="#">Two</a></li>
                                <li><a href="#">Three</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Two</a></li>
                        <li><a href="#">Thre1e</a></li>
                    </ul>
                </div>
                <div className="top-bar-right">
                    <ul className="menu">
                        <li><input type="search" placeholder="Search" /></li>
                        <li>
                            <button type="button" className="button">Search</button>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    )
}