React勉強備忘録(基礎知識編)
動作環境
npm 8.12.1 node 18.4.0 React 18.2.0
基礎知識
JSX
JSXは「JavaScript XML」の略 Javascript内にhtmlの記載ができる。 jsx内で、htmlのclass属性を実装するには、jsのclass(オブジェクト指向とかのクラス)と区別するために、classNameと記述する必要がある。 ※ファイルの拡張子は.jsxにする。 jsでもjsxを使用できるが、明示的に.jsxにしておいたほうが無難である。
import React from 'react' const BasicHeadingOne = (props) => { return ( <h1 className={props.className}> {props.text} </h1> ) } export default BasicHeadingOne
記載方法
最上位のタグがないと文法上エラーとなってしまう。
import React from 'react' const Article = () => { return ( <> // ここが最上位のタグ <BasicHeadingOne text="jsxについて" /> <p>jsxの特徴や、使用方法について紹介しています</p> </> ) } export default Article
コンポーネント
Reactで開発を行う際は、コンポーネント単位でソースコードを記述していく
const TextInput = (props) => { const { type, name, value, className, onChange, required, id, onClick, placeholder } = props return ( <input type={type} name={name} value={value} className={className} onChange={onChange} required={required} id={id} onClick={onClick} placeholder={placeholder} /> ) } export default TextInput
コンポーネントの種類
クラスコンポーネントと関数コンポーネントの2種類が存在する。 - クラスコンポーネント
import React from "react"; class ClassComponent extends React.Component { render() { return <div>This is Class Component</div>; } }
- 関数コンポーネント
import React from "react"; const Component = () => { return <div>This is Functional Component</div>; };
※現状は関数コンポーネントを使用するほうが一般的になっている。
Props
コンポーネントの再利用性を向上させるための仕組み 親コンポーネントから子コンポーネントへデータや関数を渡す際は、propsを使用する。 ※子から親へのデータを渡すことは不可
import React from 'react' const List = (props) => { return ( <ul class="list-group"> {props.list.map((data) => ( <li key={index.toString()} class="list-group-item"> {data.title} </li> ))} </ul> ) } export default List
複数propsの渡し方
単純に記載するとこうなる。
return ( <StockEditForm productName={productName} productImageUrl={productImageUrl} productUrl={productUrl} expiryDate={expiryDate} number={number} inputProductName={inputProductName} inputProductImageUrl={inputProductImageUrl} inputProductUrl={inputProductUrl} inputExpiryDate={inputExpiryDate} inputNumber={inputNumber} /> )
だが、これをスプレッド演算子で以下のように簡潔に記述できる。
<StockEditForm {...{ productName, productImageUrl, productUrl, expiryDate, number, inputProductName, inputProductImageUrl, inputProductUrl, inputExpiryDate, inputNumber }} />
Children
子要素の数がいくつあってもpropsとして子要素をレンダリングすることが可能
import ... const ... return ( <BasicWrapper className="wrapper-stock"> // ラッパー用のコンポーネント <Modal/> <Paragragh> ... </BasicWrapper>
import ... const BasicWrapper = ({ children }) => { return <Wrapper>{children}</Wrapper> }