New ReactJS Convention Book

If you are looking to learn basics of React Redux, then I would recommend the ReactJS Convention Book. The author shows how to learn basics stuff of React and Redux separately.

From the advanced perspective, for readers who are already familiar with React Redux, then it shows a convention how to structure a React Redux project properly.

About the free ReactJS Convention Book:

  • the book covers basics and advanced stuff related to ReactJS and Redux so everyone can find it useful
  • there are many GIFs animation which are showing progress of your application
  • there are Github diffs of the progress
  • The React convention book is free to use and you can see the quality upfront without leaving email address.

You can find it at https://reactjs.co/

Falcor Netflix (FalcorJS) – the next big thing in JavaScript?

Do remember the time, when they have invented the Node.JS back then 2009-2010? It went HOT after 1-2 years. My thoughts are that next big thing may be the FalcorJS. Why?

I’ve just read a great post about Falcor Netflix – FalcorJS.

The guy behind the ReactJS blog insists that it’s going to improve your development productivity by at least 30%+ in comparison to MEAN stack (Mongo Express Angular Node).

We will see how it will go, but for sure I will give it a chance, especially that if you will check the Falcor’s issues on Github then you will find out that the creators of that library are very active and responsive.

It’s easier convince your boss and tell him that FalcorJS is backend by Netflix and they are using it on production.

Relay GraphQL vs. Falcor.JS from Netflix

Second thing is that Relay+GraphQL reminds me more likely an Angular’s approach: a monolith framework, with huge API that is hard to be very competent in using.

Remember the AngularJS excitements? AngularJS looks nice in small projects, but after you use it in a bigger project then it sucks (when you end up with junior devs trying to make it work on a medium size project and no-one in the team really knows what the f… is under the hood of the that Ang1 framework).

FalcorJS is more likely like ReactJS – it does one thing, very well.

I am sure, you shall give it your attention because it looks very promising and is much easier and quicker to deploy on production than “one-do-all” stuff from FB (Relay/GraphQL).

 

Routing with React – examples and good practices

USEFUL TIPS on Quora: Should I learn ReactJS or AngularJS?

There are different approaches to achieve routing in ReactJS. The type of approach you would like to use will depend on the type of app you want to build and the type of other frameworks and libraries you will be using with react. In this article, we will we discussing examples and good practices of routing with react.

React router is one of the most famous routing libraries used with React. It is a simple yet powerful way to achieve SEO friendly URLs in React app. Here is a simple example of use of react-router:

import React from 'react'
import { render } from 'react-dom'
import { Router, Route, Link } from 'react-router'

const App = React.createClass({
render() {
return (
<div>
<h1>App</h1>
<ul>
<li><Link to="/about">About</Link></li>
<li><Link to="/inbox">Inbox</Link></li>
</ul>
{this.props.children}
</div>
)
}
})
render((
<Router>
<Route path="/" component={App}>
<Route path="about" component={About} />
<Route path="inbox" component={Inbox} />
</Route>
</Router>
), document.body)

In the above example, first we imported the react library and other react-dom library. Then using React component some links are created with the URL we want to work as route. Then path and component props are supplied, which route automatically replaces with the children. Internally the route converts full path /inbox to build <App><Inbox/></App>, as it figures out the <Child> component to render automatically. To get more details about react router you can check this link  https://github.com/rackt/react-router

Let’s look at another routing solution for React. Component-router is component based routing solution for react. React router is not sufficient to route based on the independent state of components. This solution is provided by component router. Below is an example of component router:

import React from 'react';
import {ComponentRouter, Url, LocationHtml5} from 'component-router';

const Baz = React.createClass({
render() {
const {value} = this.props.componentRouter;
return <h1>{value && value.toUpperCase()}</h1>;
}
});

