セットアップReact.jsとBabel

Question

私はWeb開発プロジェクトのためにUbuntuでReact.jsを使用しようとしていますが、セットアップ方法を理解できません。私は初心者で、以前はJQueryでJavascriptしか使用していなかったことに注意してください。私は指示hereに従おうとしましたが、私はBabelを構成するはずのポイントまで作ったと思います。ここで、端末に私は

npm install --save-dev babel-cli babel-preset-react babel-preset-es2015 

echo '{ "presets": ["react", "es2015"] }' > .babelrc 

echo 'console.log([1, 2, 3].map(n => n + 1))' > index.js 

./node_modules/.bin/babel index.js 

を走った私が手出力は次のようになります。

"use strict"; 

console.log([1, 2, 3].map(function (n) { 
    return n + 1; 
})); 

これは素晴らしいとすべてですが、私は、対応する.jsファイルとhtmlファイルを実行できるようにしたいです私は通常通りです。それがあるように、私は私がちょうどコンソールのエラー（予期しないトークンの挿入または何か）を取得するには、対応するHTMLファイルと

import React from 'react'; 
import ReactDOM from 'react-dom'; 

ReactDOM.render(
    <h1>Hello, world!</h1>, 
    document.getElementById('root') 
); 

のようなものを書くとき。明らかに、私はEcmascript/JSXなどをインストールすることはできませんでした。私は自分が何をしているのか本当に分かりません。

だから、私の質問は誰も助けてくれるのですか？ ReactでJavascriptを書いて、簡単なWebページを作成したいだけです。ありがとうございました！

Answer 1

インストールは の実行、npmと反応してインストールするように反応する：

npm init 
npm install --save react react-dom 

が

npm install -g create-react-app 
create-react-app hello-world 
cd hello-world 
npm start 

Answer 2

あなたがReactで開始するものの多くを必要といけない単一ページのアプリケーションの作成します。

反応を使用する必要があるのは、reactとreactdomです。 それはそうです。

ReactDOM.render(
 
    React.createElement('h1', {}, "Hi! This is the simplest way to get started with ReactJS"), 
 
    document.getElementById('only-react') 
 
);

<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react.js"></script> 
 
<script src="https://cdn.jsdelivr.net/react/0.14.0-rc1/react-dom.js"></script> 
 

 
<div id="only-react"></div>

これらの行は、あなたはちょうどあなたがチュートリアルのほとんどで見つけるすべてのブロートウェアなしリアクトを始める必要があります。

Answer 3

作成反応するアプリ

IMO、初心者のためのReactプロジェクトを開始するための最良の方法は、create-react-appを使用することです。これは、あなたがあなたのReact開発を開始するゼロ設定パッケージです。反応開発に必要なパッケージが含まれています。

npm install -g create-react-app 
create-react-app react-app 
cd react-app 
npm start 

は、あなたがそれをしたいし、あなた自身のあなたがbabelとwebpackと一つに設定でき、プロジェクトに反応セットアップしたくない場合は環境がWebPACKのとバベル

を使用して反応します。私はこれを調べて学ぶことをお勧めします。ここにはtutorialがあります。

初心者の方には最初のアプローチをお勧めします。

Answer 4

あなたのエラーはここから来る：

echo '{ "presets": ["react", "es2015"] }' > .babelrc 

バベルは、右から左にプリセットを適用します。それは、まずes2015コードをJSXをtranspile必要があります。

ソリューションは、このようなプリセットの配列順序を切り替えることで、あなたの.babelrcファイルを変更することです：

{ "presets": ["es2015", "react"] } 

そうでない場合は作成反応するアプリは、任意の設定なしで開始するのに最適なソリューションです。