100日後にReactをちょっと理解するデザイナー - ちょっと触ってみたい
私は限界インハウスUIデザイナー。最近、エンジニアの工数が不足し、開発を効率化するため、デザインシステムを導入し浸透する活動をしている。
そこで出てくるのが「React」だ。リアクトって何すか…フロントエンドチームから説明はしてもらえるのだが、自分でも調べておかないとやばい。
HTMLとCSSがちょっと書けるレベルのデザイナーが、Reactについて調べた記録を残していくよ。
書ける様になるまではいかなくても、実際エンジニアが何をやっているのかを、UIを設計する立場から知っておきたい。
Progateやったよ
こういう時のProgate。Reactのコースがあったので、さっそくやってみよう。4回で1回あたりの目安が2時間未満なので頑張れそうだ。
App.jsの構成
やったあとで、ChatGPTに解説を依頼した
1.リアクトをインポート
import React from'react';
2.Reactのクラスコンポーネントを定義する典型的な構文
class App extends React.Component{
〜〜〜〜
}
3.〜〜〜〜の中で、render メソッド内でUIを定義し、return 文でコンポーネントの表示内容を返す。
(return内の記述「<h1>Hello, React App!</h1>」はJSX。外はJavaScript)
class App extends React.Component {
render() {
return (
<h1>Hello, React App!</h1>
);
}
}
4.App コンポーネントを他のファイルで使用できるようにエクスポート
export default App;
まとめるとこう。
// 1.リアクトをインポート
import React from 'react';
// 2.Appクラスを定義し、3.render メソッド内でUIを定義し、return 文でコンポーネントの表示内容を返す。
class App extends React.Component {
render() {
return (
<h1>Hello React</h1>
);
}
}
// 4.App コンポーネントを他のファイルで使用できるようにエクスポート
export default App;
const
class App extends React.Component {
render() {
const text="テキスト"
return (
<h1>{text}</h1>
);
}
}
こうすると、「<h1>テキスト</h1>」が表示される。
クリックイベントの追加
JSXでボタンに直接クリックイベントを追加する
return (
<div>
<button onClick={() => {console.log('あああ')}}>あああ</button>
</div>
)
通常の関数を定義しておき、その関数をonClickプロパティに渡す方法
function handleClick() {
console.log('あああ');
}
// ...
<button onClick={handleClick}>あああ</button>
state
stateの定義と表示
constructor(props) {
super(props);
// コンポーネントの初期状態を設定
this.state = {
name: 'あああ'
};
}
render() {
return (
<div>
<h1>Hello, {this.state.name}!</h1>
</div>
);
}
stateの更新
constructor(props) {
super(props);
// 初期状態の設定
this.state = {
name: 'デフォルトの名前'
};
}
// あるイベントが発生したときに呼ばれるメソッド
handleButtonClick = () => {
// this.setStateを使用してstateの更新
this.setState({ name: '変更する名前' });
};
render() {
return (
<div>
<h1>Hello, {this.state.name}!</h1>
{/* ボタンクリック時にhandleButtonClickメソッドが呼ばれ、stateが更新される */}
<button onClick={this.handleButtonClick}>Update Name</button>
</div>
);
}
「いいい」を押したボタンによって出し分けるには
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = { name: 'デフォルトの名前' };
}
// handleClickメソッドを定義
handleButtonClick = (newName) => {
// this.setStateを使用してstateの更新
this.setState({ name: newName });
}
render() {
return (
<div>
<h1>Hello,{this.state.name}!</h1>
<button onClick={() => { this.handleButtonClick('山田') }}>山田</button>
<button onClick={() => { this.handleButtonClick('鈴木') }}>鈴木</button>
</div>
);
}
}
export default App;
「handleButtonClick」は「newName」になるよ
handleButtonClick = (newName) => {
↓
ユーザーが「山田」もしくは「鈴木」ボタンをクリック
↓
onClick イベント内で、「this.handleButtonClick」である「山田」もしくは「鈴木」が「newName」として呼び出される。
<button onClick={() => { this.handleButtonClick('山田') }}>山田</button>
<button onClick={() => { this.handleButtonClick('鈴木') }}>鈴木</button>
↓
「handleButtonClick」は「this.setState」を使用してstateが更新される。
handleButtonClick = (newName) => {
this.setState({ name: newName });
}
↓
「name: 'デフォルトの名前' 」が「newName」に更新され、Hello,山田!になる
<h1>Hello,{this.state.name}!</h1>
GPT先輩に直される部分
修正例
修正前
ばなな(newName){
this.setState({name: newName});
}
render() {
return (
<div>
<button onClick={() => {this.ばなな('山田')}}>山田</button>
<button onClick={() => {this.ばなな('鈴木')}}>鈴木</button>
</div>
);
}
}
修正後
ばなな = (newName) => {
this.setState({ name: newName });
}
render() {
return (
<div>
<button onClick={() => { this.ばなな('山田') }}>山田</button>
<button onClick={() => { this.ばなな('鈴木') }}>鈴木</button>
</div>
);
}
}
修正前
ばなな(){
this.setState({〜〜〜〜〜});
}
render() {
return (
<div>
<button onClick={() => { this.ばなな()}}>+</button>
</div>
);
}
修正後
ばなな = () => {
this.setState({〜〜〜〜〜});
}
render() {
return (
<div>
<button onClick={this.ばなな}>+</button>
</div>
);
}
アロー関数って何?
// 通常の関数式
function add(a, b) {
return a + b;
}
// アロー関数
const addArrow = (a, b) => a + b;
進捗
一晩寝たら、書けなくなると思うけど、コードを見たときに、何をしようとしているのかは、何となくわかる様になったかもしれない。
明日もプロゲートをやる。
この記事が気に入ったらサポートをしてみませんか?