我想学习React。

我将记录React开发的初始配置步骤和组件调用的学习方法。这只是我在家中学习的个人备忘录，但如果对其他人有参考价值，我会很高兴。我的环境是Mac。

我们一起创作吧

已安装了node。
命令如下。

npx create-react-app my-app

顺便提一句，之前遇到过以下错误，好像无法使用大写的应用程序名称。为什么呢…

姓名不再可以包含大写字母

暫時創建完成了。當運行伺服器時，可以在本地啟動並查看畫面。

npm start

尝试各种不同的方法。

我將標準的App.js按照以下方式進行了修改。

import React from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom';

import PageOne from './pages/Pageone';

const PageTwo = () => {
  return (
    <div>
      PageTwo
      <Link to="/">
        <button>
          show PageOne when you click this!!
        </button>
      </Link>
    </div>
  );
};

const App = () => {
  return (
    <div>
      <BrowserRouter>
        <div>
          <Route path="/" exact component={PageOne} />
          <Route path="/pagetwo"  component={PageTwo} />
        </div>
      </BrowserRouter>
    </div>
  );
};

export default App;

我在这里写了路由器和组件的调用。
参考页面→简单介绍了在React Router中进行页面导航的方法

既然这样特地分开了组件，我试着将名为 PageOne 的组件放到了名为 pages 的文件夹里。

内部是这样的。

import React from 'react';
import { Link } from 'react-router-dom';

import Aisatsu from '../components/Aisatsu';

const PageOne = () => {

    return (
      <div>
        <Aisatsu greet="こんにちは！" />
        PageOne
        <Link to="/pagetwo">
          <button>
            show PageTwo when you click this!!
          </button>
        </Link>
      </div>
    );  
  }


  export default PageOne;

importさえあれば、コンポーネントを使用するためには必要なようです。
そして、Aisatsuコンポーネントを呼び出しています。
Aisatsuコンポーネントはこちらです。

import React, { Component } from 'react';

class Aisatsu extends React.Component {
    render() {
      return (
        <h1>{this.props.greet}</h1>
      );
    }
  }

export default Aisatsu;

我对props的使用方法有点理解了。

暂时只有学习才是重要的……将继续努力。