const App = React.createClass({
render() {
return (
<div>
<LocationHtml5 />
<Url query={{baz: 'foo'}}>Foo</Url> | <Url query={{baz: 'bar'}}>Bar</Url>
<ComponentRouter config={Baz} namespace="baz" />
</div>
);
}
});
React.render(<App />, document.body);

In the above example 2 components are being used Baz and App component is the parent component which supplies the URL according to user interaction. Baz component, which is child component returns the Page value according to the URL sent by App component.  To know in detail about component-routers you can check this link https://github.com/in-flux/component-router

React Mini Router is a lightweight, flexible, and minimal routing solution for react. It doesn’t need any specific react architecture of structure to work. It doesn’t need any special markup or component and can work with regular html markup tags. Let’s see an example of this router:

var React = require(‘react’),
RouterMixin = require(‘react-mini-router’).RouterMixin;

var App = React.createClass({

mixins: [RouterMixin],

routes: {
‘/’: ‘home’,
‘/message/:text’: ‘message’
},

render: function() {
return this.renderCurrentRoute();
},

home: function() {
return <div>Hello World</div>;
},

message: function(text) {
return <div>{text}</div>;
},

notFound: function(path) {
return <div class=”not-found”>Page Not Found: {path}</div>;
}

});

module.exports = App;

In the above example, we have uri, home, and message. Home is the root uri and message uri accepts a parameter. If any other uri is supplied then its handle by not found call back. When the uri supplied matches the route then the respective call back method is called. To get more details about react routers you can check this link https://github.com/larrymyers/react-mini-router

Some of the good practices in react routing is that if you are using Flux/Redux then you should keep your router’s state in sync with your store/global state.

If you keep states Synchronized with routes, it will help to control router behaviors by actions and also it will read router states and parameters in components easily.

If you are using webpack, it’s possible to split your application’s code to separate the bundle output to multiple code chunks. This can further increase the speed and efficiency of your code.

So, to build a simple light weight app React Mini Router is most suitable. But if you need a hierarchical routing with advance features like dynamic routing then React router is good. And, if you need a routing solution with component based routing i.e. routing based on state of component then choose Component router to build your next React app.

Triggering UI updates by manipulating state in React.js

One very important thing to understand in react is how to use states correctly. Both Props and states are used to pass data but pops are used when we need component initialization whereas states are used when we need interaction in component. Triggering UI updates by manipulating state in React.js is what we will discuss in this article.

Before we use state we need to set initial values of state. We set initial values of state using getInitialState() method. getInitialState() method returns object of state values. Let’ use an example to understand this:

 

var MyComponent = React.createClass({
getInitialState : function() {
return {
firstname : "Dev",
lastname: "Abhi"
};
},
render : function() {
return <div>
My name is {this.state.firstname } {this.state.lastname}.
</div>;
}
});

ReactDOM.render(
<MyComponent />,
document.body
);

 

In the above example, we are setting two values i.e. first name and last name for MyComponent. So, these are the values that will be available in the first cycle of rendering. It’s very important to set the values in initial phase, before they are used or changed in subsequent life cycles of the component. Another important thing to note is that states are private to Components so it must be set from inside the component.

The above code will render firstname and lastname values as Dev and Abhi respectively. To update these values we have to update the state. To update the state we use this.setStatein React like this:

var MyComponent = React.createClass({
getInitialState : function() {
return {
firstname : "Dev",
lastname: "Abhi"
};
},
handleClick : function() {
this.setState({
firstname : "Raj",
lastname: "Kumar"
});
},
render : function() {
return <div onClick={this.handleClick}>
My name is {this.state.firstname } {this.state.lastname}.
</div>;
}
});

ReactDOM.render(
<MyComponent />,
document.body
);

 

Now the above code will render firstname and lastname values as Raj and Kumar respectively. So we just trigged UI update by manipulating state. 

Another way of changing state value is this.replaceState method. The difference between setState and replaceState is that set State method doesn’t remove old values, so, if you don’t set new values for a key that will exist, whereas replaceState completely removes old values and only new values you provide in it is set. 

