5
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

はじめてのcreate-react-app

Last updated at Posted at 2019-03-04

最終目標

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

以上

5
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?