• 日本語
    • English (英語)
Avinton JapanAvinton JapanAvinton JapanAvinton Japan
  • サービス
    • Avinton Data Platform
    • エッジAIカメラ
    • AIサービス開発
    • AI画像解析 – 無償PoC
  • 最新情報
  • アカデミー
  • 採用情報
    • Avintonで働く魅力
    • 求人
    • よくある質問
  • 企業情報
    • 会社概要
    • 代表からご挨拶
    • CSR(企業の社会的責任)
  • お問い合わせ

NodeJSでWebアプリケーション開発 – React編

  • Python3.6 と OpenCV のインストール (Ubuntu18.04LTS)
  • ルーティング
  • 見た目を美しくしてみましょう
  • NAT
  • 三目並べ – 2.〇×を交互にゲーム盤に入るようにしよう
  • カート内のアイテム個数を変更
  • 三目並べ – 3.勝敗がつくようにしよう
  • EC2からS3へ自動でぽいぽいアップロードするスクリプトの作成
  • 三目並べ – 4.「スタート」「リセット」ボタンをつけよう
  • 三目並べ – 5.先攻後攻を決めて、コンピュータ対戦にしよう(前編)
  • カートの設置
  • Ruby on Rails を MySQLでセットアップ
  • レイアウト調整
  • 機械学習入門者向け Support Vector Machine (SVM) に触れてみる
  • AWSアカウントの作成と必ずやるべきセキュリティ対策
  • VLAN
  • テスト
  • 機械学習を用いた画像分類
  • Ruby on Railsによる簡単なウェブアプリケーション
  • 正規表現とパイプ
  • 機械学習エンジニアに必要なスキル
  • Ubuntuの設定
  • PostgreSQL Setup
  • REDIS
  • Amazon EC2 インスタンスの初期設定をしよう
  • Pythonの設定
  • GNS3のセットアップ
  • viエディタ
  • AWSのEC2インスタンスでWordPressブログを公開してみよう
  • Pythonでデータベースを操作する
  • Python2.7とOpenCVのインストール
  • ファイル操作コマンド
  • OpenCVのテストプログラム
  • グループとユーザー
  • Pythonで画像を分類するプログラムを作成する
  • AWS CLIをインストールしてコマンド操作しよう
  • Virtualisation and Container (仮想化とコンテナ) – Ansible, Docker and Kubernetes
  • Windows Server 2012 R2 Hyper-V
  • 困った時に使うコマンド
  • PacketTracerのセットアップ
  • 一般グループのユーザーとグループ
  • AWS Route 53を使って独自ドメインのWebページを表示させてみよう
  • プライバシーポリシー
  • VMware ESXi サーバー構築
  • 三目並べ – 6.先攻後攻を決めて、コンピュータ対戦にしよう(後編)
  • フロントエンド開発のための環境構築
  • フロントエンドのデモンストレーション
  • APIのデモンストレーション
  • CISCO 1800ルータセットアップ
  • ファイル検索コマンド
  • ESXi – Switchの追加とVLAN
  • 質問
  • 仮想化環境のディスク容量を拡張する
  • ユーザー権限とアクセス権
  • 三目並べ – 0.導入
  • テキスト処理
  • ESXi - VyOS
  • データベースへのデータロード
  • 機械学習入門者向け Naive Bayes(単純ベイズ)アルゴリズムに触れてみる
  • CCNA
  • ESXi – 小規模ネットワーク 構築
  • ファイル管理
  • 機械学習入門者向け ChainerRLでブロック崩しの学習
  • AWS CLIを使ってEC2のファイルをS3へアップロードしよう
  • CSV import & export – Node.js, mySQL – 1
  • 機械学習入門者向け ランダムフォレストによる Kaggle Titanic生存者予測
  • CSV import & export – Node.js, mySQL – 2
  • PCからルータ、スイッチへのSSH接続設定
  • 【Python入門】Python Numpy チュートリアル
  • SQL 便利な関数
  • PostgreSQLによるデータ分析
  • 機械学習入門者向け 分類と回帰の違いをプログラムを書いて学ぼう
  • NodeJSでWebアプリケーション開発 – React編
  • Pythonによるマルチスレッドプログラミング実践
  • Certbotを使ってSSL証明書を発行し、HTTP通信を暗号化しよう
  • DockerとApacheを使ってWebサーバーを構築しよう
  • NodeJSでWebアプリケーション開発 – React編
  • Ruby on Rails インストール
  • AmazonEC2とVPCでネットワークとサーバーを構築しよう
  • AWS入門者向け 初心者が最初に理解すべきEC2とVPCの基本的な用語解説
  • Linuxとは
  • Pandasによる構造化データ分析
  • カート機能作成
  • Ruby on Rails Academy
  • ショッピングアプリケーション作成
  • ダイナミックルーティング
  • PostgreSQL – Python – Apache – Bootstrap
  • 三目並べ – 1.ゲーム盤を作ろう
Home Academy NodeJSでWebアプリケーション開発 – React編

今回はNodeJS環境での簡単なTodoを管理するWebアプリケーションをReactで作成します。

環境

Ubuntu 18.04.2 LTS

NodeJS: 10.16.0

npm: 6.10.3

Reactアプリケーションの立ち上げ

sudo npm install -g create-react-app
create-react-app academy-react-app
cd academy-react-app
npm start

下の画面が表示されれば成功です。

コンポーネントの編集

Reactのアプリケーションを立ち上げることができました。

それでは画面を編集していきます。

src/App.js の中身を以下のコードに置き換えてください。

import React from 'react';

import './App.css';

function App() {

  return (

    <div className="App">
      <h5>Sample Component</h5>
          <p> Text Before Changed </p>
          <button >
            Press Here!
          </button>

      </div>
  );
}

export default App;

