首先是没有进行设置的人。

安装Node.js

安装Yarn

brew install yarn

成功即为确认版本。

node -v
yarn -v

应用程序开发

在开发目录中执行以下命令

npx create-react-app react-test

创建组件

在该目录下创建组件。

- src
 - Header.js
 - About.js
 - Services.js

import React from 'react';

const Header = () => {
  return (
    <header>
      <h1>My</h1>
    </header>
  );
};

export default Header;

import React from 'react';

const About = () => {
  return (
    <div>
      <h1>about</h1>
    </div>
  );
};

export default Services;

import React from 'react';

const Services = () => {
  return (
    <div>
      <h1>Services</h1>
    </div>
  );
};

export default Services;

基本语法

默认导出

export default Header;

这是用于使其在其他文件中可用的JavaScript语法。

使用React导入自’ react’；

import React from 'react';

为了在JavaScript代码中使用React库所需的语句。

创建路由 (CjHu4lRW5q+35bC7)

为了引入可以设置路由的DOM，执行以下命令。

npm install react-router-dom

开始运行

npm start

可以在这里进行操作确认。
http://localhost:3000

CSS的使用

请将CSS文件放置在以下目录中。

src/styles/Header.css

CSS的内容

.header a {
  color: red;
  font-size: 18px;
}

import React from 'react';
import './styles/Header.css'; ##追記

const Header = () => {
  return (
    <header className="header"> ##追記
      <a>My</a>
    </header>
  );
};

export default Header;

导入和应用方法

import React from 'react';

const Button = () => {
  const handleClick = () => {
    // メソッドの処理
    console.log('ボタンがクリックされました');
  };

  return (
    <button onClick={handleClick}>クリック</button>
  );
};

export default Button;

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;