誰かが反応の世界に飛び込むしようとしているが、どのように物事を行う＆ブロックを打つ忘れている?

フレット私の友人は、今はもはや暗闇の中でつまずく必要があります!この記事はすべてのもののためのメモリエイド(機能的なコンポーネントのみに焦点を当て)です.

反応アプリの作成

反応アプリを作成するための完全なガイドが利用可能です.何か早くブートしたいなら、create-react-app 行く方法です.

// Initialize a new app
npx create-react-app my-app-name
OR
yarn create react-app my-app-name

// Run the app (default port is 3000)
cd my-app-name
npm start
OR
yarn start

反応コンポーネントをレンダリングする

import ReactDOM from "react-dom/client";
import App from "./App";
// ...
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

機能部品

const Component = () => {
  return <div>Hello World</div>;
};

前もって

大文字最初の文字

を返します

反応17以来、必要はありませんimport React from 'react'

コンポーネントのインポート

Components エクスポートすることができます＆他のファイルからインポート、このようにコードの分割と再利用性を促進する.
デフォルトエクスポート

function Component = () => 
    <div>Hello World</div>

export default Component

import Component from './Component'

function App = () => <Component />

エクスポート

export function Component = () => 
    <div>Hello World</div>

import { Component } from './Component'

function App = () => <Component />

怠惰な読み込み

function Component = () => 
    <div>Hello World</div>

export default Component

import { lazy, Suspense } from 'react'
const Component = lazy(() => import('./Component'))

function App = () => (
  <Suspense fallback={<div>Loading...</div>}>
    <Component />
  </Suspense>
)

JSXルール

1つの要素を返さなければなりません

const Component = () => {
  // INVALID: return <div>Hello</div><div>World</div>;
  return <div>Hello World</div>;
};

OR

const Component = () => {
  // `<React.Fragment>` can be replaced with just `<>`

  // On wrapping the children with any element,
  // you can create as many levels of nesting as you want
  return (
    <React.Fragment>
      <div>Hello</div>
      <div>World</div>
    </React.Fragment>
  );
};

2 .開始タグはクローズする必要があります(自己終了タグを使用することができます)。

const Component = () => {
  // INVALID: return <input>;
  return <input />;
};

HTML属性の代わりに属性を使用する

const Component = () => {
  // INVALID: return <div class="foo">Hello World</div>;
  return <div className="foo">Hello World</div>;
};

スタイリング

スタイリングを使用するにはcss-loader & style-loader あなたにwebpack.config.js 手動であなたの反応アプリを構築している場合.幸運にもcreate-react-app 事前にスタイルを有効にするように構成されています.

CSSインポート

/* app.css */
.redText {
  color: red;
}

import "./app.css";

function App() {
  return <h1 className="redText">
    Hello World
  </h1>;
}

インラインCSS

const Component = () => {
  return <div style={{ color: "red" }}>
    Hello World
  </div>;
};

CSSモジュール

/* app.css */
.redText {
  color: red;
}

import classes from "./app.css";

function App() {
  return <h1 className={classes.redText}>
    Hello World
  </h1>;
}

埋め込み

前もって

返り値を持つ式でなければなりません( JSXでもかまいません).

巻き括弧で包まれなければなりません{} )

const Component = () => {
  const isLoggedIn = true;
  return <div>
    {isLoggedIn ? "User is Authenticated" : <LogIn />}
  </div>;
};

コンポーネントのプロパティ

これらは、コンポーネントが初期化される値です.props 関数パラメータとして受け入れられます.

// no props
function App() {
  return <Person name="Mike" age={29} />;
}

// with props
const Person = (props) => {
  return (
    <h1>
      Name: {props.name}, Age: {props.age}
    </h1>
  );
};

// with destructured props
const Person = ({ name, age }) => {
  return (
    <h1>
      Name: {name} Age: {age}
    </h1>
  );
};

子供たち

children スペシャルprop コンポーネント内でレンダリングされるコンポーネントに渡されます.

const Component = ({ children }) => {
  return <div>{children}</div>;
};

const App = () => {
  return (
    <Component>
      <h1>Hello World</h1>
    </Component>
  );
};

デフォルト小道具

// JavaScript-ish syntax
const Component = ({ name = "Mike" }) => {
  return <div> {name} </div>;
};

OR

// React-ish syntax
const Component = ({ name }) => {
  return <div> {name} </div>;
};

Component.defaultProps = {
  name: "Mike",
};

リスト

const people = [
  { id: 1, name: "Mike" },
  { id: 2, name: "Peter" },
  { id: 3, name: "John" },
];

function App() {
  return people.map((person) => (
    <div key={person.id}>{person.name}</div>;
  ));
}

The key オプションprop すべての要素で利用可能で、それはどの要素が変化したかを追跡するために、反応によって内部的に使用されます.リストについては、key .

支柱破壊

Person を受け入れるコンポーネントですname プロップ

function App() {
  return people.map(({id, ...person}) => (
    <Person key={id} {...person} />;
  ));
}

イベント

const clickHandler = () => alert("Hello World");

function App() {
  return (
    <>
      <h1>Welcome to my app</h1>
      <button onClick={clickHandler}>
        Say Hi
      </button>
    </>
  );
}

またはインライン.

function App() {
  return (
    <>
      <h1>Welcome to my app</h1>
      <button onClick={() => alert("Hello World")}>
        Say Hi
      </button>
    </>
  );
}

