1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

Reactの開発環境を作る手順を残しました

Posted at

まずは設定(していない人)

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;
1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?