JavaScriptとReactのお勉強

const a = 0; // 書き換え不可
let b = 1; // 書き換え可

const a = 5;
const b = 10;

console.log(`a=${a}, b=${b}, a+b=${a+b}`)

const onClickSwitch = (a, b) => {
	let result = a + b;
	return result;
};

const myProfile = {
	age: 24,
};
const {name = "Sato"} = myProfile;

const message = `Hello, ${name}.`;
console.log(message); // Hello, Sato.

let numberStore = [0, 1,2];
const newNum = 12;
numberStore = [...numberStore, newNum];

const myFunction = (a, b, c, d) => a+b+c+d;

// 関数呼び出し時に展開することで引数を一つづつ書かないようにする（残余構文）
myFunction(...numberStore);

let a, b, rest;
// 配列の分割代入
[a, b] = [10, 20]; // a=10, b=20
[a, b, ...rest] = [10, 20, 30, 40, 50] // a=10, b=20, rest=Array [30, 40, 50]

// オブジェクトの分割代入
({a, b, ..rest}) = {a:10, b:20, c:30, d:40, e:50});// a=10, b=20, rest=Object {c:30, d:40, e:50}

// 戻り値の受け取り(要らない戻り値は無視できる)
function f() {
	return [1, 2, 3];
}
const [a, ,c] = f();
console.log(a); // 1
console.log(c); // 3

const array1 = [1, 4, 9, 16];
const map1 = array1.map(x => x * 2);

console.log(map1); // Array [2, 8, 18, 32]

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result); // Array ["exuberant", "destruction", "present"]

import {Fragment} from "react";
<Fragment></Fragment> // Fragmentを利用
<></> // Fragmentの省略記法
// 単なるdivで囲っても良い

import ReactDOM from "react-dom";

const App = () => {
	return(
		<>
			<h1>Text</h1>
		</>
	);
};

import ReactDOM from "react-dom";

const App = () => {
	return(
		<>
			{console.log("test")} // OK
			<h1>Text</h1>
		</>
	);
};

export const App = () => {
	return(
		<>
			<h1>Text</h1>
		</>
	);

}

import ReactDOM from "react-dom";
import { App } from "./App";
ReactDOM.render(<App />), document.getElementById("root");

export const MyComp = (props) => {
    console.log(props);
    // children: "child"
    // p1: "props1"
    // p2: "props2"
    return (
        <>
        <p>hello, {props.p1}, {props.p2}, {props.children}</p>
        </>
    );
};

import {MyComp} from "./components/MyComp";

export const App = () => {
  return (
    <>
		  <MyComp p1="props1" p2="props2">child</MyComp>
	  </>
  )
};

import { useState } from "react";
export const App = () => {
  const [count, setCount] = useState(0);
  // 0はnumの初期値、numは保持したい値、setNumはnumを変更するときに呼ぶ関数名
  
  return (
	  <>
		  <p>You clicked {count} times</p>
		  <button onClick={()=> setCount(count+1)}
		</>
  );
  
}

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

// コンテクストを使用すると、全てのコンポーネントを明示的に通すことなしに
// コンポーネントツリーの深くまで値を渡すことができます。
// 現在のテーマ（デフォルトは "light"）の為のコンテクストを作成します。
const ThemeContext = React.createContext('light'); // = テーマ変数を入れるための変数

class App extends React.Component {
  render() {
    // 以下のツリーへ現在のテーマを渡すためにプロバイダを使用します。
    // どんな深さでも、どのようなコンポーネントでも読み取ることができます。
    // このサンプルでは、"dark" を現在の値として渡しています。
    return (
      <ThemeContext.Provider value="dark"> // Providerで変数設定する
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

// 中間のコンポーネントはもう明示的にテーマを
// 下に渡す必要はありません。
function Toolbar() {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

class ThemedButton extends React.Component {
  // 現在のテーマのコンテクストを読むために、contextType に指定します。
  // React は上位の最も近いテーマプロバイダを見つけ、その値を使用します。
  // この例では、現在のテーマは "dark" です。
  static contextType = ThemeContext;
  render() {
    return <Button theme={this.context} />;
  }
}

const MyComponent = React.memo(function MyComponent(props) {
  /* render using props */
});

const memorizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
	[a, b],
)

const memorizedValue = useMemo(() => computeExpensiveValue(a+b), [a, b]);

import "./path/to/styles.css";

import "./path/to/styles.module.css";

npm install --save styled-jsx

export default () => (
  <>
    <p>Hello World!</p>
    <style jsx>{`
    p {
      color: red;
    }
    `}</style>
  </>
);

npm install styled-components

import styled from "styled-components";
const StyledDiv = styled.div`
  color: red;
`;

export const StyledComponents = () => {
	return (
		<StyledDiv>
			<p>Hello world</p>
		</StyledDiv>
	);
};