まずは設定(していない人)
node.jsをインストール
Yarnをインストール
brew install yarn
バージョンが確認できたら成功
node -v
yarn -v
アプリ作成
開発するディレクトリで以下のコマンドを実行
npx create-react-app react-test
コンポーネントを作成
以下のディレクトリにコンポーネントを作成
- src
- Header.js
- About.js
- Services.js
Header.js
import React from 'react';
const Header = () => {
return (
<header>
<h1>My</h1>
</header>
);
};
export default Header;
About.js
import React from 'react';
const About = () => {
return (
<div>
<h1>about</h1>
</div>
);
};
export default Services;
Services.js
import React from 'react';
const Services = () => {
return (
<div>
<h1>Services</h1>
</div>
);
};
export default Services;
基本文法
export default
export default Header;
他のファイルで利用可能にするためのJavaScriptの文法です
import React from 'react';
import React from 'react';
JavaScriptのコードでReactライブラリを使用するために必要なステートメント
ルーティングを作成
ルーティングを設定できるdomを導入するために以下のコマンドを実行
npm install react-router-dom
起動
npm start
こちらで動作確認できます。
http://localhost:3000
CSS適用
以下のディレクトリにcssファイルを設置
src/styles/Header.css
cssの中身
Header.css
.header a {
color: red;
font-size: 18px;
}
Header.js
import React from 'react';
import './styles/Header.css'; ##追記
const Header = () => {
return (
<header className="header"> ##追記
<a>My</a>
</header>
);
};
export default Header;
メソッドをインポートして適用
./components/button.js
import React from 'react';
const Button = () => {
const handleClick = () => {
// メソッドの処理
console.log('ボタンがクリックされました');
};
return (
<button onClick={handleClick}>クリック</button>
);
};
export default Button;
Header.js
import React from 'react';
import './styles/Header.css';
import Button from './components/button.js'; //追記
const Header = () => {
return (
<header className="header">
<a>My</a>
{Button()} {} //追記
</header>
);
};
export default Header;