ReactJS: My Getting Started Notes

Main Tools

  • NPM and Yarn
  • Webpack
  • Babel
  • JSX + ES6
  • Flux
  • Guts and Persistence (to avoid giving up or being scared)


  1. React JSX at Glance


    JSX is an XML/HTML-like syntax used by React that extends ECMAScript so that can co-exist with JavaScript/React code. The syntax is intended to be used by preprocessors to transform HTML-like text found in JavaScript files into standard JavaScript objects.

    • JSX needs transpilers like Babel to transform it into ES5 js script (link)
    • React Components are the building blocks of React (Maybe just like an Angular Directive / keep in mind that’s React is only V in MVC cmiiw).
    • React Component as a collection of HTML, CSS, JS, and some internal data specific to that component.
    • React Components can have nested components inside of them.
    • React Virtual DOM is JavaScript representation of the actual DOM.
    • React Life Cycle: 1. Signal to notify our app some data has changed 2. Re-render virtual DOM  3. Diff previous virtual DOM with new virtual DOM 4. Only update real DOM with necessary changes (sample).
    • React Virtual DOM is fast

      whenever setState is called, React creates a new virtual DOM, does the diff, then updates the real DOM

    • Life Cycle explained
      1. componentWillMount: Invoked once before the initial render.
      2. componentDidMount – Invoked once after the initial render.
      3. componentWillReceiveProps – This life cycle is not called on the initial render, but is instead called whenever there is a change to props.
      4. componentWillUnmount – This life cycle is invoked immediately before a component is unmounted from the DOM.
    • for transformation  from JSX to JS, we need to set up some sort of transformation phase as you’re developing with Webpack+Babel.
  2. Flux architecture 2.FLUX-LOGO1

    Flux is an application architecture for React utilizing a unidirectional data flow.

    • Flux unidirectional cycles that data can flow through
    • Flux is a pattern for managing data flow in your application.
    • Flux can  structure and architect React application in an efficient way.
    • Flux is great.But you don’t have to use Flux with React.

      Don’t let the complexity of Flux ruin the simplicity of React.

    • Flux Part (link)
      • Dispatcher
        • Dispatcher is used to broadcast payloads to registered callbacks.
      • Store
        • Holds the data of an application.
      • Action
        • Actions are semantic and descriptive of the action taking place.
      • View
        • Data from stores is displayed in views. Views can use whatever framework you want
    • Flux Flow
      • 1. Views send actions to the dispatcher. 2. The dispatcher sends actions to every store. 3. Stores send data to the views.
      • Different phrasing: Views get data from the stores.
        Different phrasing: Views get data from the stores.
    • Flux Sample Application flux-todomvc
      1. $ git clone && cd flux
      2. $ yarn install4.install-sample
      3. hmhmhm.. I just realize that ‘git clone’ was downloaded all samples applications instead of single todomvc app.
      4. 5.folder-app-structure
      5. Nothing is wrong, lets continue
      6. Add Flux-Shell
      7. $ cp -R examples/flux-shell examples/my-todomvc
        New Files from flux-shell (my-todomvc is our new flux-todomvc)
      9. $ cd examples/my-todomvc && yarn install9.install
      10. See “Hello world!” on browser (mine is /home/yusuf/test/flux/examples/my-todomvc).10.hellow-world.png
      11. Set up TodoMVC assets
      12. $ cp -R ../todomvc-common todomvc-common
      13. $ vim examples/my-todomvc/index.html (link)
      14. $ vim examples/my-todomvc/src/root.js (link)
      15. $ yarn run watch (under my-todomvc)15.yarn-run-watch
      16. refresh page file:///home/yusuf/test/flux/examples/my-todomvc/index.html

         The page should now have some styling and still say "Hello World!" in the center.
        The page should now have some styling and still say “Hello World!” in the center.
      17. Setting up Flux
        1. Under my-todomvc
        2. $ cd ./src && mkdir ./containers ./data ./views && touch ./containers/AppContainer.js && touch ./data/AppContainer.js ./data/TodoActionTypes.js ./data/TodoDispatcher.js ./data/TodoStore.js && touch ./root.js ./views/AppView.js18.initfiles
        3. Code for files above link
        4. asd
      18. Build
        1. $ yarn build
        2. or $ yarn run build
        3. reload file:///home/yusuf/test/flux/examples/my-todomvc/index.html from browser20.hello-from-flux.png
        4. In case you  are getting following errors while running “yarn run build” or “yarn run watch”:

          ERROR in ./~/flux/utils.js
          Module not found: Error: Cannot resolve ‘file’ or ‘directory’ ./lib/FluxContainer in /home/yusuf/test/flux/examples/my-todomvc/node_modules/flux
          @ ./~/flux/utils.js 10:27-57

          ERROR in ./~/flux/utils.js
          Module not found: Error: Cannot resolve ‘file’ or ‘directory’ ./lib/FluxMixinLegacy in /home/yusuf/test/flux/examples/my-todomvc/node_modules/flux
          @ ./~/flux/utils.js 11:23-55

          ERROR in ./~/flux/utils.js
          Module not found: Error: Cannot resolve ‘file’ or ‘directory’ ./lib/FluxReduceStore in /home/yusuf/test/flux/examples/my-todomvc/node_modules/flux
          @ ./~/flux/utils.js 12:29-61

          ERROR in ./~/flux/utils.js
          Module not found: Error: Cannot resolve ‘file’ or ‘directory’ ./lib/FluxStore in /home/yusuf/test/flux/examples/my-todomvc/node_modules/flux
          @ ./~/flux/utils.js 13:23-49

          ERROR in ./~/flux/index.js
          Module not found: Error: Cannot resolve ‘file’ or ‘directory’ ./lib/Dispatcher in /home/yusuf/test/flux/examples/my-todomvc/node_modules/flux
          @ ./~/flux/index.js 10:28-55

        5. This is how to fix errors above
          1. delete ./node_modules and re-build, is it still error ? try second way
          2. $ yarn add flux

            It will install another missing dependency
        6. $yarn run build   / $ yarn run watch
      19. reload reload file:///home/yusuf/test/flux/examples/my-todomvc/index.html from browser20.hello-from-flux
  3. Reduxredux-react

  4. Persisting  data with server APIs

