0から展開への基本的なJSONブログ

ゴール
このチュートリアルでは、JSONファイルから簡単なブログを作成します.そうすることで、我々はシンプルな3コンポーネントアプリケーションを作成する状態と小道具を使用します.

1 -我々のアプリを生成

git repoでないフォルダでコマンドを実行しますnpx create-react-app blogjson

BlogJSONフォルダの中のCDと実行npm start devサーバを起動する

JSONブログデータの作成
この情報には多くの方法がありますが、JSONを使うのは最も簡単な方法でしょう.

srcフォルダで、postsというファイルを作成します.次のコンテンツをJSON :

[
    {
        "title": "Blog Post 1",
        "date": "1-7-2021",
        "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisl eros, pulvinar facilisis justo mollis, auctor consequat urna. Morbi a bibendum metus. Donec scelerisque sollicitudin enim eu venenatis. Duis tincidunt laoreet ex, in pretium orci vestibulum eget. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis pharetra luctus lacus ut vestibulum. Maecenas ipsum lacus, lacinia quis posuere ut, pulvinar vitae dolor. Integer eu nibh at nisi ullamcorper sagittis id vel leo. Integer feugiat faucibus libero, at maximus nisl suscipit posuere. Morbi nec enim nunc. Phasellus bibendum turpis ut ipsum egestas, sed sollicitudin elit convallis. Cras pharetra mi tristique sapien vestibulum lobortis. Nam eget bibendum metus, non dictum mauris. Nulla at tellus sagittis, viverra est a, bibendum metus."
    },
    {
        "title": "Blog Post 2",
        "date": "1-7-2021",
        "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisl eros, pulvinar facilisis justo mollis, auctor consequat urna. Morbi a bibendum metus. Donec scelerisque sollicitudin enim eu venenatis. Duis tincidunt laoreet ex, in pretium orci vestibulum eget. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis pharetra luctus lacus ut vestibulum. Maecenas ipsum lacus, lacinia quis posuere ut, pulvinar vitae dolor. Integer eu nibh at nisi ullamcorper sagittis id vel leo. Integer feugiat faucibus libero, at maximus nisl suscipit posuere. Morbi nec enim nunc. Phasellus bibendum turpis ut ipsum egestas, sed sollicitudin elit convallis. Cras pharetra mi tristique sapien vestibulum lobortis. Nam eget bibendum metus, non dictum mauris. Nulla at tellus sagittis, viverra est a, bibendum metus."
    },
    {
        "title": "Blog Post 3",
        "date": "1-7-2021",
        "body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisl eros, pulvinar facilisis justo mollis, auctor consequat urna. Morbi a bibendum metus. Donec scelerisque sollicitudin enim eu venenatis. Duis tincidunt laoreet ex, in pretium orci vestibulum eget. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis pharetra luctus lacus ut vestibulum. Maecenas ipsum lacus, lacinia quis posuere ut, pulvinar vitae dolor. Integer eu nibh at nisi ullamcorper sagittis id vel leo. Integer feugiat faucibus libero, at maximus nisl suscipit posuere. Morbi nec enim nunc. Phasellus bibendum turpis ut ipsum egestas, sed sollicitudin elit convallis. Cras pharetra mi tristique sapien vestibulum lobortis. Nam eget bibendum metus, non dictum mauris. Nulla at tellus sagittis, viverra est a, bibendum metus."
    }
]

JavaScriptオブジェクトの配列のように見えますが、JSONファイル拡張子に注意してください、そして、すべてのキーも引用において、それはJSON構文です.

3 -コンポーネント
つのコンポーネント、ポスト、ポストがあります.ポストはすべてのポストを一覧表示し、ポストコンポーネントがポストコンポーネントによって表示されるのを助けるためにクリックされることができます.

srcフォルダでコンポーネントと呼ばれるフォルダを作成する

つのファイルを作成します.JSとポスト.js

ポスト.js

import React from "react"

const Post = (props) => {
    return <h1>Post Component</h1>
}

export default Post

ポスト.js

import React from "react"

const Posts = (props) => {
    return <h1>Posts Component</h1>
}

export default Posts

今、それらをsrc/appにインポートしましょう.js

import Post from "./components/Post";
import Posts from "./components/Posts";
import Blog from "./posts.json"
import "./App.css";

function App() {

  //See Our Blog Posts in Console
  console.log(Blog)

  return (
    <div className="App">
      <h1>My Blog</h1>
      <Posts />
      <Post />
    </div>
  );
}

export default App;

次のようになります.

投稿コンポーネントと投稿コンポーネント

コンソールのブログJSONデータ

4 -柱を造ること
私たちのポストアプリのタイトルと日付のすべての別の記事を一覧表示されます.すべてのポストのデータは、APPに存在します.ので、アプリケーションは、プロップとしてデータを渡す必要があります(プロップは、その親からのコンポーネントに渡されるデータ、構文的にHTML属性として渡されます).
アプリ.js

import Post from "./components/Post";
import Posts from "./components/Posts";
import Blog from "./posts.json"
import "./App.css";

function App() {

  //See Our Blog Posts in Console
  console.log(Blog)

  return (
    <div className="App">
      <h1>My Blog</h1>
      <Posts posts={Blog}/>
      <Post />
    </div>
  );
}

