phongvh

/*
* Convert a number into a string represents Vietnamese Money format (1,000 đ)
*
* @param A number
* @return A string represents Vietnamese Money format (1,000 đ)
*/
function formatMoney(number) {
    if (!number) return number;
    number = number.toString().replace(/[^\d\.]/g, '');

phongvh

variables:
  S3_BUCKET_PRODUCTION: "react101.com"
  S3_BUCKET_DEVELOPMENT: "react101-dev"
  CLOUDFRONT_DISTRIBUTION_ID: [FILL THIS YOURSELF]

deploy production:
  stage: build
  image: nikolaik/python-nodejs:latest
  script:
  - yarn

phongvh

#folder for storing cert
mkdir -p ~/letsencrypt/{etc,lib}

# Run the Let's Encrypt client via Docker
docker run -it --rm --name letsencrypt \
  -v "~/letsencrypt/etc:/etc/letsencrypt" \
  -v "~/letsencrypt/lib:/var/lib/letsencrypt" \
  quay.io/letsencrypt/letsencrypt:latest \
  --agree-dev-preview \
  --server  https://acme-v01.api.letsencrypt.org/directory \

phongvh

/* Functional */
// Version free

// Bad practice
export default function FunctionalComponent(props) {
  return <h1>Hello, {props.name}</h1>
}

// Good practice
export default const FunctionalComponent = (props) => <h1>Hello, {props.name}</h1>

phongvh

// Pseudo code
class Component {
  let state = {} // private
  var props = {}
  var propTypes = {}
  var contextTypes = {}
  
  // Methods
  
  constructor(props, context, updater){

phongvh

/************
OLD WAY
************/
<button className="btn btn-lg btn-success add-to-cart">
  <img src="/public/images/ic-check.svg" alt="" /> Vote
</button>

/************
NEW WAY: Button.js
************/

phongvh

# Git config
https://git-scm.com/docs/git-config

# Revert to previous checkout but keep history
git read-tree -u --reset <hash>
git commit

# Checkout a pull github request
git fetch $REMOTE pull/$PR_NUMBER/head:$BRANCHNAME
git checkout $BRANCHNAME

phongvh

Visual Studio Using Guide

Settings (Cmd + ,)

{
"explorer.confirmDelete": false,
"editor.tabSize": 2,
"files.autoSave": "onFocusChange",
"editor.wordWrap": "on",
"files.trimTrailingWhitespace": true,
"editor.renderWhitespace": "boundary",

phongvh

class SampleComponent extends Component {
  render() {
    let classes = ['btn', 'btn-primary'];
    classes.push('active');
    return <Button className={classes.join(' ')}>Submit</Button>;
  }
}

phongvh

Installation

npm install --save-dev eslint-config-react-app babel-eslint eslint eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react

.eslintrc file

module.exports = { "extends": "react-app", "rules": { "jsx-a11y/href-no-hash": "off", "semi": [1, "always"] }