# Reactプロジェクト作成
[参考](https://qiita.com/Takashi_Code_20/items/0dd566eba64da45ccd62#:~:text=EC2%E3%81%AF%E3%82%AF%E3%83%A9%E3%82%A6%E3%83%89%E5%86%85%E3%81%A7%E6%8F%90%E4%BE%9B%E3%81%95%E3%82%8C%E3%82%8B%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%82%BF%E3%83%BC%20%28%E3%83%AA%E3%82%BD%E3%83%BC%E3%82%B9%29%E3%81%A7%E3%81%99%E3%80%82%20%E5%BE%8C%E3%81%AB%E4%BD%9C%E6%88%90%E3%81%99%E3%82%8BReact%E3%82%A2%E3%83%97%E3%83%AA%E3%81%AF%E3%81%93%E3%81%AEEC2%E3%81%AB%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%B3%E3%81%97%E3%81%BE%E3%81%99%E3%80%82%20%E6%A4%9C%E7%B4%A2%E7%AA%93%E3%81%A7EC2%E3%82%92%E6%A4%9C%E7%B4%A2%E3%81%97%E3%81%BE%E3%81%99%E3%80%82%20%E3%82%A4%E3%83%B3%E3%82%B9%E3%82%BF%E3%83%B3%E3%82%B9%E3%82%92%E8%B5%B7%E5%8B%95%E3%81%97%E3%81%BE%E3%81%99%E3%80%82,%E3%83%9E%E3%82%B7%E3%83%B3%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8%E3%81%AFAmazon%20Linux%202%20AMI%E3%82%92%E9%81%B8%E6%8A%9E%E3%80%82%20%E3%82%A4%E3%83%B3%E3%82%B9%E3%82%BF%E3%83%B3%E3%82%B9%E3%82%BF%E3%82%A4%E3%83%97%E3%81%AFt2.micro%E3%82%92%E9%81%B8%E6%8A%9E%E3%80%82)

# React + Typescript な環境を構築する

### Reactのプロジェクトを作成

npx create-react-app {プロジェクト名} --template typescript

（例）

npx create-react-app react-sample --template typescript

### Tailwind css 追加

cd react-sample
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

- tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

- ./src/index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

## React Routerの設定
[参考](https://qiita.com/suisui654/items/1b89446e03991c7c2c3d)
[参考](https://qiita.com/MasakiFukunishi/items/861e21877d5333768847)

npm install -g yarn
yarn init
yarn add react-router-dom

Form.tsx

import React from 'react';
import logo from './logo.svg';
import './App.css';

function Form() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>
            Form
        </h1>
      </header>
    </div>
  );
}

export default Form;

index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import Form from './Form'; // 追加
import reportWebVitals from './reportWebVitals';
import { Routes, Route, BrowserRouter } from "react-router-dom"; // 追加

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<App/>} />
        <Route path="/form" element={<Form/>} />
      </Routes>
    </BrowserRouter>
  </React.StrictMode>,
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

App.tsx

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { Link } from "react-router-dom" // 追加

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <Link className='' to="/form">Formへ</Link>
      </header>
    </div>
  );
}

export default App;

サーバ起動

yarn s

## reactでSSRしてみた（XAMMP）
package.json("name"と同一のインデントに以下を追記)

"homepage": "http://localhost/react/",

publicフォルダに「.htaccess」を追加

Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

以下のコマンドで生成されるbuildファイルの中身を C:\xampp\htdocs\react に入れる

npm run build

`http://localhost/react/`にアクセス