2017-08-17 5 views
-4

私はreactJSを見てみようとしています。 残念ながら私が見つけたすべてのチュートリアルは、IDEを持っていると仮定しています。しかし、私はこの目的のためだけにIDEをインストールしたくないし、自分の仕事場でもIDEをインストールすることはできない。ReactJS IDEなし

私はIDEなしでReactをどのように使用できるのか不思議です。必要なライブラリファイルを注入するだけです。私は気にしない、もしそれが他のものより遅く働いているならば、私はただそれを働かせたい。

私が書いたファイルを後で保存したいので、JSbinとCoは二番目の選択肢です。

チュートリアルを知っている人は誰ですか、私はどのライブラリを注入しなければならないのですか、どのようにして最初のステップを得ることができますか?

誰かが助けてくれることを願っています。クリスチャン

はところで、私の実際の試みは、このようになります

よろしく:このため

<!doctype html> 
<html> 
<head> 
<title>React</title> 
    <meta charset="utf-8"> 

    <script src="https://unpkg.com/[email protected]/dist/react.min.js"></script> 
    <script src="https://unpkg.com/[email protected]/dist/react-dom.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script> 

</head> 

<body> 

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


<script type="text/jsx"> 

var meineKomponente = React.createClass({ 
    render: function() {  
     return <h1>Hallo Welt</h1>; 
    } 
}); 

React.render(<meineKomponente />, document.querySelector('#react-container')); 

</script> 
</body> 
</html> 

情報が別の場所から収集され、もちろん、それは動作しません。

+0

蒸散を意味する場合は、Nodeとnpm(それぞれビルドと依存関係)が必要です。あなたが使っているテキストエディタは無関係ですが、いくつかはReact(linting、highlightingなど)を扱うときに細心の注意を払っています。また、実行時にJSXを解析することは最適ではありません。 – Joseph

+0

IDEを使用しない理由はほとんどありません。なぜならそれらのほとんどは無料であるからです。 –

+0

@MuratK。「私は働く場所でさえできません。」 – shabs

答えて

1

いくつかのブラウザベースのIDEがあります。

  • StackBlitz - https://stackblitz.com/は - のみ最近、この話を聞いたので、実際にそれを使用していないが、それは本当の素敵なようです。ボーナスとして、ReactJSプロジェクトのためのクイックスタートテンプレートがあります。これはあなたが探しているものと正確に一致するかもしれません。
  • Cloud9:https://c9.io/ - 常に選択してください。

さらに、私は確信しています。

+0

ありがとう、それは、私が探していたものです。 –

0

ライブラリやフレームワークを使用するための特定のIDEは必要ありません。メモ帳やテキストエディタを使用して同じ結果を得ることができます。

質問は、なぜIDEを使用しないのですか?コードの補完、自動リンピング、および無限に近い数の有用なプラグインは、あなたがIDEのルートに行くならば自由自在です。

限りチュートリアルが行くように、Facebookの自分のドキュメントは基本のすべてをカバーして偉大なチュートリアルを持っているリアクト:https://facebook.github.io/react/tutorial/tutorial.html

あなたは、彼らがES6を使用していることを懸念している場合は、あなたがなくなってものを見るためにJSFiddleを使用することができます間違っては:

https://jsfiddle.net/tt6uet4a/1/

var MeineKomponente = React.createClass({ 
    render: function() {  
     return <h1>Hallo Welt</h1>; 
    } 
}); 

ReactDOM.render(
    <MeineKomponente name="World" />, 
    document.getElementById('react-container') 
); 

限り、あなたのコードが行くように、あなたはReactDOMのレンダリング機能を使用して、だけでなく、あなたのJSX要素名を大文字化する必要があります。

0

Reactを開発するには、IDEは必要ありません。必要なのは端末とテキストエディタだけです。 私はあなたがjQueryのようなjavascriptライブラリとして反応していると考えていると仮定しています。そのため、をscriptに入れて、headタグ「old-school」javascriptのようにしています。

Reactの簡単な開始については、まずnodejsをご覧ください。インストールしてから、create-react-appに従ってください。

関連する問題