サムネがコーヒーの記事は書きかけです。

Reactまとめ

SHARE

Reactコマンド

Reactのコマンドをいくつか貼っておきます。

テンプレ生成

npx create-react-app my-app

ローカルサーバー起動

npm start　my-app

ビルド

npm run build

HTMLヘッダー

<script src="../src/index.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="index.css">

Index.js

基本はこの中に書いていき、適時コンポーネント化する。

import React from 'react';
import ReactDOM from 'react-dom/client';
import reportWebVitals from './reportWebVitals';


function arrRepr(arr){
    var returnval = "[";
    for (let i = 0; i < arr.length-1; i++) {
      returnval += arr[i] + ",";
    }returnval += arr[arr.length-1] + ']';
    return returnval;
  };
  
  function makeArray(min, max, length){
    var arr = new Int32Array(length);
    for (let i = 0 ; i<arr.length;i++) {
        arr[i] = (Math.floor( Math.random() * (max + 1 - min) ) + min);
    }
    return arr;
  };
  
  function bubbleSort(arrayin){
    var  arr = new Int32Array(arrayin.length);
    arr = arrayin;
      var isSwapped = true;
      while (isSwapped){
        isSwapped = false;
        for (let i = 0; i < arr.length-1; i++) {
          console.log(i);
          if (arr[i]> arr[i+1]){
            var tmp = arr[i];
            arr[i] = arr[i+1];
            arr[i+1] = tmp;
            isSwapped = true;
          }
        }
      }
      return arr;
  };
  
  
  
 

  function test1(){
    const Arr = new Array(26);
    for (let i = 0; i < Arr.length; i++){
        Arr[i] = String.fromCharCode(i+97);
    }
    return Arr;
  };
  

  function merge(left, right){
    var l_i = 0;
    var r_i = 0;
    var i = 0;
    const A = new Int16Array(left.length+right.length);

    while (l_i<left.length && r_i< right.length){
      if (left[l_i]<right[r_i]){
        A[i] = left[l_i];
        l_i +=1;
      }else{
        A[i] = right[r_i]
        r_i += 1;
      }
      i ++;
    }

    while (right.length-r_i>=1){
      A[i] = right[r_i];
      r_i ++;
      i ++;
    }
    while (left.length-l_i>=1){
      A[i] = left[l_i];
      l_i ++;
      i ++;
    }
    return A;
  }


  function mergeSort(arr){
    if (arr.length<= 1){
      return arr;
    }
    var mid = arr.length/2;
    return merge(mergeSort(arr.slice(0,mid)),mergeSort(arr.slice(mid)));
  } 





  function Component1(props){
    return  ( 
    <div>
      <p>param1 {props.param1}</p>
      <p>param2 {props.param2}</p>
    </div>
    )
  };




const array = makeArray(1,100,10);
const arrayRep = arrRepr(array);
const t0 = performance.now();
const sorted_array1 = bubbleSort(array);
const t1 = performance.now();
const deltaTbubble = (t1-t0);

const t2 = performance.now();
const sorted_array2 = mergeSort(array);
const t3 = performance.now();
const deltaTmerge = (t3-t2);




function mapperApphabet(arr){
  return arr.map(function numToAlpha(n){
    return String.fromCharCode(n);
  })
};

const arrnum = [97,98,99,100,101,102]

function filterTest(arr){
  var result = [];
  arr.forEach(function filter(n){
    if (n>100){
      result.push(n);
    }
  })
    return result;
}


function Form1(){
  return (
  <form className='form'>
  <input type='text' ></input>
  <br></br>
  <input type='password'></input>
  <br></br>
  <button type='submit'> Login</button>
</form>)
};


function LinkedListRepr(l){
  var currNode = l.head;
  var resultRepr = "";
  while (currNode.getNext() != null){
    resultRepr += currNode.getData();
    currNode = currNode.getNext();
    resultRepr += "->";
  }resultRepr += currNode.getData();
  return resultRepr;
}

class NodeT{
  constructor(data,next){
    this.data = data
    this.next = next;
  }

  getData(){
    return this.data;
  }

  getNext(){
    return this.next;
  }

  setNext(node){
    this.next = node;
  }
  setData(data){
    this.data = data;
  }
}

class LinkedList{
  constructor(data){
    this.head = new NodeT(data,null);
  }

  add(data){
    var currNode = this.head;
    while(currNode.getNext() != null){
      currNode = currNode.getNext();
    }
    currNode.setNext(new NodeT(data,null));
    return ;
  }
  reverse(){
    return;
  }

}

const linkedList = new LinkedList(1);
for(let i = 0;i<10;i++){
  linkedList.add(i+2);
};


function TestState(){
  var isDone = true;
  const colors =  {color: "red"} ;
  return <p style={isDone ? colors : null} > test statement for testState</p> ;
};

function buttonClick(){
  document.getElementsByClassName("buttonTest")[0].style.textDecoration = "line-through";
}

