The JavaScript blog.


ES6 react material-design WebComponent

React Mount, Angular Material Design Dashboard

Posted on .

React Mount

If you want to use React more like web components, by including custom tags in HTML rather than JSX files, then take a look at Philipp Adrian's react-mount (GitHub: greenish/react-mount, License: MIT, npm: react-mount). All you need to do is define a React class with React.createClass, then mount it with React.mount. The HTML is then transformed to JSX by react-mount.

You can even nest components, so you can use it much the same way as you'd usually use React components. You can use expressions with curly braces to access props:

<translucent-component attribute={props.attribute}>  
    <p>Less than four list items? </b>{props.list.length <= 3 ? "Yes!" : "No!"}</b></p>
        {props.list.map(function(value, i){
            return <li key={i} >{value}</li>;

Angular Material Design Dashboard

Tushara Fernando has created a starting point for an Angular 1.3 Material Design application that uses ES6 and Karma/Protractor for tests: Excelian/Angular-Material-ECMA6-Dashboard.

The markup uses components, and there are components for alerts, a side menu, and a navigation bar. The way it uses ES6 modules with Angular is based on the GoCardless skeleton app.