step 1: create a project using following command line
npm init
npm install --save-dev babel-cli
npm install babel-plugin-transform-react-jsx
save following code into build.sh
./node_modules/.bin/babel --plugins transform-react-jsx index.jsx
step 2: create .babelrc
{
"presets": ["es2015", "react"]
}
step 3: create index.jsx
import React from 'react';
const items = [
{ id: 1, name: 'Item 1' },
{ id: 2, name: 'Item 2' },
{ id: 3, name: 'Item 3' },
];
function MyComponent() {
return (
<div>
<h1>Items List</h1>
<ul>
{items.map(item => (
<li key={item.id}>{item.name}</li>
))}
</ul>
</div>
);
}
export default MyComponent;
final step: run build.sh
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var items = [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' }];
function MyComponent() {
return _react2.default.createElement(
'div',
null,
_react2.default.createElement(
'h1',
null,
'Items List'
),
_react2.default.createElement(
'ul',
null,
items.map(function (item) {
return _react2.default.createElement(
'li',
{ key: item.id },
item.name
);
})
)
);
}
exports.default = MyComponent;
Summary
you could see that items.map(item => ()) has been translated into _react2.default.createElement(…items.map(function (item) {}… ).