-
Install Node: go to https://nodejs.org and click on the Download button. You should install the LTS version. On Windows: you need to configure your PATH environmental variable.
-
Verify the Node Installation: type
node -vornpm -vin your terminal to verify. -
Install VS Code and its extentions: Install VS Code on https://code.visualstudio.com/. Install extentions including CSS Formatter, SCSS Formatter, vscode-author-generator, and TODO Highlight.
-
Set up vscode-author-generator extentions: Go to folder extensions/edwardhjp.vscode-author-generator-version/templates. Change all template files into
/** * @author "Your Name" * @create date [date] * @modify date [date] */
-
Install Yarn (Optional): Use the instruction
yarn addinstead ofnpm ito install libraries faster
The first thing your should do after cloning the repository is to type the command npm i or yarn add in the root directory to install all node external libraries.
| Script | Function |
|---|---|
| npm start | Runs the app in the development mode. Open http://localhost:3000 to view it in the browser. The page will reload if you make edits. You will also see any lint errors in the console. |
| npm build | Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best performance. See the section about deployment for more information. |
| Category | Method |
|---|---|
| Folder | Lowercase + underline. E.g. "public_related" |
| .js .jsx file | Pascal case. E.g. "MainComponent.js", "HeaderComponent.js" |
| Component variables in .jsx | Pascal case. E.g. "HeaderFirstLayer", "Main" |
| Function variables in .js .jsx | Camel case. E.g. "handleSearch", "handleSubmit", |
| Constant values in .js .jsx | Lowercase + underline. E.g. "main_margin" |
| .css .scss file | Same as .js .jsx file |
| id, class and all variables in .css .scss | Lowercase + "-", E.g. "header-border", "rank-btn" |
-
Javascript files which contain React components should be named with .jsx.
-
If the function is only used within the function component or the class component, it should be defined within that component
-
All constant variables should be defined in the
src/data/constantsfolder. -
The import parts of each .js file should be divided into two area by an empty line. One is to import library, the other one is to import our own files.
E.g
import React, { Component } from 'react'; import { connect } from "react-redux"; // division line import { setHeaderState } from '../../../redux/actions/creators/HeaderStateAction'; import './SectionButtons.scss'