問題タブ [jsx]

私はこのような静的サイトを構築します (about.html):

これは、すべてのフロントエンド作業にとって問題なくダンディーです。ビルド プロセスを実行して適切な html に変換します。

しかし、私は静的サイト ジェネレーターのような別のものを試してみたかった: jekyll、ミドルマン。

次を使用して、jekyllにjsxを読み取らせることができました。

しかし、これはビルド プロセス中に jsx から html ファイルを生成する場合には機能しません。

写真に欠けているものはありますか？これを試しましたか？

基本的には、react をダム テンプレート エンジンとして使用したいと考えています。

プロジェクトを webpack でビルドしようとしていますが、エラーが発生します。このプロジェクトは先に gulp でビルドできたので、すべてのパスとすべてが問題ないはずです。このドキュメントhttps://github.com/babel/babel-loaderからすべてのバベルローダーをインストールし、例からコードをコピーしました。

私のwebpack.configファイル：

reacts jsx テンプレート/コンポーネントを使用して静的サイト ジェネレーターを作成したいと思っています。これを可能にするために、ジキルとミドルマンをハッキングする必要がありました...

しかし、プラグインでhttp://www.metalsmith.ioを発見しました: https://github.com/yeojz/metalsmith-react-templates

私はこれまでにフォローしています：

および jsx ファイル:

node build.js を実行すると、エラーが発生します。

metalsmith-react-templates の例は時代遅れのようで、問題はありますか?

提案@を試しました：

Webpack、Babel、React を使用した Hello World の例があります。Chrome DevTools でブレークポイントを設定すると、Chrome はインポートされたすべてのシンボルが現在のスコープで未定義であると表示します。

コードを実行すると、期待どおりに動作します。React は「Hello, World!」を正常にレンダリングします。問題は、Chrome が間違ったスコープを認識していることです。

編集:これは、Webpack が変数の名前を変更するために発生します。より快適にデバッグできるように、変数名を保存するにはどうすればよいですか?

私のwebpack構成は以下の通りです。

webpack と babel が機能している非常に基本的なセットアップに問題があります。JSX をコンパイルするには、babel が必要です。ES2015 の機能は使用しません。

この正確な問題について SO でかなりの数の質問がありますが、それらはすべて、私が既に行ったすべてのbabel-preset-reactプリセットオプションをインストールするか、babel に追加することで解決されるようですwebpack.config.js(私は思います)。

私が見逃しているのは単純なことだと確信していますが、それを見ることができません。

問題を実証するために必要なファイルだけをこの要点に抽出しました(要旨にフォルダーを含めることができないため、ファイル名にダッシュを使用してサブフォルダーを示しました)。私webpack.config.jsはこのように見えます：

注：package.jsonすべてが「依存関係」の下にリストされています。これは、開発依存関係をインストールしないherokuでこれをホストしているためです（少なくともデフォルトではありません）

を使用してコンポーネントをレンダリングする JavaScript 配列がありましたarray.map。Mapキーと値のペアを使用してアイテムをより簡単に検索できるようにするために、この配列を es6に切り替え、マップ上で a.mapからa に切り替えましたforEach。内部forEachで React コンポーネントを返す render メソッドを呼び出していますが、レンダリングされていません。内のコンポーネントをレンダリングするにはどうすればよいforEachですか?

renderGalleryItem メソッドは次のとおりです。

forEach が何も返さないことは理解していますが、その中でレンダリングできないということですか?

多言語サイトを構築していますが、特殊文字を入力のプレースホルダー テキストとしてレンダリングする方法を見つけるのが非常に困難です。反応ドキュメントで指定されている方法で、Unicode文字を直接記述し、HTMLエンティティをString.fromCharCode(xx)に変換すると、正しくレンダリングされないようです。登録商標のように一部の記号は正しく機能しますが、É のようなアクセント付きの文字は単に E として表示されます。以下の例:

誰かがこの問題に直面したことがありますか、またはそれを回避する方法を知っていますか?

乾杯！