これから始めるReact入門。とりあえずこれだけでOK！

npm create vite@latest プロジェクト名 -- --template react

npm create vite@latest プロジェクト名 -- --template react-ts

 <script type="module" src="/src/main.jsx"></script>

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>
)

  <StrictMode>
    <App />
  </StrictMode>

import './index.css'

import App from './App.jsx'

  // Appコンポーネント
function App() {

}

export default App

npm run dev

➜  Local:   http://localhost:5174/

function App() {
  const title = <p>タイトル</p>
  const paragraph = (text)=><p>{text}</p>

  const paragraphs = <div>
    {title}
    {paragraph("文字列１")}
    {paragraph("文字列２")}
  </div>

  return paragraphs;
}

function App() {
  return <p>段落１<br/>段落２<br/>段落３</p>;
}

function App() {
  return  // 段落を返す
    <p>段落１<br/>
    段落２<br/>
    段落３</p>
}

function App() {
  return ( // 段落を返す
    <p>段落１<br/>
    段落２<br/>
    段落３</p>
  );
}

function App() {
  return (<>
    <p>HTMタグ</p>
    <P/>
  </>);
}
function P(){
  return <p>コンポーネント</p>
}

function App() {

  return (
  <div className="red bold">
    <p>クラス指定</p>
  </div>
  );
}

function App() {
  const className = "red bold";

  return (
    <div className={className}>
      <p>クラス指定</p>
    </div>
  );
}

function App() {

  const style = {
    color:"blue",
    fontWeight:"bold"
  };

  return (
  <div style={ style } >
    <p>スタイル指定</p>
  </div>
  );
}

<div style={ {
    color:"blue",
    fontWeight:"bold"
  } } >

function App() {
  return (
  <div id="id1" data-id="id1" data-name="div1">
    <p>その他の属性の設定方法</p>
  </div>
  );
}

function App() {
  const clickHandler = (e) => {
    alert(`${e.target.id}がクリックされました！`);
  };
  return <button id="button1" onClick={clickHandler}>クリック！</button>
}

import { useState } from "react";

  // Appコンポーネント
function App() {
  const clickHandler = (e) => {
    alert(`${e.target.id}がクリックされました！`);
  };

  return <MyButton id="id1" clickHandler={clickHandler} title="click!" />;
}
  // MyButtonコンポーネント
function MyButton(props) {
  return <button id={props.id} onClick={props.clickHandler}>{props.title}</button>
}
export default App

<MyButton id="id1" clickHandler={clickHandler} title="click!" />

{
  id: "id1",
  clickHandler: function(){},
  title: "click!"
}

  // MyButtonコンポーネント
function MyButton( { id, clickHandler, title }) {
  return <button id={id} onClick={clickHandler}>{title}</button>
}

function MyApp(props){
  return <OthetApp {...props} />; // propsを展開して渡す
}

function MyApp(){
  return (<>
    <MyButton id="id1" clickHandler={clickHandler} title="click!" />
    <MyButton id="id2" clickHandler={clickHandler} title="click!!" />
    <MyButton id="id3" clickHandler={clickHandler} title="click!!!" />
    </>)
}

  return [
    <div key="key1" ></div>,
    <div key="key2" ></div>,
    <div key="key3" ></div>,
  ]

function MyApp({show}){
  if( !show ) return null;
  return <p>表示されました</p>
}

function App() {
  // 変数showに関するコード
   ・・・・・

  return (
    {!show && MyApp() }
  );
}

import { useState } from "react";

// Appコンポーネント
function App() {
  const [count, setCount] = useState(0); // 1 , 4

  const clickHandler = () => {
    setCount(count+1); // 2
  };
  return <button id="button1" onClick={clickHandler}>クリック！({count})</button>
}

export default App

const [count, setCount] = useState(0);
if( flg ){
    const [count2, setCount2] = useState(0);
}
const [count3, setCount3] = useState(0);

const [count, setCount] = useState(0);
const [count2, setCount2] = useState(0);
const [count3, setCount3] = useState(0);
if( flg ){
  ...
}

state.a = 2; // stateとsetStateが管理している現在値は同じもの
setState(state); // 同じものを比較するので、更新されていないと判断

setState( { ...state } ); // プロパティを変更していなくても、更新されたと判断

import { useState } from "react";

// Appコンポーネント
function App() {
  const [value, setValue] = useState("");

  const handleChange = (e) => {
    setValue(e.target.value.toUpperCase());
  };

  return (
    <input value={value} onChange={handleChange} />
  );
}

export default App

