Apollo Clientを使ってみるチュートリアルのようなもの

【Next.js入門①】Next.jsで'Hello Next.js'までの流れ

https://medium.com/@miiny/setup-a-server-rendered-reactjs-application-with-next-js-typescript-sass-7cd3e7e79706

componentを定義する際に、class構文かfunctionか

関数コンポーネントはクラスとどう違うのか?

Class: ライフタイムサイクルメソッドやstateを使用したい場合は、Class構文で記述する。

Function: 上記の機能を使わない場合は、Functionを使用する。

※FunctionalComponent要らなくない？との議論もあるらしい。

フック早わかり

React.jsの知っておいて損はないTips

npx create-react-app my-project

React + Redux + TypeScript でモダンなwebアプリを作るチュートリアルを考えてみた①

コンポーネントと props

React.js コンポーネント入門（props/state）

props：親から渡される情報

state：自Componentの状態

親から初期状態としてpropsを渡し、stateで自身の状態を管理する。

【初心者向け】非同期にCRUDするReactアプリケーションを作る

docker-composeでjson-serverを使う

Expressで作られているので、Expressに詳しいと、柔軟にカスタマイズできるらしい。

ステータスコードを返すには？？

React.jsの地味だけど重要なkeyについて

Vue.jsエンジニアのためのReact入門

React公式

Auth0 React チュートリアル

function showRecipe(recipe) {
  if (!recipe) {
    return <p>Recipe not found!</p>;
  }
  return (
    <div>
      <h1>{recipe.title}</h1>
      <p>{recipe.description}</h1>
    </div>
  );
}

上記のコードの中の

①コンポーネントが受信するpropsへの変更

②内部状態の変更

直接stateを変更しても、再レンダリングされない！ setState()を使って、stateを変更すること。

create-react-appで作った雛形のコードがService Workerで何をしているのか

すべてのReact.js初心者が知っておくべき9つのポイント

yarn add react-router-dom

yarn add -D node-sass 

※nodeのバージョンが最新であったり、古すぎたりすると、インストールにこけてしまう可能性があるので、注意

React Bootstrap

install

yarn add react-bootstrap bootstrap

sass

@import "~bootstrap/scss/bootstrap";

react

import Button from 'react-bootstrap/Button';

/common # 定数や共有の関数を定義する場所
/components　# React Componentsを定義する場所
/interfaces # Interfaceを定義する場所
/styles # CSSを定義する場所 Imageなどが増えて来たら、assetsに変えてもいいかも
index.tsx

上記の構成でアプリを作ってみる。