Max Li Bin – FrontEnd Developer

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) {
      super(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.props.children}
        
,
        this.tooltip
      )
    }
  }

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

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

  -(x+1)

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

  arrayItem.indexOf(stringItem) > -1

Happen to try out this “Headless Chrome Node API” from chrome today, this npm allows you to write headless chrome directly which we used to do with phantomjs or other tools, it provides useful and easy APIs,

I wrote a simple scripts allow me to check on CDC (ComfortDelGro Driving Centre) website to see if practical lessons are available now or not.
Continue reading “Headless chrome puppeteer”

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) => (
      <tr>
        {item.name}
        {item.birth}
        {item.age}
      </tr>
    ));
  

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)”

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
      return(
       
{user}
      )
    }
  }
  export default createContainer(() => {
    // you can subscribe something here
    return {
        user: Meteor.user(),
    };
  }, LowerOrderComponent);

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

Meteor, or MeteorJS, is a free and open-source isomorphic JavaScript web framework^[3] written using Node.js. Meteor allows for rapid prototyping and produces cross-platform (Android, iOS, Web) code. It integrates with MongoDB and uses the Distributed Data Protocoland a publish–subscribe pattern to automatically propagate data changes to clients without requiring the developer to write any synchronization code.

souce: https://en.wikipedia.org/wiki/Meteor_(web_framework)

Basically meteor.js is a node.js framework that allow you to write web or applications client side and sever side using javascript.

Continue reading “Working with meteor and react”