function App() {
 const [flg, setFlg] = useState(true);
  const text = flg ? "True" : "False";
  return (<>
    <p>{ text }</p>
    <button onClick={() => setFlg(!flg)}>Click!!</button>
  </>);
}

import { useState } from "react";

// Appコンポーネント
function App() {
  const [count, setCount] = useState(0);

  return (<>
    <P1 count={count} />
    <Button1 count={count} setCount={setCount} />
  </>);
}
function Button1({ count, setCount }) {
  const clickHandler = () => { setCount(count + 1); };
  return <button onClick={clickHandler}>Click!!({count})</button>
}
function P1({ count }) {
  return <p>{count}回目</p>
}
export default App

// Appコンポーネント
function App() {
  const [count,setCount] = useState(1);
   // 増加用関数
  const countUp = () => setCount( c => c + 1 );

  return (<>
    <p>{count}</p>
    <button onClick={()=>{
      countUp();
    }}>1 UP</button>
    <button onClick={()=>{
      countUp();
      countUp();
    }}>2 UP</button>
  </>);
};

function App() {
  const count = useRef(0);
  // count.current++; ← NG!!

  const clickHandler = () => {
    count.current++;
    console.log(`${count.current}回目`);
  };
  return <button onClick={clickHandler}>クリック！</button>
}

