Category Archives: javascript

Babel Cli to translate html loop in jsx to React.createElement

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) {}… ).

Sqlite DateTime compare in WebSQL

Sqlite has DateTime. However, in my test ‘DateTime’ is similar with ‘Text’.

for example, javascript moment.js,

1
2
3
4
5
6
 
var date = new moment().format('YYYY-MM-DD hh:mm');
saveToDatebase(date);
 
var date = new moment().format('YYYY-MM-DD h:mm a');
saveToDatebase(date);

in sqlite, two different format will saved as different string.

it is better not to compare two different format, such as ‘2016-10-10’ and ‘2016-10-10 10:10:10’. it is comparable, but it is meanless.

therefore, in my test, and date time should be save as YYYY-MM-DD hh:mm, such as ‘2016-10-10 10:10’ format.

then, sql statement like ‘select * from test where startDate < '2016-10-10 15:15' will work perfectly well.