Learning React

React is not like Angular where many decisions are already made for you. In React, you have to make many decisions. Also, learning react means you need to learn multiple components like react-router, Redux etc.

This could be overwhelming and it could get you confused. So I decided to take a step by step approach to learn React.

Step#1 : Learning Path

  • Learn ES6 (At least overview and few concept like map and reduce)
  • What is React
  • JSX
  • Virtual DOM
  • Rendering
  • Components
  • Props
  • State
  • Event handling
  • Routing
  • Redux

Step#2 : Resources : getting started

There are tons of material and don’t confuse yourself with these. Stick to Most reliable and widely use approach and chances of distraction will be very less.

Step#2 : Resources : advanced (to be updated)

This is no way complete list and I will keep updating it as and when I find relevant material. If you have come across any good material, please let me know.

Adding React code highligher to Sublime 3

When I started using sublime 3 for react, code highlighter was not working properly. File was recognised as JavaScript but due to JSX syntax colour highlighter got screwed up as you can see in below screenshot. Anything coming after first closing JSX tag is not recognised properly as ‘/’ is not escape character.

I tried to find about plugins but information available was very user freindly. Please follow following steps to add syntax highliter

Step#1
Got to Package control and copy requited python code.
For sublime 3 copy following code

import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)  

Step#2
Go to View–> Show Console and it will open console in sublime text window.
Alternatively you can press Ctr+~ to open same window.
Now paste code copied in above step and hit enter.

Step#3
Go to Preference–>Package Control
OR press Ctr+Shift+P
and Select Package Control:Install Package

Step#4
This step will open a pop up window. Please type required package name in the window. e.g. I wanted to install ‘babel-sublime’ as this handles react code highligter as well.

Step#5
You are not done yet.
Now go to View–>Syntax–>Open all current extensions as..–>Babel–>JavaScript(babel)

And here is the result.

If you compare this with first screenshot, you can see JSX code is highlighted properly after installing and activating ‘Babel-Sublime’

Please do let me know if you run into any issues.

Learning JavaScript

There are tons of material on internet to learn JavaScript and each has its own style and different target audience and it might confuse you. Also, reading online tutorials makes you think that you ‘know’ the language now but when you get down to code, you don’t recall anything and this makes learning experience very frustrating experience.

Whatever may be your intentions behind getting started with JavaScript, you can use following method to learn JavaScript.

Step#1

Start with CodeAdacemy’s interactive JavaScript tutorial. This is he best way to get your hands dirty.

Step#2

Start Reading Eloquent JavaScript. You can read this book online. But if you like to read the hard copy of the book, you can purchase it from here

You can read this book for free online at eloquentjavascript.net

Step#3

Other best online sources of learning JavaScript are as below:

Step#3

Once you are comfortable on JavaScript, please read JavaScript: The Good Parts by Douglas Crockford

Don’t just stop here, during anypoint in your learning phase you should watch following videos by Duglas Crackford.

https://www.youtube.com/watch?v=v2ifWcnQs6M&list=PL62E185BB8577B63D

https://www.youtube.com/watch?v=JxAXlJEmNMg&list=PL7664379246A246CB

create react app | Getting started with react

Create React App is the best way to start building a new React single page application. It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production.

$ npm install -g create-react-app
$ create-react-app todolist

If you are using older version of Node.js and npm you might get following error message.

I am also using Ghost blogging platform so I need to use 4.8 LTS version of Node.js so I will keep my current version, but if you dont have any dependency like above, please update to latest stable version.

$ create-react-app myreactapp
Creating a new React app in /home/user/code/nodejs/myreactapp.

You are using Node v4.8.3 so the project will be boostrapped with an old unsupported version of tools.

Please update to Node 6 or higher for a better, fully supported experience.

You are using npm 2.15.11 so the project will be boostrapped with an old unsupported version of tools.

Please update to npm 3 or higher for a better, fully supported experience.  

Once installation is complete got to the newly created folder and start the application.

$ cd myreactapp
$ npm start

This will start development server and it will open a webpage on your default browser at following location.

http://localhost:3000/

This will create file structure as below: index.html provides basis div elements and index.js is primary react file which renders required components in index.js

