Q&A
reactでサーバーサイドレンダリングをしたいのですか？掲載コードの各行で何をしているのかは理解しながら書いていますか？(追記: 何をしたいか何となくわかったかもしれません。）
お世話になってます。
今、reactを使いたいのでHellow worldをテストしてます。
しかし、何も表示されずに困っています。
宜しければ、ご教示頂けないでしょうか？
宜しくお願いいたします。
希望表示: Hello div_nitta World
test.js
express = require('express') ,app = express() ,browserify = require('browserify') ,reactify = require('reactify') ,fs = require('fs'); app.get('/', function(req, res){ //ファイルを読み込んだら、コールバック関数を実行する。 fs.readFile('./my_index.html', 'utf-8' , doReard ); // コンテンツを表示する。 function doReard(err, data) { res.writeHead(200, {'Content-Type': 'text/html'}); res.write(data); res.end(); } }) app.get('/bundle.js', function(req, res){ res.setHeader('Content-type', 'text/javascript'); browserify('./app') .transform({ harmony: true }, reactify) .bundle() .pipe(res); }) app.listen(8124);
my_index.html
<html> <head> <title>React on NW.js</title> </head> <body> <div id="app"></div> <script src="/bundle.js"></script> </body> </html>
app.js
var Hello = React.createClass({ render: function() { return ( <h1>Hello, {this.props.name} World !</h1> ); } }); React.render( <Hello name='div_nitta' />, document.getElementById('app') );
>>reactでサーバーサイドレンダリング したいと考えてます。大体ですが1行ずつ理解しているつもりではいますが、少し理解が浅いのかもしれません。
あれ、本当にサーバーサイドレンダリングをしようということなのですか？よくよくコードを読んでみたら、クライアントサイドでレンダリングしたいのかなとも読めたりしたのですが。
とにかく、browerifyをcmdではなくnode上で使用し、HTML上(クライアント)に表示できるようにしたいと考えてました。reactの使用方法が少し理解できてない感じだったので(泣)。返信よろしくお願いします(泣)。サーバーサイドではなくクライアント側ということです、すいません。
お忙しいとは思いますが、よろしくお願いします。自分もnodeとかできるようになりたいので(泣)。
> browerifyをcmdではなくnode上で使用し
これはなぜですか？ビルド済みのbundle.jsを用意して、それをクライアントに返すのではなく、クライアントからリクエストがある度にビルドをしてbundle.jsをクライアントに返しているのはなぜですか？
返信遅れすみません。例えば表記内容などを変更した場合をイメージして、クライアントからのリクエスト毎にビルドした方が、正しいのではと考えました。
そこは、修正したいと考えます。
回答1件
0
ベストアンサー
Facebook公式のcreate-react-appというツールは利用したことはありますでしょうか？
$ npm install -g create-react-app $ create-react-app my-app $ cd my-app $ npm start
こちらをまずはローカル環境にインストールしてreactアプリケーションの雛形ファイルを生成し、開発用サーバーを起動させれば、すぐにHello World的なサンプルページが表示されるので、そこをスタートポイントとするのが速いし楽だと思います。
質問文を見る限る、Browserifyをバンドルツールとして利用されていると思いますが、create-react-appではWebpackという別のメジャーなバンドルツールを使っています。Webpackの諸々の設定はcreate-react-appの方で既に済んでいるので、自分でWebpackの設定をする必要もありません。
まずは、create-react-appに内蔵のwebpack-dev-serverをnpm startで起動させて、ローカル上で'Hello World'的なものを表示させるところからスタートしてみてはいかがでしょうか？
投稿2018/04/15 04:11
編集2018/04/15 04:12総合スコア2415
返信おくれすいません。ありがたい言葉。
create_react-app一度利用したことはあります。
app.jsﾌｧｲﾙを調整し、無事Hellow world上げることできました。
今後とも宜しくお願いします。
あなたの回答
tips
プレビュー
