jsx-no-react-amp

jsx-no-react-amp makes it possible to use React's JSX syntax outside of React projects.

The source is almost entirely based on https://github.com/bitboxer/jsx-no-react repo. It adds smalls adjustments to the jsx pragma module for it to be AMP-compatible.

Installation

yarn add jsx-no-react-amp

You'll also need to hook the jsxElem function into the JSX transformation, for which you should probably use babel, which you can install and setup fairly simply:

yarn add babel-plugin-transform-react-jsx babel-preset-env

and configure babel to correctly transform JSX with a .babelrc something like:

{
  "presets": ["env"],
  "plugins": [
    [
      "transform-react-jsx",
      {
        "pragma": "jsxElem"
      }
    ]
  ]
}

Usage

Basic

The jsx-no-react-amp package just defines a function to replace the React.createElement, so as well as importing the relevant function into scope where you want to use JSX:

import jsxElem, { render } from "jsx-no-react-amp";

function App(props) {
  return <div>Hello {props.name}</div>;
}

render(<App name="world" />, document.body);

or

import jsxElem, { render } from "jsx-no-react-amp";

function App(name) {
  return <div>Hello {name}</div>;
}

render(App("world"), document.body);

Components

Define

It's possible to define a component in different ways:

function Hello(props) {
  return <h1>Hello {props.name}</h1>;
}

// anonymous Function
const Hello = function(props) {
  return <h1>Hello {props.name}</h1>;
};

// arrow function
const Hello = props => <h1>Hello {props.name}</h1>;

// simple element
const hello = <h1>Hello</h1>;

Always start component names with a capital letter. babel-plugin-transform-react-jsx treats components starting with lowercase letters as DOM tags. For example <div /> is an HTML tag, but <Hello /> is a component and requires a user definition.

Please read JSX In Depth for more details and try babel example

Rendering

When rendering a component JSX attributes will be passed as single object.

For example:

import jsxElem, { render } from "jsx-no-react-amp";

function Hello(props) {
  return <h1>Hello {props.name}</h1>;
}

render(<Hello name="world" />, document.body);

Composing Components

Components can be reused and combined together.

import jsxElem, { render } from "jsx-no-react-amp";

function Hello(props) {
  return <h1>Hello {props.name}</h1>;
}

const CustomSeparator = props => (
  <i>{[...Array(props.dots)].map(idx => ".")}</i>
);

function App() {
  return (
    <div>
      <Hello name="foo" />
      <CustomSeparator dots={50} />
      <Hello name="bar" />
    </div>
  );
}

render(<App />, document.body);

Event

It's possible add events listeners to components as functions using camelCase notation (e.g. onClick)

For example:

function Hello(props) {
  return <h1>Hello {props.name}</h1>;
}

function App() {
  const clickHandler = function(e) {
    alert("click function");
  };

  return (
    <div>
      <Hello onClick={() => alert("inline click function")} name="foo" />
      <Hello onClick={clickHandler} name="bar" />
    </div>
  );
}

Embedding expressions in JSX

map()

function Hello(props) {
  const names = props.names;

  return (
    <div>
      {names.map(name => (
        <h1>Hello {name}</h1>
      ))}
    </div>
  );
}

function App() {
  return (
    <div>
      <Hello names={["foo", "bar"]} />
    </div>
  );
}

Inline If with Logical && Operator

function Hello(props) {
  return <h1>Hello {props.name}</h1>;
}

function App() {
  return (
    <div>
      {document.location.hostname === "localhost" && (
        <h1>Welcome to localhost</h1>
      )}
      <Hello name="foo" />
      <Hello name="bar" />
    </div>
  );
}

Calling a Function

function Hello(props) {
  return <h1>Hello {props.name}</h1>;
}

const CustomSeparator = props => (
  <i>{[...Array(props.dots)].map(idx => ".")}</i>
);

function App() {
  return (
    <div>
      <Hello name="foo" />
      <CustomSeparator dots={50} />
      <Hello name="bar" />
      {CustomSeparator({ dots: 10 })}
    </div>
  );
}

Style-Attribute

Object can be passed to the style attribute with keys in camelCase.

import jsxElem, { render } from "jsx-no-react-amp";

function Hello(props) {
  return <h1>Hello {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Hello style={{ backgroundColor: "red" }} name="foo" />
      <Hello style={{ backgroundColor: "blue", color: "white" }} name="bar" />
    </div>
  );
}

render(<App />, document.body);

Acknowledgement

This package was originally developed by Terry Kerr.