React を使用して通常のブログ アプリケーションを構築する方法をステップごとに学習します_html/css_WEB-ITnose
Jun 21, 2016 am 08:52 AM
シングルページ アプリケーション (SPA) について考えるとき、一般的にブラウザー、JavaScript、速度が考慮されますが、それらは検索エンジンには見えません。シングルページ アプリケーションは JavaScript を使用してページ上のコンテンツをレンダリングし、Web クローラーはブラウザーを介して Web ページ全体を表示しないため、ページ上のすべてのコンテンツを確認してインデックスを付けることはできません。あるいは、もっとよく言えば、ほとんどの人はそれができません。一部の開発者は、さまざまな方法でこの問題を解決しようとしました。
サーバー側で Node.js を使用し、クライアント側で React を使用すると、ユニバーサル JavaScript アプリケーションを構築できます。これにより、サーバー側とブラウザ側の両方のレンダリングから多くの利点が得られ、検索エンジンとブラウザを使用する人間が単一ページ アプリケーション内のコンテンツを表示できるようになります。
この 2 部構成のチュートリアルでは、サーバー側レンダリングを通じて一般的な React ブログ アプリケーションを構築し、アプリケーションを検索エンジンに表示できるようにする方法を説明します。これにより、ブラウザーでのアプリの高速化と応答性が向上します。
開始
ブログ システムでは次のテクノロジとツールが使用されます:
-
Node.js はパッケージ管理とサーバー側レンダリングに使用されます
-
ビューレイヤーの React
-
シンプルなバックエンド JS サーバーフレームワークとして表現
-
React Router forルーティング
-
開発中のホットロード用の React Hot Loader
-
データ フロー用の Flux
-
Cosmicコンテンツ管理用の JS
開始する前に、まずコマンド ラインでコンテンツを実行します。
mkdir react-universal-blogcd react-universal-blog
新しい package.json ファイルを作成し、そこにコンテンツを追加します。 :
{ "name": "react-universal-blog", "version": "1.0.0", "description": "", "main": "app-server.js", "dependencies": { "babel": "^5.8.29", "babel-core": "^5.8.32", "babel-loader": "^5.3.2", "cosmicjs": "^2.0.0", "events": "^1.1.0", "express": "^4.13.3", "flux": "^2.1.1", "history": "^1.14.0", "hogan-express": "^0.5.2", "lodash": "^3.10.1", "react": "^0.14.1", "react-dom": "^0.14.1", "react-router": "^1.0.1", "webpack": "^1.12.2" }, "scripts": { "development": "cp views/index.html public/index.html && NODE_ENV=development webpack && webpack-dev-server --content-base public/ --hot --inline --devtool inline-source-map --history-api-fallback" }, "author": "", "license": "ISC", "devDependencies": { "react-hot-loader": "^1.3.0", "webpack-dev-server": "^1.12.1" }}このファイルでは、次の内容を追加したことに気づいたはずです:
-
Babel は、ES6 の変換中に CommonJS モジュール仕様に準拠するパッケージングに使用されます。 React JSX 構文形式をブラウザー互換の JavaScript に変換します。
-
Cosmic JS の公式 Node.js クライアントは、Cosmic JS クラウド コンテンツ インターフェイスを通じてブログ コンテンツ システムにサービスを提供できます。
-
Flux はアプリケーション データ管理に使用されます (これは React アプリケーションでは非常に重要です)。
-
サーバーおよびブラウザーでのビュー管理用の React
-
Webpack は、すべてのファイルを Bundle.js ファイルにパッケージ化します。
同時に、スクリプト ファイルを package.json ファイルに追加しました。npm rundevelopment を実行すると、スクリプトによって、views フォルダーからindex.html ファイルがコピーされます。パブリックファイル。
webpack ファイル webpack.config.js を設定します。
// webpack.config.jsif(process.env.NODE_ENV === 'development'){ var loaders = ['react-hot','babel']} else { var loaders = ['babel']}module.exports = { devtool: 'eval', entry: './app-client.js', output: { path: __dirname + '/public/dist', filename: 'bundle.js', publicPath: '/dist/' }, module: { loaders: [{ test: /\.js$/, loaders: loaders, exclude: /node_modules/ }] }};ここで entry 属性を追加していることに注意してください。属性の値は app-client.js。このファイルはアプリケーションのエントリ ポイントとして機能します。つまり、webpack はこの時点からアプリケーションをバンドルし、パス /public/dist/bundle.js に出力します。ローダーを同時に使用して、ES6 と JSX を含むコードで Babel を実行します。
React に関連する技術的な内容を説明する前に、ブログ全体を完成させたときに表示される内容を見てみましょう。このチュートリアルでは、ブログのスタイルではなくアプリケーションの機能の構築に重点を置いてほしいと考えているため、ここでは、すでに構築されているフロントエンド スタイル テーマを使用することを選択し、Start Bootsrtap スタイルで Clean Blog < を選択します。 🎜>
新しいフォルダーを作成し、views という名前を付け、フォルダー内に新しいファイルindex.htmlを作成し、HTML ファイルに次のコードを追加します:
<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content=""> <title>{{ site.title }}{{# page }} | {{ page.title }}{{/ page }}</title> <!-- Bootstrap Core CSS --> <link href="/css/bootstrap.min.css" rel="stylesheet"> <!-- Custom CSS --> <link href="/css/clean-blog.min.css" rel="stylesheet"> <link href="/css/cosmic-custom.css" rel="stylesheet"> <!-- Custom Fonts --> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"> <link href="//fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" rel="stylesheet" type="text/css"> <link href="//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css"> <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <![endif]--></head><body class="hidden"> <div id="app">{{{ reactMarkup }}}</div> <script src="/js/jquery.min.js"></script> <script src="/js/bootstrap.min.js"></script> <script src="/js/clean-blog.min.js"></script> <script src="/dist/bundle.js"></script></body></html>通常、私は jQuery の使用を避けるために、クラシックな React Bootstrap を選択します。ただし、簡単にするために、いくつかの jQuery 関数がテーマ フレームワークで使用されます。
index.html ファイルでは、id="app" を使用して div ノード上に独自の React ポイントを構築します。
この時点で、アプリケーションは次の構造になっています。
package.jsonpublic |-css |-bootstrap.min.css |-cosmic-custom.css |-js |-jquery.min.js |-bootstrap.min.js |-clean-blog.min.jsviews |-index.htmlwebpack.config.js
ブログ アプリケーションの基本パッケージ価格
ブログ アプリケーション インターフェイスの構築を開始します。
- ホーム
- 概要
- 仕事
- 連絡先
// app-client.jsimport React from 'react'import {render} from 'react-dom'import {Route} from 'react-router'import createBrowserHistory from 'history/lib/createBrowserHistory'const history = createBrowerHistory()// Routesimport routes from './routes'const Routes = ( <Router history={history}> {routes} </Router>)const app = document.getElementById('app')render(Routes, app)routes.js ファイルを追加します:
// routes.jsimport React, {Component} from 'react'import { Route, IndexRoute, Link} from 'react-router'//Main componentclass App extends Component{ componentDidMount(){ document.body.className='' } render(){ return ( <div> <h1>React Universal Blog</h1> <nav> <ul> <li><Link to="/">Home</Link></li> <li><Link to="/about">About</Link></li> <li><Link to="/work">Work</Link></li> <li><Link to="/contact">Contact</Link></li> </ul> </nav> { this.props.children } </div> ) }}//Pagesclass Home extends Component{ render(){ return ( <div> <h2>Home</h2> <div>Some home page content</div> </div> ) }}class About extends Component { render(){ return ( <div> <h2>About</h2> <div>Some about page content</div> </div> ) }}class Work extends Component { render(){ return ( <div> <h2>Work</h2> <div>Some work page content</div> </div> ) }}class Contact extends Component { render(){ return ( <div> <h2>Contact</h2> <div>Some contact page content</div> </div> ) }}class NoMatch extends Component { render(){ return ( <div> <h2>NoMatch</h2> <div>404 error</div> </div> ) }}export default ( <Route path="/" component={App}> <IndexRoute component={Home}/> <Route path="about" component={About}/> <Route path="work" component={Work}/> <Route path="contact" component={Contact}/> <Route path="*" component={NoMatch}/> </Route>)到目前为止，我们搭建好了一个基本的包含不同页面的博客应用例子。现在，让我们来具体运行一下应用，在终端中运行一下内容：
mkdir publicnpm installnpm run development
在浏览器中输入网址 http://localhost:8080来查看博客运行的基本效果。
上述步骤完成之后，现在运行至服务器端，新建文件 app-server.js并添加以下内容：
// app-server.jsimport React from 'react'import { match, RoutingContext } from 'react-router'import ReactDOMServer from 'react-dom/server'import express from 'express'import hogan from 'hogan-express'// Routesimport routes from './routes'// Expressconst app = express()app.engine('html', hogan)app.set('views', __dirname + '/views')app.use('/', express.static(__dirname + '/public/'))app.set('port', (process.env.PORT || 3000))app.get('*',(req, res) => { match({ routes, location: req.url }, (error, redirectLocation, renderProps) => { const reactMarkup = ReactDOMServer.renderToStaticMarkup(<RoutingContext {...renderProps}/>) res.locals.reactMarkup = reactMarkup if (error) { res.status(500).send(error.message) } else if (redirectLocation) { res.redirect(302, redirectLocation.pathname + redirectLocation.search) } else if (renderProps) { // Success! res.status(200).render('index.html') } else { res.status(404).render('index.html') } })})app.listen(app.get('port'))console.info('==> Server is listening in ' + process.env.NODE_ENV + ' mode')console.info('==> Go to http://localhost:%s', app.get('port'))在 app-server.js文件中，我们载入了基本的路由文件 route.js.这些都是呈现标记转换成一个字符串,然后将它作为变量传递给我们的模板。
在接下来的步骤中，我们将建立文件 app.js这可以使我们在 Node.js中使用ES6是语法格式。文件包含以下内容：
//app.jsrequire('babel/register')require('./app-server.js')我们将从该文件启动我们的服务， 不过首先，让我们先创建一个脚本。
打开 package.json文件，编辑里面的脚本部分文件如下：
// ..."scripts": { "development": "cp views/index.html public/index.html && NODE_ENV=development webpack && webpack-dev-server --content-base public/ --hot --inline --devtool inline-source-map --history-api-fallback", "production": "rm -rf public/index.html && NODE_ENV=production webpack -p && NODE_ENV=production node app.js", "start": "npm run production"}// ...到目前为止，已经部署好了生产环境的脚本代码，我们可以同时在服务器d端和客户端运行代码，终端中运行以下内容：
npm start
在浏览器地址栏中输入 http://localhsot:3000.你就可以看到你的博客单页应用了。
在浏览器中点击查看源码。
结论
在这部分中，我们初步了解了使用React和Node.js一起搭建一个React普通博客应用。
人気の記事
人気の記事
ホットな記事タグ
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7313
9
1625
14
1348
46
1260
25
1207
29
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？
Mar 04, 2025 pm 12:32 PM
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
Mar 20, 2025 pm 06:05 PM
＆lt; iframe＆gt;の目的は何ですか タグ？使用する際のセキュリティ上の考慮事項は何ですか？
