Chapter 10. What's Next

Until now, we have covered all the topics from building a React-based JavaScript application from scratch, integrating it with the Facebook Graph API, digging into the various stages of a component, it's life cycle, validating, testing, and deploying the apps. With that, we have reached the end of this book, but let's explore some advanced topics in React world.

In this chapter, we will be exploring the following topics briefly because it's not possible to cover everything in detail within one chapter:

• AJAX in React

• React Router

• Server-side rendering

• Isomorphic applications

• Hot reloading

• Redux React

• Relay and GraphQL

• React Native

AJAX in React

Like in any other applications, AJAX in a React-based application can be used to fetch data asynchronously. According to the Facebook documentation of loading the data from the server using AJAX (https://facebook.github.io/react/tips/initial-ajax.html), you need to remember some of the key points as mentioned here:

• Include the jQuery library in your HTML:

  <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>

  Because there is no separate Ajax-only library from jQuery that can be used, the entire jQuery has to be used in a React-based application, while using Ajax. Downloading the minified version of jQuery from cdn results in much less load time.

  Load the data in the life cycle phase of componentDidMount. This method occurs only once during the life cycle on the client, and any child components can be accessed in this phase. Any external js library or loading data using AJAX is advised to be done in this phase.

• The isMounted method is used to check whether the...

React Router

React Router is a library based on top of the React library, which helps in easy and quick routing of an application with multiple pages. Although it may be possible to build such a flow in the application without the React-router, as the application grows with many pages, it becomes cumbersome to identify the child-parent relationship between the pages. This is where React-router comes to our rescue, where it identifies how to build the nested UIs.

Sources:

• https://github.com/reactjs/react-router

• https://www.npmjs.com/package/react-router

Server-side rendering

Server-side rendering in ReactJS is done by JavaScript (NodeJS or io.js). This method actually prerenders the initial state of the React components at the server side. Thus, it is helpful in fast rendering of web pages, as the users can see the web pages without having to wait for the entire JavaScript at the client side to finish loading.

However, this kind of rendering should not be used for those applications where a huge amount of data has to be piped from the server to the client side, which may slow the page load. In such cases, we may use pagination or bulk load the data in chunks, which won't slow the page load, but can be fetched from the server side in specific time intervals.

The following two methods from the React API provides the backbone of server-side rendering (https://facebook.github.io/react/docs/top-level-api.html).

ReactDOMServer

The react-dom/server package allows you to render your components on the server.

The ReactDOMServer.renderToString method...

Isomorphic applications

Isomorphic JavaScript applications are those where JavaScript is used both at the server and client side. Thus, the same React component can be used both at the client as well as at the server side. Some of the advantages of building such applications are:

• Whenever required, render the view at the server side based on the application state

  • The server will render the application in exactly the same way the client would have rendered for increased consistency

• In case the JavaScript in the browser is not working, the application would still work because the same JavaScript is present at the server side as well. You need to send the action to the server in order to attain the same result.

Hot reloading

Hot reloading is a term used in the JavaScript world, which is used to refer to live changes in the browser without the browser being refreshed. In the React ecosystem, React Hot Loader is widely used for the same purpose.

React Hot Loader is a plugin for Webpack, which results in instantaneous and live changes in the browser, without losing states. The changes can be visible while editing React components and functions as LiveReload for React.

Some limitations of the react hot loader first version have been discussed by the author (Dan Abramov) here at https://medium.com/@dan_abramov/the-death-of-react-hot-loader-765fa791d7c4#.fc78lady9. The details of the project can be found at https://gaearon.github.io/react-hot-loader/.

Redux React

Redux is a JavaScript library designed by Dan Abramov, which helps in containerization of the states for the JavaScript applications. As the application grows, the complexity rises due to the requirement of the back and forth state updatability between the model and the view. Redux came to the rescue to solve this crooked complex path of state mutation and asynchronism. Thus, it defines itself as an attempt to make predictable state mutations.

It can be used with React or any other view library. Some of the key points to be remembered while using Redux are as follows:

• The state of the JavaScript application is stored entirely inside the same object tree inside a single store. Thus, even when the application grows, it's easier to debug. The development phase is also faster as the entire application state is in one place. The state is read only; there are only getters in the state and no setters as you are unable to write to this store.

• Any change to the state can only be done by...

Relay and GraphQL

Relay is a framework in ReactJS for declarative data fetching, which solves the problem of updating the data in a React-based application and where exactly it has to be updated. Using GraphQL, the Relay framework decouples what data is to be fetched from how it should be fetched.

GraphQL is like a query language to query a graph though not typically a graph like those represented in pie charts, x, y axes, or Venn diagrams.

• It's used to query from a relationship graph, where each node and the relationship between them are represented as edges.

• In order to fetch data from a subset of such a relationship-based graph, GraphQL is very useful.

• Unlike in representational state transfer (REST) where data is fetched from the server based on server endpoint using resources, in GraphQL data are fetched from the server based on the requirement by the client.

• Thus, the data is decoupled, and all the data are fetched at one go from the server within a single network request.

• Data can be stored...

React Native

As the name suggests, React Native is used to build native applications in iOS and Android platforms using JavaScript and ReactJS. Some of the key features of React Native, favored by the Facebook developer teams (https://facebook.github.io/react-native/) for the native platforms, are mentioned here:

• It has the power of consistency in look and feel using React component counterparts

• You can develop the app using Chrome developer tools and run in a simulator

• There is asynchronous execution of all the code between the application and the native platform

• React Native seamlessly handles touch events, polyfills, StyleSheet abstraction, designing common UI layouts

• It's widely used to extend native code creating iOS and Android modules and views and reusing them later, with ease

• React Native's qualities of being declarative, asynchronous, and responsive are highly beneficial for iOS development

References

Note that the list here is nothing near to an exhaustive one, there are plethora of good articles, blog posts, and newer ones budding each new day.

Here are some of the sites to keep an eye on:

• https://facebook.github.io/react/blog/

• https://egghead.io

• https://code-cartoons.com/

The following are some of the communities on social media:

• https://twitter.com/ReactJSNews

• https://twitter.com/reactjs

• https://twitter.com/dan_abramov

Summary

ReactJS is a vibrant JS community. There are many changes and advancements in the JavaScript ecosystem happening on a daily basis. Keeping ourselves up to date is a mammoth and essential task. We can closely track the latest in JS world by following them on social platforms, question-answer forums, their websites, attending conferences and, last but not the least, always getting our hands dirty.

For any comments, suggestions or discussion feel free to contact us at @doelsengupta, @singhalmanu.