プログラミングの勉強 独学でも十分可能!Reactの勉強 在庫管理アプリを作ってみた!

Programming

プログラミングの勉強 独学でも十分可能!Reactの勉強 在庫管理アプリを作ってみた!

JavaScriptの勉強でフレームワークのReactを覚えたいと思い勉強を始めました。

Reactのいいところはcodepenで確認できるところです。

codepenで書いて確認してソースコードを残して、部品をたくさん作ってコードペンで管理して使いたいときに取り出せるようにしておいたら楽そうです。

と言う事で簡単な在庫管理アプリをドットインストールの講義から勉強して基本的なソースコードをcodepenにストックしておきたいと思います。

最初にReactのdevelopertoolが使えるように設定してゆかなければなりません。

検証機能を使えるようにしておくことは将来的に複雑な機能を使うようになると必ず必要になってくると言う事です。

まずchromeにReactのdevelopertoolを追加してゆきます。=>React

chromeに追加されたReactを右クリックしての拡張機能の管理をクリックします。

PC要らない!スマホだけで ワードプレス 使い方基本操作
スマホだけでワードプレスを操作するのは難しくありません。海外ミニマリストの私は、スマホだけでワードプレスを作っています。このサイトもスマホだけで作成しています。このページはスマホでワードプレスを動かすための、基本的な使い方を説明しています。

そしてファイルのURLへのアクセスを許可するの項目をオンにします。これで設定は完成です。

次にReactのウェブページからhtmlのhead内に張り付けるためのコードをコピーします。

ReactのDocsから入ってhtmlファイルのダウンロードからソースコードをコピーします。

htmlのコードを自分で打ち込んでいるならば、赤枠のところをコピーしてhead内にペーストします。

Reactの練習でボックスを作ってクリックするとHelloの文字がポップアップで出てくる関数を作ってみました。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    
    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      (() => {

      function showMessage() {
        alert('Hello');
      }

      ReactDOM.render(
        // <div className="box"></div>,
        // <div style={{width:100, height:100, backgroundColor:'tomato'}}></div>,
        // <div style={{width:100, height:100, backgroundColor:'tomato'}} onClick="showMessage"></div>,
        // <div style={{width:100, height:100, backgroundColor:'tomato'}} onClick="{showMessage}"></div>,
        <div style={{width:100, height:100, backgroundColor:'tomato'}} onClick={showMessage}></div>,
        document.getElementById('root')
      );
    })();
(() => {

      function showMessage() {
        alert('Hello');
      }
.box{
  width:100px;
  height:100px;
  background-color:skyblue;
}

こんな感じでポップアップが出てきます。

今度はカウンターを作ってみたいと思います。

カラー付きのカウンターのソースコードを書いてゆきます。

クリックすると説明アラートが出るようにソースコードにイベントをつけてゆきます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>React Practice</title>
  <link rel="stylesheet" href="css/styles.css">
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    (() => {

      function Counter(props) {

        // function countUp() {
        //   alert('count up!');
        // }
        // function countUp(color) {
        //   alert(color);
        // }
        function countUp(e, color) {
          e.preventDefault();
          alert(color);
        }

        // return (
        //   <li style={{backgroundColor:props.color}} onClick={countUp}>
        //     0
        //   </li>
        // );
        // return (
        //   <li style={{backgroundColor:props.color}} onClick={() => countUp(props.color)}>
        //     0
        //   </li>
        // );
        return (
          <li style={{backgroundColor:props.color}}>
            <a href="#" onClick={e => countUp(e, props.color)}>
              0
            </a>
          </li>
        );
      }

      ReactDOM.render(
        <div className="container">
          <ul>
            <Counter color="tomato"/>
.box {
  width: 100px;
  height: 100px;
  background-color: skyblue;
  
}

body {
  font-size: 16px;
  font-family: Verdana, sans-serif;
  background-color:yellow;
}

.container {
  width: 330px;
  margin: 20px auto;
}

.container ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}

.container li {
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  border-radius: 5px;
  margin: 0 5px 10px;
}

こんな感じでアラートが出て来ます。

左端のトマト色のカードをタップ
右端のグリーンをタップ

stateを使うためにはclassに書き換えておかなければならないのでその書き換え処理の仕方。

stateはuiの書き換えに必要となるコンポーネントの状態を保持するためのデータ。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactTest2</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    
    <!-- Don't use this in production: -->
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      (()=>{
       
     function Counter(props) {
        return (
          <li style={{backgroundColor:props.counter.color}} onClick={() => props.countUp(props.counter)}>
            {props.counter.id}:{props.counter.count}
          </li>
        );
      }

      function CounterList(props) {
        const counters = props.counters.map(counter => {
          return (
            <Counter
              counter={counter}
              key={counter.id}
              countUp={props.countUp}
            />
          );
        });
        return (
          <ul>
            {counters}
          </ul>
        );
body{
  font-size:16px;
  font-family:Verdana,sans-serif;
  color:white;
  background-color:#2E2EFE;
}
.conttainer{
  width:330px;
  margin:20px auto;
}

.container ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
}

.container li{
  width:100px;
  height:100px;
  line-height:100px;
  text-align:center;
  cursor:pointer;
  user-select:none;
  border-radius:5px;
  margin:0 5px 10px;
}

.container div{
  text-align:right;
  padding:5px;
  font-size:12px;
  font-weight:bold;
}

カードをタップすると右下の数が加算されてゆく。

カードをタップ右下にトータルが出力

Reactでは機能を拡張したり再利用したりするのにコンポーネントの単位で使う事が簡単に出来る。

Reactは覚えたら面白そうですね。

ウェブページのUIに特化した動きが作れて部品単位で実装してゆけるところがいいですね。

まだまだ始めたばかりなので頑張っていろいろ試してゆきたいと思います。

それだはまた( ´∀`)

https://toshilog365.com/programming-with-smartphone/

コメント

Translate »