17. April 2016

React & Material-UI, recently breaking changes.

Here we will talk about the recent changes in Material-UI and how it affects our React code.

Before moving further, if you have not yet started with Material-UI, here is my first post describing the details.

Current version of React is 15.0.1. To make Material-UI compatible with this version of React, a new version of Material-UI which is 0.15.0-beta.1 is released recently. However there are some breaking changes in this release of Material-UI if you are coming from the last version which is 0.15.0-alpha.2. The complete release note is here along with the change logs.

There are couple of things to change in our React application code.

import / require

The syntax for getting a component from Material-UI is changed. 

// Use
var AppBar = require('material-ui/AppBar')['default'] ;
// Or
import AppBar from 'material-ui/AppBar';
// instead of
var AppBar = require('material-ui/lib/app-bar'); // deprecated

Notice

  • there is no lib in between material-ui and AppBar
  • if using require , there is a ['default'] at the end

default theme handling

The default theme handling has changed for components and for that, some changes are required in application code.

In the RootControllerView / MainControllerView, import the following.

import baseTheme from 'material-ui/styles/baseThemes/lightBaseTheme';
import getMuiTheme from 'material-ui/styles/getMuiTheme';

In the same RootControllerView / MainControllerView, inside component declaration add

childContextTypes:{
  muiTheme: React.PropTypes.object.isRequired,
},
getChildContext() {
  return {muiTheme: getMuiTheme(baseTheme)};
},

Here is a little more in-depth view of the scenario.

Happy Reacting.

04. April 2016

React Native

The beauty of React is it now has a lot to offer and React Native is just an amazing way to create native mobile applications with Javascript or more specifically with React. Yes, we are talking about native applications. Unlike Cordova, React Native applications do not run inside a webview. These applications use the native components from the environment it is running in. If its running in iOS the components like buttons, views etc are real iOS components. Same is true for Android.

From the first few weeks of React Native I must say its worth a try. There might be a chance that even the same code is running in both iOS and Android. Though its almost always a little different code for both the platforms. But all in all, its all Javascript.

I am not going in details of getting started here. May be in a next blog post we will explore that. If you are already developing in React you are already there. No extra effort for another toolset or language.

Happy Reacting.