export default App;

私たちがポストから呼ばれる支柱としてアプリケーションからポストへのブログデータを下った今、投稿コンポーネントでそのデータを使用しましょう.マップの配列メソッドを使用してデータをループし、各ポストに対してJSXを生成し、JSXの配列をpostコンポーネントによって返されるJSXに注入します.
ポスト.js

import React from "react";

const Posts = (props) => {
  //creating an array of JSX for each post, using the map array method
  const postsJSX = props.posts.map((post, index) => (
    <div className="summary">
      <h1>{post.title}</h1>
      <p>{post.date}</p>
    </div>
  ));

  return <div className="posts">{postsJSX}</div>;
};

export default Posts;

これで、スクリーンにレンダリングされたブログ記事が表示されます.ユーザーがポストコンポーネントによって強調表示されるポストを選択できるようにします.アプリがポストの親であるので、アプリがポストにこのデータを渡すことができるだけであるので、表示されるポストを追跡する州はappに存在しなければなりません.

「POST」状態を作成します

我々は最初のポストの初期値を与える

我々は、異なるポストを通過して、状態を変えることができる機能をつくります

私たちは、それを使うことができるように、その機能を投稿します

アプリ.js

import Post from "./components/Post";
import Posts from "./components/Posts";
import Blog from "./posts.json"
import "./App.css";
import React from "react"

function App() {

  //Post to track the post displayed by Post
  const [post, setPost] = React.useState(Blog[0])

  //Function to change the displayed post
  const selectPost = (selected) => {
    setPost(selected)
  }

  return (
    <div className="App">
      <h1>My Blog</h1>
      <Posts posts={Blog} select={selectPost}/>
      <Post post={post}/>
    </div>
  );
}

export default App;

それで、あなたが反応DevTools Chrome拡張を使用して調べるならば、あなたは以下を見ることができなければなりません:

状態はアプリケーションコンポーネントに存在します

ポストコンポーネントに渡される2つの小道具

POSTコンポーネントに渡される単一のプロップ

SELECTと呼ばれるプロップとして渡されたSelectPost関数を使用するには、ポストコンポーネントを再訪問します.私たちは私たちのマップロジックでそれを使用しますので、そのポストのdivをクリックすると、その関数にそのポストを渡します.
ポスト.js

import React from "react";

const Posts = (props) => {
  //creating an array of JSX for each post, using the map array method
  const postsJSX = props.posts.map((post, index) => (
    <div className="summary" onClick={() => props.select(post)}>
      <h1>{post.title}</h1>
      <p>{post.date}</p>
    </div>
  ));

  return <div className="posts">{postsJSX}</div>;
};

export default Posts;

今すぐ別の記事をクリックして、また、ポストコンポーネント(アプリケーション内に存在する状態が変更されるアプリケーションのコンポーネントを変更するアプリのコンポーネントの状態の変更を参照してくださいする必要がありますアプリケーションは、更新された小道具を渡して、その子と一緒に再構築されます).

5 -ポストを構築する
それで、我々はポストが1つのポストを受けているという反応Devtoolsで見ることができます.
ポスト.js

import React from "react";

const Post = (props) => {
  return (
    <div className="post">
      <h1>{props.post.body}</h1>
      <h3>{props.post.date}</h3>
      <p>{props.post.body}</p>
    </div>
  );
};

export default Post;

だから今、あなたは3つのポストとそれらの1つを完全に詳細に見ることができるはずです.あなたは他の投稿の要約をクリックして詳細なポストの変更を参照してくださいする必要があります!

いくつかの基本的なスタイル
インデックスにいくつかの基本的なスタイルを加えましょう.CSSは、これ以上の言及をする!
インデックス.CSS

.App {
  display: grid;
  grid-template-areas: 
  "title title title title"
  "posts post post post"
  "posts post post post"
  "posts post post post";
  width: 90%;
  margin: 10px auto;
}

.App > h1 {
  grid-area: title;
  background-color: navy;
  color: white;
  padding: 5px;
  margin: 10px auto;
  width: 100%;

}

.posts {
  grid-area: posts;
  border: 2px solid navy;
  padding: 5px;
}

.posts > div {
  background-color: crimson;
  color: white;
  padding: 5px;
  margin: 2px;
}

.post {
  grid-area: post;
  padding: 10px;
}

非常にきれいではないが、あなたはおそらく明らかに何が起こっているかを見ることができます.あなたが望むようにそれをきれいにして、本当のブログ記事でJSONファイルを更新してください.

展開
あなたがウェブ上でこれを展開したいならば、これはNETLIFYアカウントを作成して、これらのステップに従ってNetLifyで非常に簡単に行うことができます.

コードをコミットし、github、bitbucketまたはgitlabのどちらかにプッシュします

NetLifyへのログインとGitからの新しいサイトの作成をクリックする

あなたのgithub、gitlabまたはbitbucketアカウントを接続してください

あなたの反応アプリを使用してリポジトリを選択します

これは自動的にビルドコマンドを検出し、ディレクターを発行する必要がありますが、作成された反応アプリのためにではない.

ビルドコマンドは
発行ディレクター:ビルド

提出とあなたのウェブサイトは、ライブと準備ができてすぐに自動的に更新するたびにあなたのgithubレポを更新!