ReactJSとBack4Appを使用したブログプラットフォームSPAの構築

1\ はじめに このチュートリアルでは、reactjsをフロントエンド、back4appをバックエンドとして使用したブログプラットフォームの完全なシングルページアプリケーション（spa）を構築するプロセスを案内します。開発環境の設定、reduxによるグローバルステートの管理、ルーティングとナビゲーションの実装、back4appを使用したcrud操作の実行まで、すべてをカバーします。 目的： ユーザーがブログ投稿を作成、編集、削除でき、読者が投稿を閲覧しコメントできる完全に機能するブログプラットフォームを作成します。このアプリケーションは、フロントエンドにreactjs、バックエンド操作にback4appを利用します。 主な機能： ユーザー認証 投稿の作成、編集、削除 投稿とコメントの閲覧 reduxによるグローバルステートの管理 react routerを使用したルーティングとナビゲーション 前提条件： javascript、reactjs、reduxの基本的な知識 アクティブなback4appアカウント ローカル環境にnode jsとnpmがインストールされていること 2\ 初期設定 2 1 reactjsプロジェクトの設定 ステップ 1 新しいreactプロジェクトを作成する create react app を使用します。 ステップ 2 開発サーバーを起動します。 2 2 back4appの設定 ステップ 1 back4appアカウントにサインインし、新しいアプリケーションを作成します。 ステップ 2 back4appダッシュボードで、「コア > ブラウザ」に移動し、次のクラスを作成します post （ブログ投稿を保存するため） comment （投稿に対するコメントを保存するため） ステップ 3 「アプリ設定 > セキュリティとキー」セクションからアプリケーションidとjavascriptキーを取得します。 2 3 必要なパッケージのインストール react、redux、およびback4app統合のために必要な依存関係をインストールします。 npm install parse @reduxjs/toolkit react redux react router dom 2 4 parse sdkの設定 ステップ 1 parseconfig js という名前のファイルを src フォルダーに作成し、parse sdkを設定します。 import parse from 'parse'; parse initialize("your app id", "your javascript key"); parse serverurl = 'https //parseapi back4app com/'; export default parse; 3\ ブログプラットフォームの開発 3 1 プロジェクト構造 次の構造でプロジェクトを整理します src/ \| components/ \| | postlist js \| | postdetails js \| | postform js \| | commentlist js \| redux/ \| | store js \| | postslice js \| | commentslice js \| parseconfig js \| app js \| index js 3 2 グローバルステート管理のためのreduxの実装 ステップ 1 reduxストアを redux/store js に設定します。 import { configurestore } from '@reduxjs/toolkit'; import postreducer from ' /postslice'; import commentreducer from ' /commentslice'; export const store = configurestore({ reducer { posts postreducer, comments commentreducer, }, }); ステップ 2 投稿を管理するためのスライスを redux/postslice js に作成します。 import { createslice, createasyncthunk } from '@reduxjs/toolkit'; import parse from ' /parseconfig'; export const fetchposts = createasyncthunk('posts/fetchposts', async () => { const query = new parse query('post'); const results = await query find(); return results map(post => ({ id post id, title post get('title'), content post get('content'), })); }); const postslice = createslice({ name 'posts', initialstate { list \[], status null, }, reducers {}, extrareducers { \[fetchposts fulfilled] (state, action) => { state list = action payload; state status = 'success'; }, }, }); export default postslice reducer; ステップ 3 コメントを管理するためのスライスを redux/commentslice js に作成します。 import { createslice, createasyncthunk } from '@reduxjs/toolkit'; import parse from ' /parseconfig'; export const fetchcomments = createasyncthunk('comments/fetchcomments', async (postid) => { const query = new parse query('comment'); query equalto('post', { type 'pointer', classname 'post', objectid postid }); const results = await query find(); return results map(comment => ({ id comment id, content comment get('content'), postid postid, })); }); const commentslice = createslice({ name 'comments', initialstate { list \[], status null, }, reducers {}, extrareducers { \[fetchcomments fulfilled] (state, action) => { state list = action payload; state status = 'success'; }, }, }); export default commentslice reducer; 3 3 react routerを使用したルーティングの実装 ステップ 1 ルーティングを設定する app js import { browserrouter as router, route, switch } from 'react router dom'; import postlist from ' /components/postlist'; import postdetails from ' /components/postdetails'; import postform from ' /components/postform'; function app() { return ( \<router> \<switch> \<route path="/" exact component={postlist} /> \<route path="/post/\ id" component={postdetails} /> \<route path="/new post" component={postform} /> \</switch> \</router> ); } export default app; 3 4 コンポーネントの作成 ステップ 1 postlist コンポーネントを作成して、すべてのブログ投稿を表示します。 import react, { useeffect } from 'react'; import { usedispatch, useselector } from 'react redux'; import { fetchposts } from ' /redux/postslice'; import { link } from 'react router dom'; const postlist = () => { const dispatch = usedispatch(); const posts = useselector(state => state posts list); useeffect(() => { dispatch(fetchposts()); }, \[dispatch]); return ( \<div> \<h1>blog posts\</h1> \<link to="/new post">create new post\</link> \<ul> {posts map(post => ( \<li key={post id}> \<link to={`/post/${post id}`}>{post title}\</link> \</li> ))} \</ul> \</div> ); }; export default postlist; ステップ 2 postdetails コンポーネントを作成して、特定の投稿の詳細を表示します。 import react, { useeffect } from 'react'; import { useparams } from 'react router dom'; import { usedispatch, useselector } from 'react redux'; import { fetchcomments } from ' /redux/commentslice'; const postdetails = () => { const { id } = useparams(); const dispatch = usedispatch(); const comments = useselector(state => state comments list); useeffect(() => { dispatch(fetchcomments(id)); }, \[dispatch, id]); return ( \<div> \<h1>post details\</h1> \<p>comments \</p> \<ul> {comments map(comment => ( \<li key={comment id}>{comment content}\</li> ))} \</ul> \</div> ); }; export default postdetails; ステップ 3 postform コンポーネントを作成して、投稿の作成と編集を行います。 import react, { usestate } from 'react'; import parse from ' /parseconfig'; import { usehistory } from 'react router dom'; const postform = () => { const \[title, settitle] = usestate(''); const \[content, setcontent] = usestate(''); const history = usehistory(); const handlesubmit = async (e) => { e preventdefault(); const post = parse object extend('post'); const post = new post(); post set('title', title); post set('content', content); try { await post save(); history push('/'); } catch (error) { console error('error creating post ', error); } }; return ( \<div> \<h1>create new post\</h1> \<form onsubmit={handlesubmit}> \<div> \<label>title\</label> \<input type="text" value={title} onchange={(e) => settitle(e target value)} /> \</div> \<div> \<label>content\</label> \<textarea value={content} onchange={(e) => setcontent(e target value)} /> \</div> \<button type="submit">submit\</button> \</form> \</div> ); }; export default postform; 4\ テストとデプロイメント 4 1 アプリケーションのテスト ステップ 1 アプリケーションをローカルでテストして、すべての機能が動作していることを確認します 投稿の作成、編集、削除をテストします。 各投稿に対してコメントが正しく表示されることを確認します。 異なるルート間のナビゲーションをテストします。 4 2 本番用にアプリケーションをビルドする ステップ 1 本番用にアプリケーションをビルドします。 npm run build ステップ 2 ビルドしたアプリケーションをback4app containersのようなホスティングサービスにデプロイします。 4 3 back4appの本番環境の設定 back4appはすでに本番環境として準備が整っていますが、コードを確認し、必要な環境変数やキーを更新することができます。 5\ 結論 要約： このチュートリアルでは、reactjsとback4appを使用して完全なブログプラットフォームspaを作成する方法を案内しました。back4appでバックエンドを設定および構成し、reduxでグローバルステートを管理し、react routerでルーティングを実装し、crud操作を実行する方法を学びました。このプラットフォームは、ユーザー認証、高度なコメントシステムなどの追加機能で拡張できます。 次のステップ： back4appでユーザー認証を追加することを検討してください。 リアルタイム更新でコメントシステムを強化してください。 検索エンジンの可視性を向上させるためにseo機能を実装してください。 6\ ソースコードと追加リソース githubリポジトリ： アプリケーションの完全なソースコードへのリンクをgithubで提供します。 追加リソース： reactjs ドキュメント https //reactjs org/docs/getting started html redux ドキュメント https //redux js org/ react router ドキュメント https //reactrouter com/ back4app ドキュメント https //www back4app com/docs 7\ faq / トラブルシューティング 一般的な問題： back4appへの接続エラー： アプリケーションidとjavascriptキーを再確認してください。 reduxの状態が更新されない： アクションとリデューサーが正しく設定されていることを確認してください。 サポート： 問題が発生した場合は、back4appサポートに連絡するか、関連する開発者コミュニティで質問してください。