Taking a look at Flux architecture in ReactJS application. Dispatcher, Store and Actions

Flux is an architecture that is used with Reactjs. It is often mistaken to be framework or a library but unlike that, it’s an architecture for creating layers of data with framework like Reactjs. It provides uni-directional path for data-flow and makes tracing of both, changes in data and bugs easier.

Flow or data in flux architecture works with four components, action creator, dispatcher, store, and Controller-Views. Now let’s understand these four components separately:

1) Dispatcher: Dispatcher is base station and manager of flow of data in flux. It is used to register callbacks in the stores. It doesn’t have much of its own logic. There can be more than one store in flux and all store have their callbacks. 

2) Store: Stores are like models in MVC architecture. All stores provides their own logic. When there are more than one store Dispatcher also maintains interaction between Stores.   

3) Controller-Views and Views: Controller views take data from Stores and pass it to its next view to render via setState() or forceUpdate() methods.

4) Actions: Actions are methods that let flux dispatch payload of data to stores. 

To understand the above four components better let’s see how they work together to provide unidirectional flow of data. 

When user interacts with view it calls an action creator. The action creator causes an event, which is emitted to the dispatcher. The action is sent from the dispatcher to the stores. Dispatchers don’t provide any logic about how to update store rather the business logic is provided by Store itself. When the store updates itself, Controller-view watches for the changes and passes the new data to child views, which renders or renders itself with new data. 

Everything You need to know about React component lifecycle

Every framework has its own life cycle and react js is no different. In order to have a better control of a framework it’s important to have good understanding of its life cycle. So, in this article we will discuss everything you need to know about the React component lifecycle.

Things start with calling  React.createClass() method which further calls render method and set off life-cycle. The initial state of life cycle can be divided into 5 phases:

1) getInitialState method is called to set the initial state value, which can be accessed in component via this.state
2) getDefaultProps method is called to define the default props value, which can be accessed in component via this.props
3) componentWillMount method is call before component is rendered. This is the stage when we can set the state value. Setting state value at this stage won’t render the component again
4) render method is called, which returns the markup of the component after evaluating the state and props value.
5) componentDidMount method is called, which allows access to DOM. This is the correct stage to manipulate DOM, if needed.

When State Change is triggered, the following methods are called to update the changes :

1) shouldComponentUpdate is called which is used to check if re-rendering is needed or not.
2) componentWillUpdate is called if shouldComponentUpdate returns true. This is just the of phase preparing things for State Changes update and not exactly updating things.
3) render method is called which returns the updated markup that occurred because of State change
4) componentDidUpdate is called to after render method which can be used for DOM manipulation required after render

Props changes also calls the methods very similar to the State change methods with one additional method in the beginning. The following methods are called when Prop change:
1) componentWillReceiveProps is called when Prop changes, which also changes the State depending on the changes in Props.
The rest of the methods works same as above state methods
2) shouldComponentUpdate
3) componentWillUpdate
4) render
5) componentDidUpdate

When the component is removed from DOM componentWillUnmount is called which is used to perform the cleanup operations like removing the things defined in previous phases.

What You need to know when testing ReactJS application

Testing is integral part of any type of software/application development and reactjs app development is not an exception. But, there are certain things we should keep in mind while testing reactjs app, to maintain quality. There are various approaches to test a react app and choosing the best approach is what ensures a robust app.

Structure of state and properties that will be rendered and possibility of transition from one state to another are the two most important concerns while testing react app. We can tackle these two concerns with different approaches. 

One approach we can use is to test the app against a real DOM because React renders virtual DOM as real DOM. The advantage of this approach is that there are many tools available for writing test like this. Even j Query can be used to write a Real DOM based test.  Disadvantage of this approach is that it’s harder to test Props with this approach because they are not placed inside component. 

