A-Level. React. Advanced.

React. Advanced.

Теми

  1. JSX
  2. Router

Умовний рендериіг.

Рендеримо компонент за умовою або не рендеримо взагалі.

                const Greeting = ({ isAuth }) => {
                  return isAuth
                    ? <UserGreeting />
                    : <GuestGreeting />
                }
                const Greeting = ({ isAuth }) =>
                  isAuth ? <UserGreeting /> : null;
            
                // JSX
                (
                  ...
                  {isAuth && <UserGreeting />}
                  ...
                )

Списки та ключі.

key допомагає React визначити, які елементи були змінені, додані або видалені

            const content = tasks.map((task) =>
              <Task
                key={task.id}
                id={task.id}
                title={task.title} />
            );

Фрагменти

Повернення кількох елементів із компонента є поширеною практикою в React. Фрагменти дозволяють формувати список дочірніх елементів, не створюючи зайвих вузлів у DOM.
key — це єдиний атрибут, дозволений у Fragment 

                <React.Fragment>
                  <ChildA />
                  <ChildB />
                </React.Fragment>
            
                <>
                  <ChildA />
                  <ChildB />
                </>

dangerouslySetInnerHTML

dangerouslySetInnerHTML аналог innerHTML у DOM браузера. Як правило, вставка HTML із коду є ризикованою, оскільки можна випадково наражати користувачів на XSS-атаку. Але якщо дуже потрібно й ми впевнені в безпеці цього коду, то можна так: 

            <p dangerouslySetInnerHTML={{ __html: '© Copyright' }}/>

Функції як дочірні компоненти

props.children працює так само, як і будь-який інший проп, тому в нього можна передавати будь-які типи даних.

Ми можемо передати колбек у props.children, але за умови, що компонент перетворить їх на щось, що React зможе зрозуміти та відрендерити. 

            const Repeat = ({ numTimes, children }) => {
              let items = [];
              for (let i = 0; i < numTimes; i++) {
                items.push(children(i));
              }
              return <ul>{items}</ul>
            }
            const ListOfTenThings = () => (
              <Repeat numTimes={10}>
                {(index) => <li key={index}>Цей ед=лемент списку з ключем {index}</li>}
              </Repeat>
            );

Render Props

Дозволяє:
  1. Відокремити представлення від логіки
  2. Дістатися до стану дочірнього компонента
            const Child = (props) => {
              return props.children('Value from children');
            };
            const Parent = () => (
              <Child>{(item) => <span>{item}</span>}</Child>
            );

Розбиття коду

React.lazy - дозволяє рендерити динамічний імпорт як звичайний компонент. Результатом є модуль, який експортує за замовчуванням React-компонент (export default). 

            const OtherComponent = React.lazy(() => import('./OtherComponent'));

Suspense

Компонент з лінивим завантаженням (lazy) повинен рендеритись всередині компонента Suspense, який дозволяє показати резервний контент, поки відбувається завантаження лінивого компонента.

Suspense

            const OtherComponent = React.lazy(() => import('./OtherComponent'));
             
            const MyComponent = () => {
              return (
                <Suspense fallback={<div>Loading...</div>}>
                  <OtherComponent />
                </Suspense>
              );
            }

Розділення коді та Router.

            <Suspense fallback={<>Loading...<:/>}>
              <Routes>
                ...
              <Routes>
            <Suspense>

Task 1.

  1. Зробити route на який можно потрапити тільки авторизованним користувачам
  2. Дороблюжмо ToDo.
  3. Визначаємося і починаємо диплом

Links