ReactをimportしようとするとSyntaxError

Reactをimportしようとして、node {ファイル名} を実行した際にエラーが発生してしまいます。
ネットで調べた結果、transpileをしなくてはいけないのはわかったのですが、transpileの仕組みと仕方がわかりません。どなたか教えていただけないでしょうか？　MacのTerminalを使っています。お願いします。

Javascriptのファイル：

import React from 'react';
import { render } from 'react-dom';
import Hello from './Hello';

const styles = {
  fontFamily: 'sans-serif',
  textAlign: 'center',
};

const App = (props) => (
  <div style={styles}>
    <h2>{props.count}</h2>
  </div>
);

const App2 = function(props) {
  return (
    <div style={styles}>
      <h2>{props.count}</h2>
    </div>
  )
}
let count = 0

setInterval(
  function() {render(<App2 count={count++} />, document.getElementById('root'))},
  1000
)

エラー：

import React from 'react';
       ^^^^^

SyntaxError: Unexpected identifier
    at Module._compile (internal/modules/cjs/loader.js:723:23)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:831:12)
    at startup (internal/bootstrap/node.js:283:19)
    at bootstrapNodeJSCore (internal/bootstrap/node.js:622:3)

Process finished with exit code 1