takumiblog

新人エンジニアの技術ブログ

学習日記6日目

今日学んだこと

React

jsx記法について

jsファイル内で、htmlを記述して、表示することができる。

const App = () => {
  return (
    <>
      <h1>こんにちは</h1>
      <p>お元気ですか</p>
    </>
  );
};

ReactDom.render(<App />, document.getElementById("root"));

Appという変数を定義して、return内で、jsx記法を用いて、表示するhtmlを記述している。
ポイントとしては、複数のタグを記述する場合、タグで囲うこと。
<div>で囲う方法でもいいし、上記のように、空タグで囲うのもok。

props

propsを用いることで、オブジェクトに引数を渡すことができる。

src/App.jsx
<ColorfulMessage color="pink" message="お元気です" />

---------------------------------------------------------------
src/components/ColorfulMessage.jsx

const ColorfulMessage = (props) => {
  };

return <p style={contentStyle}>{props.message}</p>;

App.jsxファイル内の内容がpropsに渡される。
console.log(props)などで、確認してみると、以下のように値が取得できていることがわかる。

{color: "pink", children: "お元気です"}

そして、props.messageで、値を呼び出している。

state

userState を用いることで、動的に値を変化させることができる。

const App = () => {

  const onClickCountUp = () => {
    setNum(num + 1);
  };
  const [num, setNum] = useState(0);
<button onClick={onClickCountUp}>ボタン</button>
<p>{num}</p>

ボタンがクリックされたら、userStateで元々定義していた0に1が加算されて、クリックされるごとに、1づつ値が増えていくような仕組みを作ることができる。

SQL

基本文法

基本的なselect,update,delete,insertについて学んだ。
どの文法多少の書き方の違いはあるが、基本的な書く流れは決まっていて。
最初に、どのテーブルかを指定して、その次にどんな変更を加えるのか、最後にどんなレコードを対象にするのかを指定している。

select

select *
from テーブル名 
where 条件 

update

update テーブル名
set 変更するカラム名 =  値
where  条件

delete

delete 
from テーブル名
where 条件

insert(追加)

insert into テーブル名
(カラム名、カラム名)
value (値,値)