Zenn
🐥

【初心者向け/ITスクール 85日】Coding Test, React

2023/11/20に公開
Python
React
初心者
tech

はじめに

今日は、ITスクールに通った85日目の日です。

今日は午前中には、Pythonでコーディングテストを練習し、
いよいよReactを勉強することになりました！
早めに何かを作ってみてSpringBootと連携する練習をしてみたいと思います！

Python

unpacking print(*list, sep)

listの要素を内部から巡回して、要素ことにプリントする高級文法です。

例えば、完全数を判別するアルゴリズムを組み、完全数の場合、その数を除外して約数のリストをプリントするとします。

6の場合、[1,2,3,6]が約のリストであり、6は1+2+3なので完全数です。

while True:
  n = int(input())
  if (n == -1):
    break

  arr = []
  for i in range(1, n):
    if n % i == 0:
      arr.append(i)

  if (sum(arr) == n):
    print(n, ' = ')
    print(*arr, sep=' + ')
  else:
    print(n, 'is NOT perfect.')

6
1 + 2 + 3

[1,2,3]のリストをsep ='+'を基準にし、分けられたことが分かります。

 if (sum(arr) == n):
    print(n,'=', end='')
    print(*arr, sep=' + ')
  else:
    print(n, 'is NOT perfect.')
``

6 = 1 + 2 + 3
12 is NOT perfect
``

' + '.join(loop)

print(n, " = ", " + ".join(str(i) for i in arr), sep="")

join関数のパラメータの中でループをする方法もありました。
list comprehensionと似ている方法で、初めて見る方法でした。

for-break-else

javaではない、パターンで内部仕組みが分からなかった！調べた結果、
for文でbreakがあれば、elseを実行せず、無事にループがが終わったらelseを実行する

React

インストール

node.js LTSが必衰です。

  1. Workspace folderを生成し、shift + mouse R click -> terminal openします。

  2. コンソールにnpm create-react-app project名を入力し、待ちますと、project名のフォルダーが生成され、ダウンロードが終わります。

  3. VSCからproject名のフォルダーをopenし、terminal -> new terminal -> npm startを入力

  4. app.jsからindex.htmlを編集します。(localhost:3000)

  5. app.jsから作成したJSX(jsで作成するhtmlのような言語)をindex.jsから変換し、index.htmlに移ります。

JSXとは

Reactバージョンのｈtml(html X)のことです。
本来ならhtmlを作成するにはReact.createElement('div',null.hello world') のように関数で作成するしかありませんでしたが、JSXを通して簡単に作成することがでいます。

className

JSXでは、classを与えたい時、classNameというattributeで記入します。

<div className='App'>
      <div className='black-nav'>
        <h4>blog</h4>
      </div>

{変数名}

変数を通して、{}にdataを挿入。データーバインディングといいます。

let title = 'Trip Recommend';
.
.
 <h4 className={title}>{title}</h4>


JSの場合、Queryselector, getElementByで指定し、textContent, innerTextでいちいち指定する必要がありましたが、簡単にできます。

style = {{att1,value1 , attr2:value2}}

{} の中にJSのオブジェクトを入れる形です。
注意点としては-があるattributeはCamelCaseで作成します。

let post = 'Trip Recommend';
.
.
return(
<h4 style={({ color: 'title' , fontSize: '25px' })}>{post}</h4>

stateとは(vs {変数名})

JSのdesturctureで、データーを保管するデーター

useState()

import { useState } from 'react';

useState()

let [data,func] = useState('John',)

<h4>{data}</h4>

変数名}は、自動rendering X, stateは自動rendering O
簡単に言えば変動が多い要素（日、時間、題名、クラス名）などにStateを使用します！

let [titles,func] = useState(['title1','title2','title3'])のようにlistで保管することも可能です。

State変更

stateは変更される際にOverwriteされます（全部変わる）

一つのデーター

let [いいね,plusOne]=useState(0);
.
.
<span onClick={() => plusOne(いいね+1)}> いいね {いいね}　</span>


配列、オブジェクト

 let [title, changeTitle] = useState([
    'man',
    'wow',
    'yes,
  ]);

  function realChangeTitle() {
    let newTitle = [...title];
    newTitle[0] = 'woman';
    changeTitle(newTitle);
  }

新しいarray/objectを作成し、rest-pameterでdeep copyでします。
その後、変更したいstateのindexに値を入れれば、その配列を自動的にマッピングされ、比較されて更新されます。

Component

よく使うhtmlをcustom tagに作りコードを減らす方法。

   <Modal></Modal>
 </div>
);
}

function Modal(){
  return (
     <div className='modal'>
      <h4>Title</h4>
      <p>Date</p>
      <p>Details</p>
    </div>
  );
}

反復されるロジックによく活用することができますが、短所としては
Modalも関数なので、Stateもその関数のローカル変数として扱われます。Stateを利用する際に問題になるので、Propsを利用する必要があります。


```js
let Modal = () => {(return <h4>wow<h4>)}

Componentも表現式で呼ぶことが可能です。

Discussion