Udacity react nanodegree review

Recently I was graduated from react nanodegree with Udacity.

The course was separated into 3 main course:

1) React Fundamentals

2) React & Redux

3) React Native

Each course have their own assignment to complete, overall its about 4 or 5 months course, it only took me 1 month plus to complete 😉 since the course itself is little like mix of self pace or not.

You can submit your assignment on their web IDE or on github. The course cost $499 USD, but I would say its quite worth it, the course will assign a mentor to you, you can ask them questions related to the course, they should be happy to answer, sometime if you have different timezone when them, it takes a while for them to reply, but they also have a slack channel where you can ask questions over the channel with other students and some mentors.

Sometime the quiz they gave was pretty tricky, but that helps you think deeper and was overall experience was pretty good.


IntersectionObserver is a very simple and powerful browser API, it really good to build such as lazy-load images, contents or whatever, the concept is really simple, it observer an element, when is visible and then you do something about it. One example, when this div is visible then load image. Outthought its not supported by all browsers at current state, but its well supported by chrome and firefox, and thats enough for now :D.


so question is how do you use it?

all you need to do is simple, create an observer

  var observer = new IntersectionObserver(callback, options);

options has 3 different properties which you can use:

  var options = {
    root: ""
    rootMargin: "0px"
    threshold: 0.1,

root: An Element object which is an ancestor of the intended target, whose bounding rectangle will be considered the viewport. Any part of the target not visible in the visible area of the root is not considered visible.

rootMargin: A string which specifies a set of offsets to add to the root’s bounding_box when calculating intersections, effectively shrinking or growing the root for calculation purposes. The syntax is approximately the same as that for the CSS margin property; see The root element and root margin in Intersection Observer API for more information on how the margin works and the syntax. The default is “0px 0px 0px 0px”.

threshold: Either a single number or an array of numbers between 0.0 and 1.0, specifying a ratio of intersection area to total bounding box area for the observed target. A value of 0.0 means that even a single visible pixel counts as the target being visible. 1.0 means that the entire target element is visible. See Thresholds in Intersection Observer API for a more in-depth description of how thresholds are used. The default is a threshold of 0.0.

so all you need to do is observer that this element is visible, do something in callback, but you need to attach the element to this observer when is 10% visible.

so lets attach the element:

  var options = {
    root: ""
    rootMargin: "0px"
    threshold: 0.1,

  var observer = new IntersectionObserver(callback, options);

now you have an element observed, but we have not add callback, so lets do that:

  var options = {
    root: ""
    rootMargin: "0px"
    threshold: 0.1,

  var callback = function(entries) {
    entries.forEach(function(entry) {
      if (entry.intersectionRatio > 0) {
        // do something here.

  var observer = new IntersectionObserver(callback, options);

there you go, easy and powerful.

simple way to improve react applications performace

Before I start discussing some ways to improve the performance of react applicate, you should read the official doc from react site which already discussed about this topic.

So in my own opinion few ways to improve the performance:

1) Use stateless/function component instead of writing class as component, using stateless component will eliminate “this” from that component.

2) Use shouldComponentUpdate when necessary, lets say you have a component, lets say Dashboard, in Dashboard you have few other Components, Sidebar, Content, Footer, now you want to update prop of Sidebar, because prop is pass down from Dashboard Component, both Content and Footer will unmount and mount again, what if Content contains a map of other components, this could cause latency in your applicate. So try to add shouldComponentUpdate to Content and Footer.

  shouldComponentUpdate(nextProps, nextState) {
    if (nextProps !== this.props) {
      return true;

Continue reading “simple way to improve react applications performace”

server side react with next.js

After trying out next.js, totally lovely this tool, no reason not to use now with server side react render. One of the biggest benefit I felt is definitely the SEO part. As my screenshot below you can see that in source code which renders the contents, this is great for crawlers to quickly crawl your contents to show to the world.

Its really easy to install next.js, you will install like how you usually do with other node projects.

create a project folder, and install all packages you need for your project, including next.js

npm install --save next react react-dom

and edit your package.json with:

  "scripts": {
    "dev": "next",

Next.js create routes with pages folder, any files inside this folder will be added as a route, so lets create a index.js file, and add some code:

const Index = () => (
Hello next.js
); export default Index;

dada!! now you got your first next.js application, of course you can import other modules from other folders which will not compiled as routes.
PS: when I first use next.js I have some compiling problem with bablerc, if you have too, try to add a .babelrc file and add:

   "presets": ["next/babel"]

react 16 createPortal

React 16 introduced createPortal function which allows you to render elements outside react Dom, this become useful when you need to dynamically render some elements such as tooltip, modals…

createPortal function can be used inside render method, and returns jsx as usual and where you want to render this element, as example below:

  render() {
    return createPortal(

this is a tooltip

, document.getElementById("tooltip") ) }

what if you want to render this whole tooltip dynamically without create a div at start, you can create a component and pass this dynamic div to constructor, and use the component as how you would use component normally.

  // import your react and component...
  class Tooltip extends Component {
    constructor(props) {
      this.tooltip = document.createElement("div"); // this is the tooltip element created dynamically.
      document.body.appendChild(this.tooltip); // now append to body...

    render() {
      return createPortal(
, this.tooltip ) } } class App extends Component { render() { return ( this is content of tooltip ) } }

Easiest way to handling indexOf

Lets create a function that allow us to if string is available in array with this shortcode

function checkStringInArray(arrayItem, stringItem) {
  return !!~arrayItem.indexOf(stringItem);

using tilde operator will flip the bits in its operand. which is similar to


then use !! to convert this into boolen, this is easiest way to check indexOf and its more readable than …

  arrayItem.indexOf(stringItem) > -1

Prevent table column resize/jump when you search table rows (React version)

Rendering with table in react is really easy, you just need to map through the result and return whatever should be shown as each TR, below is an example how you render table in react.

    YourObjectArray.map((item, index) => (

here comes a problem that I faced when working with table, lets say there is a search box somewhere and let you search the table for results and returns rows that matches your search, however each rows have different titles or some contents, and by default table will stretch to based on your content. Lets use some packages for example: react-sort-search-table and you can directly go to their demo, so see what I am talking about here
Continue reading “Prevent table column resize/jump when you search table rows (React version)”

Reactive with react and meteor

If you been working with react and meteor, you will realised that both are reactive by nature of its framework/library, but when bridge them together, it does not work well in reactive way.

fortunately Meteor team created a package called React Meteor Data. 

To use React-Meteor-Data which is pretty easy,

you just need to install to your meteor folder

meteor add react-meteor-data

and import to your current react component as usual:

import { createContainer } from 'meteor/react-meteor-data';

You just need to use createContainer function to wrap your component as example below:

  export class LowerOrderComponent extends Component {
    render() {
      const {user} = this.props; // user is a prop from container and is reactive now
) } } export default createContainer(() => { // you can subscribe something here return { user: Meteor.user(), }; }, LowerOrderComponent);

thats how easy you use reactive feature with react and meteor.