Build with material-ui

material-ui is a set of React components that implement Google's material design. It's a great choice to help you quickly develop your web app with a sophisticated look and feel UI that is designed to be responsive. It's very simple to add material-ui components to an Electrode app. We've built a sample with step-by-step instructions to show you how.

Installation

Prerequisites

Make sure you have installed NodeJS >= 4.x and npm >= 3.x, and [xclap-cli].

$ node -v
v6.6.0
$ npm -v
3.10.3
$ npm install -g xclap-cli

Check it out

To try out this ready made sample app, use git to clone the repo:

$ git clone https://github.com/electrode-io/electrode.git
$ cd electrode/samples/universal-material-ui
$ npm install
$ clap dev

Now navigate your browser to http://localhost:3000 to see the sample app with material-ui components.

About

This app was created with the following steps.

Generate an Electrode App

The first part of the process is to generate an Electrode Universal App using the Yeoman generator. Follow the steps below:

  1. First, generate the Electrode Universal App with the following commands:
$ npm install -g yo generator-electrode
$ mkdir react-sample-material-ui
$ cd react-sample-material-ui
$ yo electrode
# ... answer questions and wait for app to be generated and npm install completed ...
  1. Run clap dev in the newly generated app
  2. Navigate to http://localhost:3000 to make sure the app is working.

Add material-ui

The second part of the process is to add material-ui dependencies. Follow the steps below:

  1. Stop the app and install material-ui dependencies: $ npm install material-ui react-tap-event-plugin --save

  2. Restart clap dev and reload browser to make sure things are still working.

  3. Add material-ui's required font, Roboto, to server/plugins/webapp/index.html

  4. Update client/styles/base.css with styles for material-ui.

  5. Test your material-ui component by adding a RaisedButton to client/components/home.jsx

  6. Watch webpack-dev-server update your bundle and refresh your browser to see the changes.

  7. Add global.navigator.userAgent to server/index.js, as required by material-ui for Server Rendering.

  8. Watch webpack-dev-server update your bundle and refresh your browser to see the changes.

Add material-ui Examples

Now we are ready to add some of the material-ui examples to the app.

Enable tapping

First we have to add the resolution for an issue in material-ui.

Add the following code to client/app.jsx

import injectTapEventPlugin from "react-tap-event-plugin";

window.webappStart = () => {
  injectTapEventPlugin(); // https://github.com/callemall/material-ui/issues/4670

};

IconMenu AppBar example

First add the IconMenu AppBar example by following the steps below.

  1. Copy the source from the example into client/components/AppBarExampleIconMenu.jsx
  2. Replace the Hello Electrode and the RaisedButton content in client/components/home.jsx with <AppBarExampleIconMenu />;
  3. Watch webpack-dev-server update your bundle and refresh your browser to see the changes.
  4. If the AppBar shows up, click on the right menu button. You should see a menu pop up.

BottomNavigation example

Next, add the BottomNavigation example:

  1. Copy the source from the example into client/components/BottomNavigationExampleSimple.jsx
  2. Import the component in client/components/home.jsx and add it to render after the AppBarExampleIconMenu component.
  3. Watch webpack-dev-server update your bundle and refresh your browser to see the changes.
  4. You should see AppBar and BottomNavigation show up. You should be able to interact with the buttons on the BottomNavigation component.

Card example

In this section we add theCard example.

  1. Copy the source from the Card example into client/components/CardExampleWithAvatar.jsx
  2. Import the component in client/components/home.jsx and add it to render after the AppBarExampleIconMenu component.
  3. Watch webpack-dev-server update your bundle and refresh your browser to see the changes.
  4. You should see Card show up, but with broken images.

You can replace the image URLs with full URLs by adding http://www.material-ui.com/ to them to fix the broken images, but we will explore isomorphic images next.

Isomorphic Images

Electrode core comes with isomorphic images support built in usingisomorphic-loader. In this section we explore using that feature to load the images for theCard example.

Create a directory called

  1. client/imagesand copy the following images there:
    • http://www.material-ui.com/images/nature-600-337.jpg
    • http://www.material-ui.com/images/jsa-128.jpg(Or your own favorite 128x128 Avatar image)
      • In my sample, I use jchip-128.jpgas my avatar.
  2. Inclient/components/CardExampleWithAvatar.jsx, import the images:

    import natureJpg from "../images/nature-600-337.jpg";
    import avatarJpg from "../images/jsa-128.jpg";
    
  3. Replace the URLs foravatarandCarMediaas follows:

    ...
      avatar={avatarJpg}
    ...
      src={natureJpg}
  1. In server/index.js, activate isomorphic-loader's extend-require by changing the last line to:
supports.isomorphicExtendRequire().then(() => {
  require("electrode-server")(config, [staticPathsDecor()]);
});
  1. Watch webpack-dev-server update your bundle and refresh your browser to see the changes.

Note that you will see the message Warning: Unknown prop onTouchTap on <button> tag. Show up on the server side rendering because of the tapping event plugin, which we don't need on the server.

results matching ""

    No results matching ""