Setting up Webpack + Babel KONFIGURASI-react-es6-webpack

Webpack gets every module your application needs, then packages all of those modules into one bundle file (if needed — few bundles).


yarn add webpack --dev

Flag --dev (--save-dev) says that this dependency will be saved in devDependencies in package.json and required only in development.

  • Webpack

    • Webpack is a code bundler. It takes your code, transforms and bundles it.
    • three main things Webpack need to know (basic things to setup).
      1. starting point of your application, or your root of JavaScript file
      2. which transformations to make on your code (SASS to CSS, JSX to JS etc.,)
      3. location it should save the new transformed code.
    • Webpack configurations. Conveniently, this file should be named webpack.config.js
    • webpack.config.js and be located in the root directory of our project.
    • Build example without webpack.config.js
      ./node_modules/.bin/webpack src/index.js dist/bundle.js
    • Build example using webpack.config.js

      Most projects will need a more complex setup, which is why webpack supports a configuration file.

      ./node_modules/.bin/webpack --config webpack.config.js
    • Build using npm scriptNPM-SCRIPT
    • webpack terminal commands
      • webpack -w  #watchp
      • webpack -p #minified
    • Webpack vs gulp article
    • Yarn in better NPM article, mgrating from npm to yarn
  • Babel

    Transpilers, or source-to-source compilers, are tools that read source code written in one programming language, and produce the equivalent code in another language. Languages you write that transpiled to JavaScript are often called compile-to-JS languages, and are said to target JavaScript (source).

    In terms of React, Babel is going to allow us to transform our JSX (which you’ll see soon) into actual JavaScript. What’s nice about Babel though is it can be used for much more than just JSX -> JS transformations. You can also opt into “future” versions of JavaScript (ES2015, 2016, etc)

List of transpilers:

Installing Babel

npm install --save-dev babel-core babel-loader babel-preset-react

babel-core is babel itself, babel-loader is the webpack loader we’ll use, and babel-preset-react is to get the JSX -> JS transformation going.