Another approach of testing would be testing in terms of Virtual DOM. Using this approach we can test the tree structure that is created during render. Test-utilities that come with React can be used to write these types of tests. The advantage of this approach is that we can test props, states, or keys that are part of low level components. The disadvantage of this approach is that verbosity is missing and tools like j Query cannot be used.

So, we see that the freedom of approach provided by react should be used wisely considering its pros and cons for writing good tests. 

End of Parse.com

What is Parse.com ?

Parse is a platform and support system that provides backend service for mobile applications currently owned and maintained by Facebook. It also allows you to send push notifications to app users and communicate with them. When you are developing a mobile app you need some place to store user data. Parse has also some hosting and analytics tools. Using Parse could save you as a developer a lot of money and work.

The main reason why it is being shut down is that they want to focus on their core activity. Competing with such giants of cloud services like, Amazon, Microsoft, and Google doesn’t seem to be a good idea.

Maybe management at Facebook sees more value in other enterprises, like Oculus or the messaging platform – WhatsApp.

What to do next?

They have already released Parse server and database migration tools and they’re giving until 28 January 2017 to shut it down. Until then, they’re giving all the support to transfer all parts of application being held on Parse.com. The best advice for this transition is to migrate data to self-hosted MongoDB as a first step and to set up your self-hosted Parse server with new release of an app pointing to it. In the migration guide, you can find recommendations to use such services as Heroku and MongoLab, but any infrastructure provider that uses Node.js environment would be great. After a complete and successful migration you should have: Parse server running locally, all the app data stored in MongoDB hosted on MongoLab, Parse server running on Heroku and no dependencies on api.parse.com.

React: Props versus State

Developers new tо ReactJS арреаr tо gеt соnfuѕеd соnсеrnіng whаt thе соntrаѕt іn the middle оf props and state are within раrtѕ. Aftеr all, they do both wоrkѕ comparably; hоwеvеr, there are a fеw соntrаѕtѕ.

Prорѕ otherwise knоwn аѕ Prореrtіеѕ

Thе mоѕt ѕtrаіghtfоrwаrd аррrоасh tо thіnkіng аbоut thе role оf “рrорѕ” is to utilize аn еxаmрlе. If you need to put a password field into a fоrm уоu would ассоmрlіѕh something lіkе thе fоllоwіng:

<іnрut tуре=”раѕѕwоrd” nаmе=”раѕѕwоrd”>

Thе іnрut іtѕеlf іѕ thе part and “type” аnd “name” are segments оf thе соmроnеntѕ, thеу аrе what mіght as wеll be саllеd configuration options provided unlоаd.

Sіmіlаrlу, аѕ thе соmроnеnt іѕ соnсеrnеd, thеу аrе unchanging and can nоt be trаnѕfоrmеd from the соmроnеnt іtѕеlf. Mеаnіng you саn nоt сhаngе what has already bееn рrоvіdеd аftеr the fact.

State

Thіѕ іѕ thе рlасе уоu wіll see thе distinction. Whіlе a соmроnеnt can have dеfаult values supplied tо it whеn a раrt іѕ initialised, this іѕ thе рlасе thіngѕ vary frоm thаt оf рrорѕ.

A ѕtаtе еxреrіеnсеѕ сhаngеѕ usually аѕ a consequence оf a сlіеnt асtіvіtу, fоr еxаmрlе, a ѕtаtе еѕtееm thаt mоnіtоrѕ regardless оf whether the customer hаѕ clicked on a button оr рrеѕѕеd thе еntеr key twісе.

A state is a рrіvаtе snapshot аt the time of a соmроnеnt thаt саn nоt bе adjusted by ѕоmе other еlеmеntѕ, ѕіmіlаr to a сhіld соmроnеnt. It іѕ private to thаt оnе соmроnеnt оnlу. Dіѕѕіmіlаr to рrорѕ which саn bе passed down to child components frоm a parent component, thе state can’t bе раѕѕеd, аt lеаѕt nоt ѕtrаіghtfоrwаrdlу.