はじめてのcreate-react-app

最終目標

フロントエンドとバックエンドのDB排他を調べてみたい。

今回の目標

Using React in Visual Studio Code の内容を実施する。
https://code.visualstudio.com/docs/nodejs/reactjs-tutorial

OS環境

$ lsb_release -a
No LSB modules are available.
Distributor ID: Ubuntu
Description:    Ubuntu 18.04.2 LTS
Release:        18.04
Codename:       bionic

開発環境構築

$ sudo apt update
$ sudo apt upgrade -y
$ sudo reboot
$ sudo apt install nodejs
$ node -v
v8.10.0
$ sudo apt install npm
$ npm -v
3.5.2

React環境構築

$ sudo npm install -g create-react-app
$ create-react-app --version
2.1.5

Reactアプリ作成

$ create-react-app my-app
$ cd my-app/
$ npm start

外部アクセスのためポートを開放する場合(必要に応じて)

$ sudo ufw allow ssh
$ sudo ufw allow 3000

Hello World!

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

-ReactDOM.render(<App />, document.getElementById('root'));
+var element = React.createElement('h1', { className: 'greeting' }, 'Hello, world!');
+ReactDOM.render(element, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

感想

• モダンな開発スタイルのような気がする
• 次は、MERN Starterを調べてみたい
• AngularとVueも調べてみたい
• TypeScriptも調べてみたい

以上