My Steps to the Glorious “Hello World” With ReactJS


  1. $ mkdir blog-hellojs and cd blog-hellojs
  2. $ yarn init
    • 1.yarn-Init
  3. $ yarn add react
  4. $ yarn add react-dom
    1. 4.package.json
    2. Now I have react and react-dom
  5. Now it is time to add babel power to the project
  6. $ yarn add babel-core babel-cli babel-loader babel-preset-es2015 babel-preset-react react-hot-loader –dev (the deps should be under devDependencies instead of dependencies, I made a typo on yarn add command, I wrote -dev instead of dev)
    • 5.install-babel
      check package.json out!
    • 6.test-Babel
      test to run babel using yarn (it’s a magic)
    • Now I have react, react-dom and babel (plus babel required deps for reactjs dev)
  7. Now it is time to add webpack power to the project
  8. $ yarn add webpack webpack-dev-middleware webpack-hot-middleware –dev
    • 7.webpack-json
      Accidentally remove react and react-dom from this file :V
    • The image above is missing react and react-dom, make sure you add that manually by running (somehow I just deleted react and react-dom from it and made error import command):
      • $ yarn add react
      • $ yarn add react-dom
  9. Adding webpack.config.js
    1. Multiple Entry Points
    2. Install uglifyjs-webpack-plugin
      • $ yarn add uglifyjs-webpack-plugin –dev
      • ups, no need to install uglifyjs-webpack-plugin anymore, it’s already in webpack.optimize.UglifyJsPlugin
      • 8.uglify-plugin
    3. $ touch webpack.config.js
    4. $ mkdir ./src
    5. $ touch ./src/index.js    <- ES6 JS(X) entry support
    6. mkdir ./src/assets
    7. $ mkdir ./dist <- public directory where the bundle.js will be placed
    8. $ vim  ./webpack.config.js (development)
    9. vim  ./src/index.js
      • Copy JSX sample code (hello world) from here
    10. Run webpack build using yarn
      1. $ yarn run webpack
      2. wHoAA, I got an Error, fuxk yeah… lets fight!

        ERROR in ./src/index.js
        Module parse failed: /home/yusuf/test/blog-hellojs/src/index.js Unexpected token (5:2)
        You may need an appropriate loader to handle this file type.

        You may need an appropriate loader to handle this file type.
        You may need an appropriate loader to handle this file type. ??????????????
      3. wait… I’m currently Googling right now………………!
      4. Ok, the the problem is because of wrong folder name (I apologize for that, the url is updated, so it won’t occur to you for sure :v )
        • in webpack.config.js, change following line:
          • path.resolve(__dirname, ‘app‘) to
          • path.resolve(__dirname, ‘src‘) (actually it was updated from pastebin)
      5. Getting another new error, hmhmh … it looks interesting (I just wanted to smash my laptop right now…)
        1. The next error is………………….. (hmhmhm looks so nasty and stupid!)

          ERROR in ./src/index.js
          Module not found: Error: Can’t resolve ‘react’ in ‘/home/yusuf/test/blog-hellojs/src’
          @ ./src/index.js 3:13-29

          ERROR in ./src/index.js
          Module not found: Error: Can’t resolve ‘react-dom’ in ‘/home/yusuf/test/blog-hellojs/src’
          @ ./src/index.js 7:16-36
          error Command failed with exit code 2.

          error Command failed with exit code 2.
          ERROR in ./src/index.js
        2. The error is still occurring for somehow (even the error is magic) ….
        3. Ladies and Gentlemen …….I’m proudly announce to you that the error is “REACT IS NOT INSTALLED YET”
          • Somehow my prev ‘yarn add react’ and ‘yarn add react-dom’ are not working properly (or I just accidentally removed them from the package.json)
        4. Make sure your /dist/ folder is empty by running following script:
          • $ rm dist/*
        5. Ok now run following code below to transpille the ES6 JSX code from src/index.js to dist/bundle.js
          • $ yarn run webpack
          • yarn run webpack
            yarn run webpack
          • vim dist/bundle.js
            vim dist/bundle.js
        6. Thanks God Babel is working now…
      6. 13.structure-folders
  10. Create HTML File
    • touch ./src/index.html 
    • html code
  11. Install html-webpack-plugin
    $ yarn add html-webpack-plugin --dev
  12.   Update webpack.config.js enable html-webpack-plugin on build
    1. Follow this tutorial to add html-webpack-plugin link
    2. New required line on webpack.config.js on lines 5-10 and 34
      1. 14.config-for-html.png
    3. $ yarn run webpack
      1. 16.index.html.png
      2. Generated ./dist/index.html
        Generated ./dist/index.html
  13. Run server
    1. $ yarn install webpack-dev-server –dev
    2. Add following line to update package.json
    3. "start": "webpack-dev-server"
      • 17.yarn-webpack-run
  14. Run server using
    1. $ yarn start
    2. or $ yarn run start





Golang: Database migration to manage your database schema by creating incremental SQL

In this post I write down my experience regarding  database migration configuration for Golang using Goose database migration.

Goose installation

$ go get -u

This will install the goose binary to your $GOPATH/bin directory.

Goose binary installed in bin folder

How to use

$ goose

Goose executable in action

Create a SQL migration using Goose

$ postgres=# CREATE DATABASE teahrm

Golang SQL migration using Goose
Just generated empty Migration

Create target database to migrate with

$ goose create create_tables_users sql

List of existing databases

Connect to the PostgresSQL database thru psql

$ postgres=# \connect teahrm

Show tables

$ teahrm=# \dt

Empty database without table yet

Create migration for table users (PostgreSQL datatype)

Migrate Up

goose postgres "user=postgres dbname=teahrm sslmode=disable" up


Migrate Down

goose postgres "user=postgres dbname=teahrm sslmode=disable" down


Common mistake while migrating up

Missing connection information

Wrong database name: goose: no migrations to run. current version: 1

Check Connection status to avoid connection error

goose postgres "user=postgres dbname=postgres sslmode=disable" status


That’s all guys… have a nice weekend…






Golang: Web development using Gorilla Mux and Pongo2 templating engine

What is Golang Gorilla ?

Gorilla is a web toolkit for the Go programming language.

What is Gorilla mux?

The name mux stands for “HTTP request multiplexer”. Like the standard http.ServeMux, mux.Router matches incoming requests against a list of registered routes and calls a handler for the route that matches the URL or other conditions.

What is HTTP Multiplexer / Mux?

ListenAndServe starts an HTTP server with a given address and handler. The handler is usually nil, which means to use DefaultServeMux. Handle and HandleFunc add handlers to DefaultServeMux

What is Pongo2 ?

pongo2 is the successor of pongo, a Django-syntax like templating-language.

pongo is a well-tested template engine which implements a Django-template-like syntax.

Install Gorilla Mux and Pongo

go get
go get -u

Create app.yml

  runtime: go
  api_version: go1 

  - url: /.*
    script: _go_app
    secure: always
    redirect_http_response_code: 301 

create main.go

 package main

  import (

      pongo ""

  func init() {
      r := mux.NewRouter()

      r.HandleFunc("/", homeHandler)  

      http.Handle("/", r)

  func homeHandler(w http.ResponseWriter, r *http.Request) {
      template := "dashboard.html"
      tmpl := pongo.Must(pongo.FromFile(template))

      err := tmpl.ExecuteWriter(pongo.Context{"title": "Index", "greating": "Hallo"}, w)
      if err != nil {
          http.Error(w, err.Error(), http.StatusInternalServerError)

create base.html

              {% block title %}Website Title Default{% endblock %}
          {% block body %}Body Default{% endblock %}

create dashboard.html

  {% extends "base.html" %}

  {% block title  %}Dashboard Real Title{% endblock %}

  {% block body %}Hallo world Gorilla!{% endblock %}

Running the code on the local server --port=9999 ./




Note: I am using App Engine local environment development

Golang Web: Setting Up GIN Framework with Pongo2 template engine on GAE Standard env

What Is Gin

Gin is a web framework written in Golang. It features a martini-like API with much better performance, up to 40 times faster. If you need performance and good productivity, you will love Gin.

What Is Pongo

Pongo is a well-tested template engine which implements a Django template like syntax and pongo2 is the successor of pongo, a Django-syntax like templating-language.

For Pongo documentation on how the templating language works you can head over to the Django documentation. pongo2 aims to be compatible with it (link).

Ok then. let’s start the journey

Installing GIN

go get

go get

Installing Pongo2

go get -u go get -u

Install robvdl/pongo2gin

Package pongo2gin is a template renderer that can be used with the Gin web framework gin-gonic/gin it uses the Pongo2 template library flosch/pongo2 to use pongo2gin you need to set your router.HTMLRenderer to a new renderer instance, this is done after creating the Gin router when the Gin application starts up. You can use pongo2gin.Default() to create a new renderer with default options, this assumes templates will be located in the “templates” directory, or you can use pongo2.New() to specify a custom location.To render templates from a route, call c.HTML just as you would with regular Gin templates, the only difference is that you pass template data as a pongo2.Context instead of gin.H type.

Create app.yml

  runtime: go
  api_version: go1 
  - url: /.* 
    script: _go_app
    secure: always
    redirect_http_response_code: 301 

Create main.go

 package main

  import (


  func init() {
      r := gin.Default()

      r.HTMLRender = pongo2gin.Default()


      r.GET("/", func(c *gin.Context) {
          c.HTML(http.StatusOK, "main.html", pongo2.Context{
              "title":    "Hello world !",
              "greating": "Hi, Hello world my mate!",

      http.Handle("/", r)

Create templates/main.html

              {{ .title }}
          {{ .greating }}

Run App engine development server –port=9999 ./The result

Deployment to GAE using gcloud command

gcloud app deploy –verbosity=info

The Final Result On Browser


Resources: link1

Golang Common Error: missing ‘,’ before newline in composite literal

This is my previous (error) code:

r.GET("/", func(c *gin.Context) {
          c.HTML(http.StatusOK, "main.html", pongo2.Context{
              "title":    "Hello world !",
              "greating": "Hi, Hello world my mate!"

And here is the changes:

r.GET("/", func(c *gin.Context) {
          c.HTML(http.StatusOK, "main.html", pongo2.Context{
              "title":    "Hello world !",
              "greating": "Hi, Hello world my mate!",

can you find the different ? no ? here is the mitsake:

“greating”: “Hi, Hello world my mate!”,

Yeah the error is because of missing a comma LOL

Using Git Rebase to Squash Commits

A Git command that can be very useful, yet is often overlooked by beginners (such as myself) is the rebase command. I admit to not fully understanding all of its uses, but there is one simple use for it that I have found myself taking advantage of lately. Here’s the scenario:

You have a remote Git repository, perhaps hosted at GitHub. You want to work on a new feature, so you create a local branch on your machine:

git checkout -b newBranch

You make some changes and commit them to the local branch:

git commit -a -m”My first set of changes”

You make some more changes and commit them to the local branch:

git commit -a -m”My second set of changes”

You make some more changes and commit them to the local branch:

git commit -a -m”My third set of changes”
You now have three separate commits that relate to one feature, and the feature is complete. You could simply push the changes to your remote, but then you’d end up with three commits on the remote that are not particularly meaningful. The only reason you have three commits in your local repo is that you completed the work in three steps. Perhaps you’d rather have just one commit reported in the remote repo for this feature. Thankfully git rebase allows you to do that very simply.
If you issue a git log command, you’ll see something similar to this:


I can see from this that I have three commits corresponding to the changes that I made for the feature. To squash these three commits into one, and specify a commit message for the group, I can use git rebase, with the -i (which stands for interactive), argument:

git rebase -i HEAD~3

The HEAD~3 tells git that I want to rebase the past three commits.

This will pop open my text editor, which I have configured to be TextMate, with some rebasing instructions. The file will look something like this:


This is quite convenient as git actually provides you with some instructions. I want to combine the second and third commit with the first, so I edit the file to look like this:


When I save and close the file, git will pop open another file in the editor to edit our commit message:


From here I can either choose to accept the three individual commit messages that were picked up from our three commits, or I can remove them (or comment them out) and provide our own commit message. I’m going to remove the original commit messages and replace them with a single one that reads “A bunch of changes to support new feature A”. When I save and close this file I’ll be back at the command line with a message similar to this:


Now when I issue the git log command again, I’ll see my previous three commits squashed into one:


It’s as simple as that. Now you do need to be careful using the rebase command with remotes when you are collaborating with others. You should avoid rebasing commits that have already been pushed to a remote. There is also a lot more to rebasing than this simple example, but it’s not a bad place to start. Happy rebasing!


Source: link  (link dead)

  • Squash commits to one commit
  • Combine commits to one commit
  • Merge git commits to one commit

Let’s Encrypt on Google App Engine

Let’s Encrypt is free automated, and open certificate authority brought to you by the non-profit Internet Security Research Group (ISRG). it is a pretty awesome initiative to provide free SSL certificates to make creating a secure website easier.


Let’s Encrypt is a free, automated, and open Certificate Authority.

Here’s how to use it with App Engine. I used Google Cloud Shell to run these commands.

1.Download letsecrypt script  client using git clone:

git clone
cd letsencrypt

so you will have folder containing files like this:


2.Generate certificate using letsencrypt:

sudo ./letsencrypt-auto -a manual certonly

3.Challenge and response verification the ownership of your domain.

You’ll see something like this on your console terminal:

mhyusufibrahim@myproject-999999:~/letsencrypt$ sudo ./letsencrypt-auto -a manual certonlySaving debug log to /var/log/letsencrypt/letsencrypt.log

Please enter in your domain name(s) (comma and/or space separated) (Enter ‘c’ to cancel):

Obtaining a new certificate Performing the following challenges: http-01 challenge for


NOTE: The IP of this machine will be publicly logged as having requested this certificate. If you’re running certbot in manual mode on a machine that is not your server, please ensure you’re okay with that. Are you OK with your IP being logged?

(Y)es/(N)o: Y

Make sure your web server displays the following content at

before continuing:


If you don’t have HTTP server configured, you can run the following command on the target server (as root): mkdir -p /tmp/certbot/public_html/.well-known/acme-challenge cd /tmp/certbot/public_html printf “%s” nuHnBaCxYzkvcUQkOEjLhpYgY_umLjdCr4gRkby1YCM.qvOvSw_BDrdsxvw_X_ce5IgulKkYBS4BMWrUiaqY4iY > .well-known/acme-challenge/nuHnBaCxYzkvcUQkOEjLhpYgY_umLjdCr4gRkby1YCM # run only once per server: $(command -v python2 || command -v python2.7 || command -v python2.6) -c \ “import BaseHTTPServer, SimpleHTTPServer; \ s = BaseHTTPServer.HTTPServer((”, 80), SimpleHTTPServer.SimpleHTTPRequestHandler); \ s.serve_forever()” ——————————————————————————-

Press Enter to – NOTE: The IP of this machine will be publicly logged as having requested this certificate. If you’re running certbot in manual mode on a machine that is not your server, please ensure you’re okay with that. Are you OK with your IP being logged?

(Y)es/(N)o: y

Press Enter to Continue

Waiting for verification…Cleaning up challenges

IMPORTANT NOTES: – Congratulations! Your certificate and chain have been saved at /etc/letsencrypt/live/ Your cert will expire on 2017-09-26. To obtain a new or tweaked version of this certificate in the future, simply run letsencrypt-auto again. To non-interactively renew *all* of your certificates, run “letsencrypt-auto renew” – If you like Certbot, please consider supporting our work by: Donating to ISRG / Let’s Encrypt: Donating to EFF:

3.Get your private key.

sudo openssl rsa -inform pem -in /etc/letsencrypt/live/ -outform pem | less


4.Get your public key certificate.

sudo less /etc/letsencrypt/live/

Don’t forget to press enter to scroll down the text


Keep in mind that /etc/letsencrypt is not persisted through Cloud Shell restarts, so if you need to keep your private key, you can copy it to your home directory or save it.

5.Upload the certificate to the Google Cloud.

App Engine -> Settings -> SSL Certificate




The final result


Installing and Unistalling SpaceVim / SpaceVim on UBuntu Linux (Or just Linux in General)

I just Installed /SpaceVim on my Ubuntu 14.04 Laptop but I realized that It was wrong because my VIM IDE turned to unfamiliar IDE for me, and the worse case was my previous setting and configurations in my .vimrc are no longer working.

Here is the SpaceVim installation step:

curl -sLf | bash


Installation result (Open the VIM first), beautiful but I think it’s better to use it later…


And here is how to uninstall / remove  SpaceVim from your LInux Computer:

curl -sLf | bash -s — uninstall


Finally I get my standard VIM back…