html-to-react-loader

A Webpack loader allowing imports of HTML files as there were React Components

Installation

As a command line tool:

npm install -g html-to-react-loader

Or as a Webpack loader:

npm install --save-dev html-to-react-loader

Demo: First name, last name component

user-component.jsx.html

<import path="./text-input" as="text-input" />

<template>
  <div>
    <div class="row">
      <span class="label" for="first-name">First name:</span>
      <span class="value">
        <text-input
          id="first-name"
          value="{{ props.firstName }}"
          on-change="{{ props.onFirstNameChange }}"
        />
      </span>
    </div>

    <div class="row">
      <span class="label" for="last-name">Last name:</span>
      <span class="value">
        <text-input
          id="last-name"
          value="{{ props.lastName }}"
          on-change="{{ props.onLastNameChange }}"
        />
      </span>
    </div>

    <div class="row">
      <span class="label">Full name:</span>
      <span class="value">{{ props.firstName }} {{ props.lastName }}</span>
    </div>
  </div>
</template>

user-container.jsx

'use strict';

import React, { Component } from 'react';
import UserComponent from './user-component';

export default class UserContainer extends Component {
  constructor(props) {
    super(props);

    this.state = {
      firstName: '',
      lastName: ''
    };

    this.handleFirstNameChange = this.handleFirstNameChange.bind(this);
    this.handleLastNameChange = this.handleLastNameChange.bind(this);
  }

  handleFirstNameChange(e) {
    e.preventDefault();
    this.setState({ firstName: e.target.value });
  }

  handleLastNameChange(e) {
    e.preventDefault();
    this.setState({ lastName: e.target.value });
  }

  render() {
    return (
      <UserComponent
        firstName={ this.state.firstName }
        lastName={ this.state.lastName }
        onFirstNameChange={ this.handleFirstNameChange }
        onLastNameChange={ this.handleLastNameChange }
      />
    );
  }
}

UserContainer.displayName = 'UserContainer';

Basic webpack.config.js

{
  module: {
    loaders: [
      {
        test: /\.jsx$/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.jsx\.html$/,
        exclude: /node_modules/,
        loader: 'babel-loader!html-to-react'
      }
    ]
  },

  resolve: {
    extensions: [ '.jsx', '.jsx.html' ]
  }
}

Usage

Imports

Default import

Import a default component.

Usage

<import path as />

Attributes

• path: Path to the file to import,
• as: Tag name to use to reference the default component of the imported file.

Example

<import path="path/to/component" as="my-component" />

Is equivalent in ES2015 to

import MyComponent from 'path/to/component';

Named imports

Import a component by its name. The import tag for a named import must be child of an other import tag having a path attribute.

Usage

<import path>
  <import name as />
</import>

Attributes

• path: Path to the file to import,
• name: Name of the component to import,
• as: Tag name to use to reference the component.

Example

<import path="path/to/component">
  <import name="ANamedImport" as="a-named-import" />
  <import name="AnohterNamedImport" as="second-component" />
</import>

Is equivalent in ES2015 to

import {
  ANamedImport as ANamedImport,
  AnohterNamedImport as SecondComponent
} from 'path/to/component';

Default and named imports

Import the default and some named components from the same file.

Usage

<import path as>
  <import name as />
</import>

Attributes

• See default imports and Named imports.

Example

<import path="path/to/component" as="my-component">
  <import name="ANamedImport" as="a-named-import" />
  <import name="AnohterNamedImport" as="second-component" />
</import>

Is equivalent in ES2015 to

import MyComponent, {
  ANamedImport as ANamedImport,
  AnohterNamedImport as SecondComponent
} from 'path/to/component';

Templates

A template is an HTML node containing a single root child.

Default template

Each file must contain only one default template. A default template cannot be named, it is the entry point of the file.

Usage

<template>
  <!-- Content -->
</template>

Attributes

• None.

Example

<template>
  <div>Hello World</div>
</template>

Is equivalent in React to

export default function() {
  return (
    <div>Hello World</div>
  );
}

Named templates

A named template is simply a template with a name attribute, which means it can be used by referencing its name. All named templates will be exported under their given name.

Usage

<template name>
  <!-- Content -->
</template>

Attributes

• name: Tag name to use to reference this template.

Example

<template name="named-template">
  <!-- ...  -->
</template>

<template>
  <!-- ...  -->
  <named-template />
  <!-- ...  -->
</template>

Is equivalent in React to

export function NamedTemplate(props) {
  return (
    // ...
  );
}

export default function(props) {
  return (
    // ...

    <NamedTemplate />

    // ...
  );
}

Loops

A loop will repeat its content for each element in the array. The repeate tag can only have one child.

Usage

<repeat for-each as>
  <!-- Content -->
</repeat>

Attributes

• for-each: Array of data,
• as: Name of variable to use for each element.

Example

<template>
  <div class="users">
    <repeat for-each="{{ props.users }}" as="user">
      <div key="{{ user.id }}">{{ user.name }}</div>
    </repeat>
  </div>
</template>

Is equivalent in React to

export default function(props) {
  return (
    <div className="users">
      { props.users.map(user => (
        <div key={ user.id }>
          {{ user.name }}
        </div>
      )) }
    </div>
  );
}

Conditionals

A conditional will render its content depending on a condition. The render tag can only have one child.

Usage

<render if>
  <!-- Content -->
</render>

Attributes

• if: Condition to fulfill for the content to be rendered.

Example

<template>
  <div class="user">
    <render if="{{ props.user }}">
      <div>{{ props.user.name }}</div>
    </render>
  </div>
</template>

Is equivalent in React to

export default function(props) {
  return (
    <div className="user">
      { (props.user) && (
        <div>{{ props.user.name }}</div>
      ) }
    </div>
  );
}