[Setup laravel&react&typescript] Self memo #React

This is self memo for just run program, so contents is probably wrong.

■create laravel project laravel new
■edit .editorconfig

root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 2
trim_trailing_whitespace = true

[*.php]
indent_style = space
indent_size = 4

[*.blade.php]
indent_style = space
indent_size = 2

[*.md]
trim_trailing_whitespace = false

[*.yml]
indent_size = 2

■edit /config/app.php

'timezone' => 'Asia/Tokyo',
'locale' => 'jp',

■edit webpack.mix.js

const mix = require('laravel-mix');

mix.react('resources/ts/app.tsx', 'public/js')
  .sass('resources/sass/app.scss', 'public/css')
  .sass('resources/sass/myapp.scss', 'public/css')
  .webpackConfig({
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          loader: 'ts-loader',
          exclude: /node_modules/,
        },
      ],
    },
    resolve: {
      extensions: ['*', '.ts', '.tsx'],
    },
  });

mix.browserSync({
  proxy: {
    target: "localhost:8000",
    ws: true
  },
  files: [
    './app/Http/Controllers/*.php',
    './public/css/*.css',
    './public/js/*.js',
    './resources/views/**/*.blade.php',
    './resources/views/*.blade.php',
    './resources/js/components/*',
  ],
  watchOptions: {
    usePolling: true,
    interval: 100
  },
  open: "external",
  reloadOnRestart: true
});

■run yarn install
■yarn add react-dom ts-loader typescript vue-property-decorator vue-template-compiler react @types/react @types/react-dom @types/styled-components
■touch layout.blade.php welcome.blade.php in /resources/views/

// layout.blade.php
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="{{ asset('css/app.css') }}">
  <link rel="stylesheet" href="{{ asset('css/myapp.css') }}">
</head>

<body>
  <div id="app">
    @yield('content')
  </div>
  <script src="{{ mix('js/app.js') }}"></script>
</body>

</html>

// welcome.blade.php
@extends('layout')

@section('content')
<div id="app">
  <div class="container">
    <div id="app_react"></div>
  </div>
</div>
@endsection

■touch /resources/sass/resets/_resets.scss

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure {
  margin-bottom: 0;
}

a:hover {
  text-decoration: none;
}

■touch myapp.scss in resources/sass/

// resets
// ------------------------------------
@import "./resets/resets";

■rename /resources/js/ => /resources/ts/
■touch global-declares.d.ts in /resources/ts/

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

declare module "*.json" {
  interface Foo {
    list: any;
  }

  const value: Foo;
  export default value;
}

■touch tsconfig.json in laravel root directory

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "jsx": "react",
    "strict": true,
    "experimentalDecorators": true,
    "allowJs": true,
    "resolveJsonModule": true,
  },
  "exclude": [
    "node_modules",
    "vendor"
  ]
}

■edit app.js to app.tsx in /resources/ts/

require('./bootstrap');
require('./components/MyComponent');

■touch /resources/ts/components/MyComponent.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import styled from 'styled-components';

const Wrapper = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 500px;
  border: 1px solid #333;
  margin: 0 auto;
`;

interface Props {
}
interface State {
  sampleState: ''
}

export default class MyComponent extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = {
      sampleState: ''
    };
    this.clickedButton = this.clickedButton.bind(this);
  }
  componentDidMount() {
    console.log('monunted call')
  }
  clickedButton() {
    console.log('clicked')
  }
  render() {
    return (
      <React.Fragment>
        <Wrapper>
          <button onClick={this.clickedButton}>click</button>
        </Wrapper>
      </React.Fragment>
    )
  }
}

if (document.getElementById('app_react')) {
  ReactDOM.render(<MyComponent />, document.getElementById('app_react'));
}

■delete ExampleComponent.vue
■php artisan serve & [yarn watch twice]