輝く僕らの学費

外の空気が大好き、そこそこ忙しい理系の男子大学生のぶちおです。

未分類

まずは流行りのReactに触れてみる

投稿日:

最近、多くのベンチャーでReactが使用されているのが目立つので、触れてみました。Vue.jsは簡単に触ったことはありますが、JSXなど不慣れな部分が多いので少し勉強してみます。

Reactについて

React、リアクトって読みます。
JavaScriptのフレームワークで、フロントエンドで最近輝いている。

簡単にReactプロジェクトを作成できるcreate-react-app

Facebook製のツールらしい。

導入

sudo npm install -g create-react-app

プロジェクトの作成

create-react-app {新しいプロジェクト名}

ここで、トラブル

まず、Node.jsのパスが通っていなかったので、create-react-appコマンドが使えなかった。さくっとリンクしてあげる。

ln -s /usr/bin/nodejs /usr/bin/node

create-react-appを実行すると

数分ぐらいかかってましたが「Happy hacking!」の表示、これでベースとなるプロジェクトが準備ができました。

動作させてみる

指示通り、作成されたreact2で、npm startをすると、次のようにサーバが起動し、そこに表示されたアドレスで実際に動作させることができます。

cd react2
npm start

実際には、自動でブラウザが立ち上がりました。

src/App.jsにメインのコードが書かれています。

ソースコード

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

jsにHTMLが突っ込まれてるっぽいけど若干違う感じ、そのうち慣れるんだろうな。
React使ってる自分がかっこいいので、頑張ります。

あるWebアプリが、現状ほぼCSSだけのレスポンシブなので、Reactでパフォーマンスやサクサク感の向上を目標としてスキルを身に着けていく!
React+Reduxのスキルとして学んでいく。

 

-未分類

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

ちばらき民の俺が日帰りドライブで行きたいところリスト

野島崎灯台 千葉県の最南端なスポット。千葉県の南の方は海水の透明度も高くて綺麗って言われてるから行きたい。 高速料金が片道2000円ぐらいで2時間半ぐらいかかる。 約150キロ 海ほたる 2時間半ぐら …

no image

Sandy Bridgeの頃はいくらでPC組めたのか

部屋の整理していたら、中学生の頃に初めて自作PCを組んだときのレシートが出てきたので、当時いくらぐらいでPC組んだのか、ここに残しておくます。

no image

コスパの良さそうなレンタカーのスノボプラン

以前にも使ったことのあるタイムズのカーレンタルで考えてみる。スタッドレスタイヤの料金込みのキャンペーンプランが、関東発かつ冬の間限定でおこなわれている。 まず、リフト代はかかんない前提 雪マジふくしま …

no image

有線LANアダプタ「LUA4-U3-AGT」をmacOS High Sierraで使うための手順

最近社内LANに有線LANが導入され、macで使うためのUSBの有線LANアダプタが届いたので使ってみたときのトラブル。 この有線LANアダプタをHigh Sierraのmacで使えるようにするための …

no image

Herokuの無料枠でPHP+MySQLをGitデプロイする、つもりが…課金発生

Herokuの無料枠を活用して、PHP + MySQLの環境を構築しました。