React.jsの学習日記（2日目）
こんにちは、React.js学習日記の2日目です！
前回の記事でReact.jsの基本的な概念について学んできました。今日は前回の予告通り、React.jsでコンポーネントを宣言する方法や、propsとstateの使い方について詳しく解説していきます！
React.jsでコンポーネントを宣言する方法
React.jsでは、UIを構成するために「コンポーネント」と呼ばれる部品を組み合わせていきます。コンポーネントは、HTML要素やJavaScriptの関数のように、再利用可能な部品として定義されます。
React.jsでコンポーネントを宣言するには、まず「React.Component」というクラスを継承する新しいクラスを作成します。この新しいクラスは、React.jsの仮想DOMで実際に描画されるコンポーネントとして機能します。
以下は、React.jsでHello Worldを表示するコンポーネントの例です。
import React from 'react'; class
HelloWorld extends React.Component {
render() { return ( Hello World!
); } }
export default HelloWorld;
この例では、Reactのコンポーネントクラスを継承したHelloWorldというクラスを定義しています。renderメソッドは、コンポーネントの表示内容を定義するために使用されます。この例では、<h1>タグ内に「Hello World!」というテキストを表示しています。
propsとstateの使い方
React.jsのコンポーネントは、親コンポーネントから子コンポーネントに情報を渡すことができます。この情報は、propsと呼ばれます。propsは、コンポーネントを再利用するために非常に便利な方法です。
以下は、propsを使用してコンポーネントを定義する例です。
import React from 'react'; class
Greeting extends React.Component {
render() {
return (
Hello, {this.props.name}!
); } }
export default Greeting;
この例では、Greetingコンポーネントがpropsを使用して、名前を表示しています。propsの値は、この例では
{this.props.name}次に、React.jsのコンポーネントで重要な役割を果たすstateについて説明します。stateは、コンポーネント内で管理されるデータのことです。stateの変更により、React.jsは自動的に再レンダリングします。
以下は、stateを使用してカウンターを増やす例です。
import React from 'react'; class
Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
handleClick = () => {
this.setState({ count: this.state.count + 1 });
}
render() {
return (
Count: {this.state.count}
);
}
}
export default Counter;
この例では、Counterコンポーネントがstateを使用して、クリックするたびにカウンターを1増やします。この例では、クリックされるたびにsetStateメソッドを呼び出し、countの値を変更しています。この変更は、自動的に再レンダリングされ、表示されるカウント数が更新されます。
まとめ
今日は、React.jsでコンポーネントを宣言する方法と、propsとstateの使い方について学びました。コンポーネントは、UIを構成するために非常に重要な部品であり、propsとstateは、コンポーネントの再利用性と動的な機能を実現するために使用されます。 次回の記事では、React.jsでコンポーネントを再利用する方法と、React.jsのイベント処理について学びます。お楽しみに！ それでは、今回も最後までお読みいただきありがとうございました！また次回もお会いしましょう！ 🎉🎉🎉
