最終目標
フロントエンドとバックエンドの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も調べてみたい
以上