ハンドラに引数を渡すこともできます

const clickHandler = (message) => alert(message);
function App() {
  return (
    <>
      <h1>Welcome to my app</h1>
      <button onClick={() => clickHandler("Hello World")}>
        Say Hi
      </button>
    </>
  );
}

既定のイベントは、イベントオブジェクトを最初の引数として渡します.

const clickHandler = (event) => console.log(event.target);
function App() {
  return (
    <>
      <h1>Welcome to my app</h1>
      <button onClick={clickHandler}>
        Say Hi
      </button>
    </>
  );
}

親からハンドラを渡して子の中で実行することもできます

function Todo({item, onDelete}) {
    return (
      <div>
        {item}
        <button onClick={() => onDelete(item)} />
      </div>
    )
}

function Todos() {
  const handleDelete = (todo) => {
    const newTodos = todos.filter(item => item !== todo)
    setTodos(() => newTodos)
  }

  return (
    {todos.map((todo) => (
       <Todo item={todo} onDelete={handleDelete}/>
    ))}
  )
}

フック

フックは、“フック”機能のコンポーネントからライフサイクルの機能を反応させる機能です.
前もって

フックは常に' use '接頭辞から始まります

反応機能成分だけで起動されなければなりません

機能コンポーネントの最上位レベルでのみ呼び出される必要があります

宣言は条件付きではない

米国不動産

useState 機能コンポーネントで状態を管理できるフックです.

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

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

効果

useEffect 関数コンポーネント内のライフサイクルメソッドにアクセスできるフックです.

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

  useEffect(() => {
    console.log("Initialized");
    // clean up function runs before the component is unmounted
    return () => {
      console.log("Cleaned up");
    };
  }, []); // empty array: run during mount only

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]); // array with count: run everytime `count` changes

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

テキスト

useContext は指定したcontext (反応する船)

const ThemeContext = createContext("light");

function App() {
  return (
    <ThemeContext.Provider value="light">
      <Component />
    </ThemeContext.Provider>
  );
}

function Component() {
  const theme = useContext(ThemeContext); // returns 'light'
  return (
    <div>
      <p>The current theme is: {theme}</p>
    </div>
  );
}

使用者

useReducer は機能的なコンポーネントで状態を管理できるフックですuseState これはreduxパターンを使用して

function App() {
  const [count, dispatch] = useReducer((state, action) => {
    switch (action) {
      case "increment":
        return state + 1;
      case "decrement":
        return state - 1;
      default:
        throw new Error();
    }
  }, 0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => dispatch("increment")}>
        +
      </button>
      <button onClick={() => dispatch("decrement")}>
        -
      </button>
    </div>
  );
}

USERALLBACK

The useCallback フックは、パフォーマンスを最適化する唯一の目的で、コールバックのmemoizedされたバージョンを返します.

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

  const increment = useCallback(() => 
        setCount((c) => c + 1), []);

  return (
    <div>
      <p>{count}</p>
      <button onClick={increment}>+</button>
    </div>
  );
}

USememo

The useMemo フックはコールバックによって生成された値の記念版を返します.まさにuseCallback , useMemo パフォーマンス最適化フックです.

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

  const memoizedIncrement = useMemo(() => {
    return () => setCount((c) => c + 1);
  }, []);

  return (
    <div>
      <p>{count}</p>
      <button onClick={memoizedIncrement}>+</button>
    </div>
  );
}

ユーザー

The useRef フックが返すmutable ref object 誰.current プロパティは渡された引数に初期化されます(initialValue ). 返されるオブジェクトは、手動で変更されない限り、コンポーネントの完全な有効期間を持続します.

function App() {
  const inputRef = useRef(null);
  const onButtonClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={onButtonClick}>
        Focus on the input
      </button>
    </div>
  );
}

利用変遷

The useTransition フックでは、遷移としてマークしない緊急アクションをすることができます.

function App() {
  const [input, setInput] = useState("");
  const [data, setData] = useState([...items]);
  const [isPending, startTransition] = useTransition();

  useEffect(() => {
    // input change is prioritized over filtering a long list
    startTransition(() => {
      setData(items.filter((i) => i.includes(input)));
    });
  }, [input]);

  const updateInput = (e) => setInput(e.target.value);

  return (
    <div>
      <input value={input} onChange={updateInput} />
      <ul>
        {data.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

使用法

The useDeferredValue フックは、ページの他の部分を遅くしないように意図的に値を更新することができます

function App() {
  const deferredValue = useDeferredValue(value);
  return <MyComponent value={deferredValue} />;
}

それはすべての人々です!私が何かを逃したと思うならば、コメントで彼らを加えてください👇
ハッピー開発!

読書ありがとう

あなたの開発苦悩を切り刻むためにトップ定格フロントエンド開発フリーランサーが必要ですか?私に連絡Upwork
私が何をやっているか見たいですか?チェックアウトマイPersonal Website and GitHub
接続したいですか?私に手を差し伸べる
私は2022年半ばにデジタル遊牧民としてスタートするフリーランサーです.したい旅をキャッチするには?フォローミーオン
私のブログに従ってください
よくある質問
これらは私が得るいくつかの一般的な質問です.それで、このFAQセクションがあなたの問題を解決することを望みます.

私は初心者です、どのようにフロントエンドのWeb devを学ぶ必要がありますか?
次の記事を見てください.