下のように表示されるはずです。

コンポーネントライブラリ

ここに今回はMaterial-UIというReactのコンポーネントライブラリを使って少しだけ見た目を整えます。

Reactでコンポーネントを使う時こういったライブラリを使うと便利です。

まずは必要なモジュールをインストールします。

一度コンソールでCtrl+Cでアプリを終了し、下のコマンドを入力・実行してください。

npm install @material-ui/core

npm install @material-ui/styles

App.jsの内容を以下に書き換えてください。

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';

import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';

import Button from '@material-ui/core/Button';

import './App.css';

function App() {
  const useStyles = makeStyles(theme => ({
    root: {
      padding: theme.spacing(3, 2),
    },
  }));

  const classes = useStyles();

  return (
    <div className="App">
      <Paper className={classes.root}>
        <Typography variant="h5" component="h3">
          Sample Component
        </Typography>
        <Typography component="p"> Text Before Changed </Typography>

        <Button variant="contained" color="primary" >

          PRESS HERE!

        </Button>

      </Paper>
    </div>
  );
}

export default App;

保存して再度以下のコマンドを実行しましょう。

npm start

ブラウザで下のように表示されていれば問題ありません。

クリックイベント処理

さらにボタンのクリック時の動作を追加します。

<Button variant="contained" color="primary" >

となっているところを以下のように書き換えてください。

<Button variant="contained" color="primary" onClick={() => alert("Button Pressed!")} >

保存してブラウザ上でボタンをクリックすると「Button Pressed!」と表示されるはずです。

フックによるステート管理

ボタンで画面のコンポーネントを編集できるようにします。

まず、App.jsのReactをインポートしてる部分をuseState関数をインポートできるように以下のように変更してください。

import React, { useState } from 'react';

そしてreturn関数の前に下の一行を追加してください。

const [text, setText] = useState("Text Before chenged")

続いてボタンのクリック時の動作を

alert("Button Pressed!")

から

setText("Button Pressed!")

にしてください。

最後に

<Typography component="p"> Text Before Changed </Typography>

となっている部分を以下のように変更してください。

<Typography component="p">{text}</Typography>

App.jsは以下のようになっているはずです。

import React, { useState } from 'react';
import { makeStyles } from '@material-ui/core/styles';

import Paper from '@material-ui/core/Paper';
import Typography from '@material-ui/core/Typography';

import Button from '@material-ui/core/Button';

import './App.css';

function App() {
  const useStyles = makeStyles(theme => ({
    root: {
      padding: theme.spacing(3, 2),
    },
  }));

  const classes = useStyles();
  const [text, setText] = useState("Text Before chenged")

  return (
    <div className="App">
      <Paper className={classes.root}>
        <Typography variant="h5" component="h3">
          Sample Component
        </Typography>
        <Typography component="p"> {text}</Typography>

        <Button variant="contained" color="primary"
          onClick={() => setText("Button Pressed!")}
        >
          PRESS HERE!

        </Button>

      </Paper>
    </div>
  );
}

export default App;

保存してブラウザ上でボタンをクリックし「Text Before chenged」が「Button Pressed!」に変れば問題ありません。

ここではReactのフックを使ってtextというステートをsetText関数で変更し、

textに関連している全てのコンポーネントを自動で更新しています。

詳しくはReact公式: ステートフックの利用法を参照してください。(Languagesから言語を日本語にできます)

JavaScriptの関数は非同期に処理される点について注意してください。(前の関数の終了を待たずに次の関数が実行されます。)

アクテビティ

    1. インプットフォームを置いて、入力した内容が下のスペースに表示されるようにしましょう。

    (インプットフォームのonChangeの関数にステートフックを指定してテキストの変数を管理しましょう)

    参考:https://material-ui.com/components/text-fields/

    2. ボタンを押したらインプットフォームに入力された内容が下に追加されていくようにしましょう。

    javascriptのmap関数を使うと便利です。

    参考:https://reactjs.org/docs/lists-and-keys.html

    3. 一行ごとにラジオボタンを表示させましょう。

    参考:https://material-ui.com/components/radio-buttons/

    下ようになっていれば今回のアクティビティは完了です。

    参考リンク:

    React公式チュートリアル

    React公式:フックの導入

    Material UI公式

    あなたも、Avintonでこのような最先端技術に日常的に
    取り組んでみませんか?

    優秀なエンジニアの成長を導きながら、AIやビッグデータなどの最先端技術を活用していくことが私たちのビジョンです。
    Avintonの充実した技術研修でスキルアップを図り、あなたのキャリア目標を達成しませんか?

    採用情報

    採用情報

    採用情報

    Search

    タグ

    2017 2018 AI Avinton Avinton Academy Avinton Japan Avintonジャパン DX HTML Linux Python Ruby Webエンジニア アビントン アビントンジャパン アヴィントン アヴィントンジャパン イベント インフラエンジニア エンジニア グローバル サーバーエンジニア データサイエンス データサイエンティスト データベース データ解析 ニュービジネス研究会 ネットワークエンジニア ビックデータ ベンチャー 勉強会 就活 就職活動 成長 技術インターン 採用 新規事業 横浜 機械学習 機械学習エンジニア 派遣 第二新卒 経営者交流会 英語 起業
    © 2021 Avinton | All Rights Reserved | プライバシーポリシー
    • サービス
      • Avinton Data Platform
      • エッジAIカメラ
      • AIサービス開発
      • AI画像解析 – 無償PoC
    • 最新情報
    • アカデミー
    • 採用情報
      • Avintonで働く魅力
      • 求人
      • よくある質問
    • 企業情報
      • 会社概要
      • 代表からご挨拶
      • CSR(企業の社会的責任)
    • お問い合わせ
    • 日本語
      • English (英語)
    Avinton Japan