59168


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

Javascriptのファイル：

[code]

    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
    )
    
[/code]

エラー：

[code]

    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
    
    
[/code]


CC BY-SA 4.0
2019-09-19T04:01:51.313
59150
2019-09-20T01:07:37.140
2019-09-19T06:19:00.627
19110
32301
question
javascript reactjs
ReactをimportしようとするとSyntaxError


多分ですが、package.jsonを用意しないでnode xxxx.jsを実行されていませんか？

[code]

    $ npm init
    $ npm add -y react react-dom
    
[/code]

reactアプリを作成する場合は、npm installでプロジェクトを作成する必要があります。  
こちらとか参考にされては？  
<https://qiita.com/akirakudo/items/77c3cd49e2bf39da79dd>

もしくは、create-react-appを使うと即動くものができますよー！  
<https://qiita.com/chibicode/items/8533dd72f1ebaeb4b614>

追記  
すみません、トランスパイルについてはこちらが参考になるかと思います。  
<https://qiita.com/gipcompany/items/63641286921cbe223c94>


CC BY-SA 4.0
2019-09-20T01:07:37.140
59168
2019-09-20T01:07:37.140
35909
59150
answer