function buttonUnClick(){
  document.getElementsByClassName("buttonTest")[0].style.textDecoration = null;
}

function ButtonclickTest(){
  return(
    <div>
      <p className='buttonTest'>text fot button test</p>
      <button onClick={buttonClick}>To line through the text.</button>
      <br></br>
      <button onClick={buttonUnClick}>To get the text default.</button>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <div>
    <h1>Array operation and sorting</h1>
    <p><b>Array</b> {arrayRep}</p>
    <p>Sorted: <b>Bubblesort</b>{arrRepr(sorted_array1)}</p>
    <p>time: {deltaTbubble} (ms)</p>
    <p>Sorted: <b>Mergesort</b>{arrRepr(sorted_array2)}</p>
    <p>time: {deltaTmerge} (ms)</p>
    <form>
     <button type='submit'> Regenerate Array</button>
    </form>
    
    <br></br>
    <h1>Component</h1>
    <Component1 param1 = "p1" param2 = "p2" />
    <br></br>
    <h1>Mapping</h1>
    <p>Letters from mapper {arrRepr(mapperApphabet(arrnum))}</p>
    <h1>Filter</h1>
    <p>Filter result : {arrRepr(filterTest(arrnum))} </p>
    <h1>Form</h1>
    <Form1 />
    <br></br>
    <h1>LinkedList</h1>
    <p>result: {LinkedListRepr(linkedList)}</p>
    
    <br></br>
    <h1>stateTest</h1>
    <TestState />
    
    <br></br>
    <h1>buttonClickTest</h1>
    <ButtonclickTest />
  </div>
)
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Props

プロパティをhtmlタグから指定

function Component1(props){
    return  ( 
    <div>
      <p>param1 {props.param1}</p>
      <p>param2 {props.param2}</p>
    </div>
    )
  };

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <div>
    <Component1 param1 = "p1" param2 = "p2" />

  </div>

);

Map

const arrnum = [97,98,99]

function mapperApphabet(arr){
  return arr.map(function numToAlpha(n){
    return String.fromCharCode(n);
  })
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <div>
    <br></br>
    <p>Letters from mapper {arrRepr(mapperApphabet(arrnum))}</p>
  </div>
);

Filter


const arrnum = [97,98,99,100,101,102]

function filterTest(arr){
  var result = [];
  arr.forEach(function filter(n){
    if (n>100){
      result.push(n);
    }
  })
    return result;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <div>
    <p>Filter result : {arrRepr(filterTest(arrnum))}</p>
  </div>

);

LinkedList

function LinkedListRepr(l){
  var currNode = l.head;
  var resultRepr = "";
  while (currNode.getNext() != null){
    resultRepr += currNode.getData();
    currNode = currNode.getNext();
    resultRepr += "->";
  }resultRepr += currNode.getData();
  return resultRepr;
}

class NodeT{
  constructor(data,next){
    this.data = data
    this.next = next;
  }

  getData(){
    return this.data;
  }

  getNext(){
    return this.next;
  }

  setNext(node){
    this.next = node;
  }
  setData(data){
    this.data = data;
  }
}

class LinkedList{
  constructor(data){
    this.head = new NodeT(data,null);
  }

  add(data){
    var currNode = this.head;
    while(currNode.getNext() != null){
      currNode = currNode.getNext();
    }
    currNode.setNext(new NodeT(data,null));
    return ;
  }
}

const linkedList = new LinkedList(1);
for(let i = 0;i<10;i++){
  linkedList.add(i+2);
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <div>
    <h1>LinkedList</h1>
    <p>result: {LinkedListRepr(linkedList)}</p>
  </div>
)

State

declarative


function TestState(){
  var isDone = false;
  const colors =  {color: "red"} ;
  return <p style={isDone ? colors : null} > test statement for testState</p> ;
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <div>
    <br></br>
    <h1>stateTest</h1>
    <TestState />
  </div>
);

imperative

getbyclassnameを使用するときはインデックスアクセスに注意。

function buttonClick(){
  document.getElementsByClassName("buttonTest")[0].style.textDecoration = "line-through";
}

function buttonUnClick(){
  document.getElementsByClassName("buttonTest")[0].style.textDecoration = null;
}

function ButtonclickTest(){
  return(
    <div>
      <p className='buttonTest'>text fot button test</p>
      <button onClick={buttonClick}>To line through the text.</button>
      <br></br>
      <button onClick={buttonUnClick}>To get the text default.</button>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <div>
    <br></br>
    <h1>buttonClickTest</h1>
    <ButtonclickTest />
  </div>
)

オンクリックでカウント

import 
{React,useState} 
from "react";
function App(){
    var [count, setCount] = useState(0);

    function increase(){
        setCount(count + 1);
    }

    return(
        <div>
            <h1>{count}</h1>
            <button onClick={increase}> + </button>
        </div>
    );
}
export default App;

コメントを残す

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

前の記事

酸素移動容量係数KLAの求め方

次の記事

Reactで電卓の作成