create-react-appで生成されるフォルダについて
- src
→開発用ファイルが格納される。ReactコンポーネントのJSXファイルなどはここに置く - public
→静的ファイルが格納される（htmlや画像ファイルなど） - build
→本番用ファイルが格納される（npm run buildで生成される）
コンポーネントとは
- 見た目と機能を持つUI部品
- コンポーネントを組み合わせてページをつくる
- Class ComponentとFunctional Componetの大きく2種類のコンポーネントに分かれるが
最近ではClass Componentはほとんど使われない
Functional Componentの特徴
- ES6のアロー関数で記述する
- 基本的にはstateを持たない
- propsを引数に受け取る
- JSXをreturnする
// Functional Componentの例
const Button = (props) => {
return <button>Say, {props.hello}</button>;
};
export default Button;
コンポーネントを使用するメリットは何か
- 再利用するため
→同じ記述を何度もすることを防ぐことができる - コードの見通しをよくするため
→ファイルを細かく分割することでコードが読みやすくなる - 変更に強くする
→修正する際は、元となる部分の１箇所だけでOK