I am based in Singapore, have a project you'd like to discuss?
A higher order component is basically a reusable component which allows you to takes in another component and return a new component. To recap about higher component check our my older post here In ReasoML higher order function are called “Functors” which takes in a module type and returns a module type, functors are written […]
Recently I was working on some reasonml/ReasonReact project which required to request data in JSON format from an API endpoint, well there are some BuckleScript decoders such https://github.com/glennsl/bs-json which is the more popular one,the way you decode is pretty easy:
|
1 2 3 4 5 6 7 8 9 10 11 |
point = { x: int, y: int }; let point = json => Json.Decode.{ x: json |> field("x", int), y: json |> field("y", int) }; |
you pass in the json and define the field in Json.Decode… at first it […]
fast piping allow you to transform your function code into more readable syntax, imaging you have human(person(age())) this is very inconvenience to see. with piping you can do it like this:
|
1 2 3 4 |
age ->person ->human |
which is exactly the same as human(person(age())) there are 3 different pipes as I understand you can do like
|
1 2 3 4 |
age |> person |> human |
or
|
1 |
human @@ age->person |
whats different […]
Recently I converted one of my old React project while studying React from Udacity sometime back, Since I am reading ReasonML recently so I thought I might as well convert to ReasonML language or ReasonReact, you can find it here. MyRead ReasonReact
Imaging if you need to access deep level of property and you are not sure that if such properties exists deep down, you are doing something like
|
1 |
books && books.book && books.book.authors && books.book.authors.author |
This is really difficult to read and understand sometime. there is something called optional chaining in javascript proposal which you can use if you include in babel-plugin-proposal-optional-chaining […]
Reason 101: variable assignment with let keyword cannot is immutable, but you can set it to mutable by assign to ref() example JS:
|
1 2 3 |
let count = 0; count ++; |
in reason:
|
1 2 3 4 5 |
/* let count = 0; this is immutable */ let count = ref(count); count := count ^ + 1; |
for string concat:
|
1 2 |
let stringConcat = “some string” ++ variable ++ “another string“; |
array in ReasonML is using [|”a”, “b”, “c”|] /* | = pipe symbol */
|
1 2 3 4 5 6 |
let test = [| “a”, “b”, “c” |]; |
and
|
1 2 3 4 5 6 |
list = [ “a”, “b”, “c” ]; |
list is immutable. in list you can […]
When you start to work with lots of React components, and you realised alot of component patterns are the same, then you want to reuse these component patterns which is where Higher Order Component(HOC) kicks in. Think of HOC as higher order function: usually you write function in Javascript:
|
1 2 3 4 |
const thisFunction = function(a, b) { return a + b; } thisFunction(1, 2); // return 3; |
Higher order function basically is […]
Recently Facebook has released the react 16.3 which bundled with a few awesome features including Context API and createRef(), I will talk abit about Context API since its quite hot topic. Context API its a feature that allows you to pass your data down to all child levels without passing props around like what you […]
Lambda was a great service with great features, and serverless framework is even better, serverless simplified everything you do with AWS or other serverless providers. Was doing some fun with serverless framework where I am simply trying to output a response from some API to Lambda API gateway, and suddenly I got “Internal server error” […]
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 […]
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 […]
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” […]
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 […]
Its new updates of Chrome 62 and its really easy to take screenshots with build in api, no longer require any plugins or extensions. Open up your chrome, usually I would use Chrome Canary which has latest versions. open up your console with
|
1 |
Shift + Control/Command + I |
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:
|
1 2 3 4 5 6 7 8 |
render() { return createPortal( <div className="tooltip"> <p>this is a tooltip</p> </div>, document.getElementById("tooltip") ) } |
what […]
Lets create a function that allow us to if string is available in array with this shortcode
|
1 2 3 |
function checkStringInArray(arrayItem, stringItem) { return !!~arrayItem.indexOf(stringItem); } |
using tilde operator will flip the bits in its operand. which is similar to
|
1 |
-(x+1) |
then use !! to convert this into boolen, this is easiest way to check indexOf and its more readable than …
|
1 |
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 […]
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.
|
1 2 3 4 5 6 7 8 9 |
YourObjectArray.map((item, index) => ( <tr> <td>{item.name}</td> <td>{item.birth}</td> <td>{item.age}</td> </tr> )); |
here comes a problem that I faced when working with table, lets say there is a search box somewhere […]
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 […]
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 […]
By default when you create radio multiple radios with same names, check either one will uncheck the rest.
|
1 2 3 |
<input type="radio" name="radio1" value="1" /> <input type="radio" name="radio1" value="2" /> <input type="radio" name="radio1" value="3" /> |
Try out above codes. In jQuery we can get the value of the radio easily using:
|
1 |
$('input[name="radio1"]').val(); |
In react we have use state to get the value of current selected radio:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
class Test extends React.Component { handleRadioSelection(e){ console.log(e.target.value); } render(){ return ( <div> <input type="radio" onChange={this.handleRadioSelection.bind(this)} name="radio1" value="1" /> 1 <br /> <input type="radio" onChange={this.handleRadioSelection.bind(this)} name="radio1" value="2" /> 2 <br /> <input type="radio" onChange={this.handleRadioSelection.bind(this)} name="radio1" value="3" /> 3 <br /> <input type="radio" onChange={this.handleRadioSelection.bind(this)} name="radio1" value="4" /> 4 </div> ) } } React.render(<Test />, document.getElementById('container')); |
In most case react form will works normally until you wanted to set a value in the input and change while changes / start to input in something,
|
1 |
<input type="text" value="some value here" /> |
and you realised the value does not change no matter how hard you pressed, this is because of the controlled component: “In HTML, form elements such […]
Previous article I mentioned about this.props.children and its feature, problem is this.props.children does not not provide a way to pass down the props, so we need a wrapper called React.cloneElement which allows you get this component and return a new component where you can also pass in the props like this:
|
1 |
{React.cloneElement(this.props.children, this.props)} |
by the way […]
While modern framework communities are push forward in using inline css, innovated by one of the react developer react-css-in-js. As Vjeux have presented in his deck the problems that they faced using css while they are working on react projects.
While playing with react, I have built a react component which server as second scrollbar for your overflow divs. You are free to use the code that I added to github… https://github.com/maxlibin/react-doublescrollbar
sometime you will need to call parents function on react component, the problem in ES6 is that all functions are not bind with this, so you will need to do manually, below is a simple toggle function that you will call from Child component, notice that in order to call the parent’s method, you will […]
When I first saw this API, its about to tear my head apart, and now I will share with you about what I have learned on this.props.children the concept is easy: Imaging you have Parent component that call child component that works fine,
SVG Scalable Vector Graphics is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. Because of its scalable native, especially with very high graphical screens(example: retinal screen for Mac) these days, we need solutions for images or graphics to be display on these screens. Well these are many ways to […]