107日目②:プロフィールのトップにスキルやBioを表示できるようComponentsを作成する

プロフィール欄により詳細な情報を表示できるよう、componentsを2つ作成しました。具体的には、プロフィールトップにアバター・会社名(あれば)・場所・HP・SNS等の情報が表示するProfileTop.jsの作成と、bio(自己紹介)やスキル(使用できる言語)を表示するProfileAbout.jsの作成です。

こちらはエラーなしで進めることができました。

①新ファイル作成 client/src/components/profile/ProfileTop.js プロフィールトップにアバター・会社名(あれば)・場所・HP・SNS等の情報が表示用

import React from "react";
import PropTypes from "prop-types";

const ProfileTop = ({
  profile: {
    status,
    company,
    location,
    website,
    social,
    user: { name, avatar }
  }
}) => {
  return (
    <div class='profile-top bg-primary p-2'>
      <img class='round-img my-1' src={avatar} alt='' />
      <h1 class='large'>{name}</h1>
      <p class='lead'>
        {status} {company && <span> at {company}</span>}
      </p>
      <p>{location && <span>{location}</span>}</p>
      <div class='icons my-1'>
        {website && (
          <a href={website} target='_blank' rel='noopener noreferrer'>
            <i class='fas fa-globe fa-2x' />
          </a>
        )}
        {social && social.twitter && (
          <a href={social.twitter} target='_blank' rel='noopener noreferrer'>
            <i class='fas fa-twitter fa-2x' />
          </a>
        )}
        {social && social.facebook && (
          <a href={social.facebook} target='_blank' rel='noopener noreferrer'>
            <i class='fas fa-facebook fa-2x' />
          </a>
        )}
        {social && social.linkedin && (
          <a href={social.linkedin} target='_blank' rel='noopener noreferrer'>
            <i class='fas fa-linkedin fa-2x' />
          </a>
        )}
        {social && social.youtube && (
          <a href={social.youtube} target='_blank' rel='noopener noreferrer'>
            <i class='fas fa-youtube fa-2x' />
          </a>
        )}
        {social && social.instagram && (
          <a href={social.instagram} target='_blank' rel='noopener noreferrer'>
            <i class='fas fa-instagram fa-2x' />
          </a>
        )}
      </div>
    </div>
  );
};

ProfileTop.propTypes = {
  profile: PropTypes.object.isRequired
};

export default ProfileTop;

②新ファイル作成 client/src/components/profile/ProfileAbout.js Bioとスキルセット表示用

ここで面白いと思ったのがファーストネーム(下の名前)のみを表示させる時のコーディングです。

具体的には、{name.trim().split(" ")[0]}s Bioと書けば、名前を配列と考えてスペースで区切られている前部分0がファーストネーム、1をラストネーム(名字)と捉えることができて、trimとsplitを使えばファーストネームのみの取り出しが可能だということです。

例えばJohn Doeという名前なら、Johns Bioという風にファーストネームのみ切り出すことが可能です。1にすればラストネームのみの切り出しとなります。

import React, { Fragment } from "react";
import PropTypes from "prop-types";

const ProfileAbout = ({
  profile: {
    bio,
    skills,
    user: { name }
  }
}) => (
  <div class='profile-about bg-light p-2'>
    {bio && (
      <Fragment>
        <h2 class='text-primary'>{name.trim().split(" ")[0]}s Bio</h2>
        <p>{bio}</p>
        <div class='line' />
      </Fragment>
    )}
    <h2 class='text-primary'>Skill Set</h2>
    <div class='skills'>
      {skills.map((skill, index) => (
        <div key={index} className='p-1'>
          <i className='fas fa-check' /> {skill}
        </div>
      ))}
    </div>
  </div>
);

ProfileAbout.propTypes = {};

export default ProfileAbout;

 

③本日最初に作成したcomponents/profile/Profile.jsにProfileTopとProfileAbout componentsは既に組み込まれているので表示OK

一つ前のブログ記事(107日目①)に書いたように、本日作成したProfile.jsに、ProfileTopとProfileAboutのcomponentsは既に組み込まれているので表示OKでした。

具体的にはFragment内のこの部分です。

<ProfileTop profile={profile} />
           <ProfileAbout profile={profile} />

現在使用している教材と学習時間:本日の学習時間3.0時間

Udemy:MERN Stack Front To Back: Full Stack React, Redux & Node.js by Brad Traversy

★Section10:Profile Display

-Lec 56. Starting On The Profile (一つ前のブログ記事の内容。Edit Profileについては後日修正予定)

-Lec 57. ProfileTop & ProfileAbout Components (このブログ記事の内容。本日はここまで完了!)

進捗状況:80%

学習時間3.0時間

★参考にした本★

「React.js & Next.js超入門」掌田津耶乃 (秀和システム)

Section4-1: Reduxを使ってみよう

関連キーワード
  • 131日目~134日目:Udemyで一番人気のGit (&GitHub) コースを修了!学習した内容・学習にかかった時間とおすすめ度をご紹介: Completed Git course by Udemy "Git Complete: The definitive, step-by-step guide to Git" by Jason Taylor: Highly recommended to both beginner & intermediate leaner
  • 121日目~130日目:Udemyで新しいReactコース学習とGit & GitHubのコースを受講し始める #100dayofcode Round 2
  • 120日目:プログラミング学習100日チャレンジの完了とこれからの学習&ブログ記事:100days of code completed & from now on
  • 119日目:完成したWebアプリケーションの公開(Devconnector deployed on Heroku)
  • 118日目:Udemy講座の感想口コミ&自分に合った講座の選び方ポイント:Mern Stack Front to Back: Full Stack React, Redux & Node.js by Brad Traversy
  • 117日目:完成!Herokuへのデプロイ成功:Heroku CLIのインストールからWebアプリデプロイまで。Herokuの使い方と、package.jsonとgitコマンドではまったところと解決方法
おすすめの記事