├── package.json
├    (Node.js file structure)
├── package.json
├── public
│   ├── favicon.ico
│   └── index.html
├── README.md
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    └── logo.svg

Getting started with Node.js on Digital Ocean

I have evaluated and used multiple hosting options, PaaS like openshift, Heroku and Iaas like Digital Ocean, Linode and Amazon EC2 and finally have zeroed on Digital Ocean for their simplicity, cost effectiveness and most importantly availability of rich documentations and tutorials.

Pros and Cons of PaaS IaaS has been discussed in many places so we will not go into that discussion here. This is quick refence guide for getting started with Node.js on Digital Ocean.

Digital Ocean has rich set of tutorials for getting stated with different stacks (LAMP, MEAN, crude Node.js etc). Here are set of tutorials which you can follow to get started with Node.js.

  • Get started with Initial Server Set up with Ubuntu 16.04 LTS. These steps are self explainatory and does not need any further clarification.

    • Step One — Root Login
    • Step Two — Create a New User
    • Step Three — Root Privileges
    • Step Four — Add Public Key Authentication
    • Step Five — Disable Password Authentication
    • Step Six — Test Log In
    • Step Seven — Set Up a Basic Firewall
  • Install Node.js. This step will install latest Node.js. Some times you might need some specific version of Node.js. For example, Ghost blogging platform wont run of latest Node.js version as its not yet supported. Ghost official website recommendeds >=4.2 <5.* (Node v4 argon LTS). Please check this tutorial if you want to install specific version of Node.js.

  • Now basic server set up is done and Node.js is installed, now you need nginx server. Follow how to install nginx tutorial to install ngnix.

  • Now you are all set. Follow how to set up Node.js tutorial to set up very basic Node.js application. Once you have done with this step, to get more comfortable with Node.js on ubuntu server, follow creating you first Node.js tutorial . This will give you more hands on and will increase your comfort level.

  • Setting up domain on Digital Ocea is super simple. Simple follow this tutorial to get it done.

    I faced an issue with domains. My website was working perfectly wine with https://example.com but it was not working for https://www.example.com. If you also face this issue, please go to Droplets->Add Domain–>Manage Domains and add a ‘A’ record as ‘www’ (without quotes), select your droplet and click on create record. This will resolve your issue.

  • (optional) You can make your website secure by following this tutorial.

  • (optional) If you are getting started and would like to host multiple Node.js websites on the single droplet, follow how to set up multiple virtual blocks tutorial.

Adding Syntax Highlighter to Ghost Blog

Using newer things has its own set of disadvantages and ghost blogging platform is no exception. Ghost does not have efficient coding markup tools. They do have coding style which looks like below:

code Inline Code Ctrl/⌘ + Shift + K

Disadvantage of this way to syntax highlighter is that

  • It does not differentiate between syntax of different lanaguges.

  • formatting is very basis. When I was searching for better ways of doing syntax highlighting, I came across a faq on ghost blog which suggested to use prism.js for syntax highlighting.

This is one of the simplest tool that I have came across and you can set it up in few minutes.

Step#1
Download prism.js and prism.css from downaload page..
Before downloading these files, you need to select theme and list of languages to which you need this markup.

I have selected Okaidia theme and all languages (you never know which language you might need to refer, specially for a tech blog)

Step#2
Copy prism.js and prism.css files in following folder respectively

content/themes/theme-name/assets/js  
content/themes/theme-name/assets/css  

Step#3
Now we need to include prism.js and prism.css in default.hbs file of whichever theme you are using.
Include prims.css file in head section, just below other CSS files

<link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />  

Include prism.js file in footer section just before end of body section.

<script type="text/javascript" src="{{asset "js/prism.js"}}"></script>  

This tool has some limitations, as you can see, above line is not rendered properly as html. This is because of double double-quotes. This works well if we remove double-quotes.

<script type="text/javascript" src="{{asset 'js/prism.js'}}"></script>  

Step#4
Deploy these updated files on your ghost server and you are all set. Language markup can be done as below:

  • language-javascript
  • language-sql
  • language-css
  • language-bash
  • language-html