class Counter{
  #current;
  constructor(){
    this.#current = 0;
  }
  click(){
    this.#current++;
    console.log(`${this.#current}回目`);
  }
}
// Appコンポーネント
function App() {
  const count = useRef(new Counter()) // 毎回Counterインスタンスを生成

// Appコンポーネント
function App() {
  const count = useRef(null);
  if( count.current === null ){ // 初期値===nullなので、初回のみ真判定
                                // この判定内では更新可能
    count.current = new Counter();
  }
  const clickHandler = () => {
    count.current.click();
  };
  return <button onClick={clickHandler}>クリック！</button>
}

function App() {
  const [text,setText] = useState("A");
  const pTag = useRef(null);

  const clickHandler = () => {
    const clientWidth = pTag.current.clientWidth;
    console.log( `現在の幅 ${clientWidth}` );
    setText( text + "A");
  };
  return (<>
    <p ref={pTag}>{text}</p>
    <button onClick={clickHandler}>クリック！</button>
  </>)
}

// Appコンポーネント
function App() {
  const pTag = useRef(null);

  const clickHandler = () => {
    pTag.current.innerHTML += "A"; // NG:実DOMの内容を直接変更
  };
  return (<>
    <p ref={pTag}>A</p>
    <button onClick={clickHandler}>クリック！</button>
  </>)
}

// Appコンポーネント
function App() {
  const [pTag,setPTag] = useState("A");

  const clickHandler = () => {
    setPTag(pTag + "A");
  };
  return (<>
    <p>{pTag}</p>
    <button onClick={clickHandler}>クリック！</button>
  </>)
}

// Appコンポーネント
function App() {
  const [text,setText] = useState("A");
  const pTag = useRef(null);

  const clickHandler = () => {
    const clientWidth = pTag.current.clientWidth;
    console.log( `現在の幅 ${clientWidth}` );
    setText( text + "A");
  };
   // refをコンポーネントへ渡す
  return <MyComponent ref={pTag} onClick={clickHandler} text={text} />
}
// MyComponentコンポーネント
function MyComponent({ ref , onClick , text }){
   // 親から受け取ったrefをpタグにセット
  return (<>
    <p ref={ref}>{text}</p>
    <button onClick={onClick}>クリック！</button>
  </>)
}

function MyComponent({ ref , onClick , text }){
  return (<div ref={ref}>
    <p >{text}</p>
    <button onClick={onClick}>クリック！</button>
  </div>)
}

import { useRef, useState, useMemo } from "react";

// Appコンポーネント
function App() {
  const [textCount, setTextCount] = useState(1);
  const clickCount = useRef(0);
  const text = useMemo(() => "A".repeat(textCount), [textCount]);

  const clickHandler = () => {
    if (clickCount.current < 2) {
      clickCount.current++;
      return;
    }
    clickCount.current = 0;
    setTextCount(textCount + 1);
  }
  return (<>
    <p>{text}</p>
    <button onClick={clickHandler}>Click!!</button>
  </>);
};

function App({value1,value2}) {
  const valueObj =  { value1,value2 };
     // 毎回、時間がかかる関数()を実行
  const result = useMemo(() => 時間がかかる関数(valueObj), [valueObj]);

function App({value1,value2}) {
  const valueObj = useMemo( ()=>( { value1,value2 } ) , [value1,value2] );

  const result = useMemo(() => 時間がかかる関数(valueObj), [valueObj]);

import {  useState, useMemo ,memo} from "react";

  // コンポーネントのメモ化
const UlList = memo( function({texts}) {
  const liItem = texts.map( (text,index)=><li key={index}>{text}</li> );
  return (<ul>
    {liItem}
  </ul>);
});

// Appコンポーネント
function App() {
  const [count,setCount] = useState(1);
  const texts = useMemo( // オブジェクト（配列）の安定化
    ()=>Array.from( {length:count} , (v,index)=>(index+1).toString() ) ,
     [count]
  );

  const clickHandler = () => {
    setCount(count + 1);
  }
  return (<>
    <UlList texts={texts} />
    <button onClick={clickHandler}>Click!!</button>
  </>);
};

import {  useState, useMemo ,memo, useCallback} from "react";

  // コンポーネントのメモ化
const UlList = memo(function({texts,clickHandler}) {
  const liItem = texts.map( (text,index)=><li key={index}>{text}</li> );
  console.log( "関数が呼ばれた！" );
  return (<ul>
    {liItem}
    <button onClick={clickHandler}>Click!!</button>
  </ul>);
});

// Appコンポーネント
function App() {
  const [count,setCount] = useState(1);
 
  const texts = useMemo( 
    ()=>Array.from( {length:count} , (v,index)=>(index+1).toString() ) ,
     [count]
  );

  const clickHandler = useCallback( () => {
    setCount(count + 1);
  },[count]);

  return (<>
    <UlList texts={texts} clickHandler={clickHandler} />
  </>);
};

// Appコンポーネント
function App() {
  const [openFlg,setOpenFlg] = useState(false);

  return (<>
    { openFlg && <WindowOpen /> }
    <button onClick={
      ()=>setOpenFlg(!openFlg)
    } >{openFlg ? "閉じる" : "開く" }</button>
  </>);
};

function WindowOpen(){
  useEffect( ()=>{
    const targetWindow = window.open("", "_blank");
    window.focus();
    return ()=>{
      targetWindow.close();
    };
  },[]);
  return <p>新規Window表示中</p>;
}

function App() {

  useEffect( ()=>{
    const status = document.getElementById("status");
    status.innerText = "アプリ実行中";
  },[]);

};

function App() {

  const [count,setCount] = useState(0);
  useEffect( ()=>{
      setCount( count + 1 );
  },[count]);

};

  useEffect( ()=>{
      setCount( count + 1 );
  },[]);

import { createContext } from "react";

export const MyContext = createContext("テスト");

import { MyContext } from "./mycontext";
import ContextChild from "./contextchild";

// Appコンポーネント
function App() {
  const text = "コンテクストのテスト";
  return (
    <MyContext value={text}>
      <ContextChild />
    </MyContext>
  );

};

export default App

import { useContext } from "react";
import { MyContext } from "./mycontext";

function ContextChild(){
    const text = useContext(MyContext);
    return <p>{text}</p>
}

export default ContextChild;

import { createContext } from "react";

export const MyState = createContext(null);

import { useState } from "react";
import { MyState } from "./mystate";
import ContextChild from "./contextchild";

// Appコンポーネント
function App() {
  const [count, setCount] = useState(0);
  return (
    <MyState value={{count,setCount}}>
      <p>{count}回クリックしました。</p>
      <ContextChild />
    </MyState>
  );

};
export default App

import { useContext } from "react";
import { MyState } from "./mystate";

function ContextChild() {
    const { count, setCount } = useContext(MyState);
    return (
        <button onClick={() => setCount(count + 1)}>
            click!!
        </button>
    );
}

export default ContextChild;

import { useState } from "react";

// Appコンポーネント
function App() {
  const [flg, setFlg] = useState(true);
  const clickHandler = () => { setFlg(!flg); };
  const p = flg ? <P1 /> : <P2 />;
  return (<>
    {p}
    <button onClick={clickHandler}>Change!!</button>
  </>);
}
// P1コンポーネント
function P1() {
  const [count, setCount] = useState(0);
  const clickHandler = () => { setCount(count + 1); };
  return (<>
    <p>段落1({count})</p>
    <button onClick={clickHandler}>Click!!</button>
  </>)
}
// P2コンポーネント
function P2() {
  const [count, setCount] = useState(0);
  const clickHandler = () => { setCount(count + 1); };
  return (<>
    <p>段落2({count})</p>
    <button onClick={clickHandler}>Click!!</button>
  </>)
}
export default App