Frontend developer based in Singapore
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.
Basically meteor.js is a node.js framework that allow you to write web or applications client side and sever side using javascript.
By default when you create radio multiple radios with same names, check either one will uncheck the rest.
Try out above codes.
In jQuery we can get the value of the radio easily using:
$('input[name="radio1"]').val();
In react we have use state to get the value of current selected radio:
class Test extends React.Component {
handleRadioSelection(e){
console.log(e.target.value);
}
render(){
return (
1
2
3
4
)
}
}
React.render(
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,
<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 as <input>, <textarea>, and <select> typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with setState().”
Continue reading “React dealing with controlled component input forms”
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:
{React.cloneElement(this.props.children, this.props)}by the way there are more very useful helpers to help you interacting with this.props.children, for example:
React.children.map(this.props.children,()=>{…})
React.Children.forEach(this.props.children, (child, i) => {
console.log(child + ' at index: ' + i);
})see all API at React.children
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 have to pass in the function as a property to Child component then trigger from child onClick method, notice that I have bind this to this.props.parentToggle, by default in ES6 react decided not to auto bind this like what usual javascript does, so we have to do it manually.
Continue reading “React pass parameter to parent component or call parent function on ES6”