7

Предисловие

Оригинальный вопрос-ответ: How do I create a React Stack Snippet with JSX support?

В последнее время стал чаще замечать как вопрошающие показывают свой код на React, а потом отдельными скриншотами или дополнительными кусками кода показывают результат работы их кода и какая у них проблема или ещё хуже оставляют ссылки на сторонние ресурсы, куда отвечающие должны переходить чтобы запустить код и смотреть на результат выполнения. Тоже самое делают и отвечающие, оставляют кусок кода и ссылку на сторонный источник, куда вопрошающий должен перейти, запустить и убедиться, что его проблема решена. Кроме того уже были обсуждения, почему ответы ссылки - это плохо. Чего греха таить, я сам так делал, пока не надоело :) Ну и как вы понимаете в поисках информации я наткнулся на указанный выше вопрос-ответ. Не найдя ответа на этот вопрос в русской мете, решил поделиться своим переводом

Прошу принять тот факт, что это не будет 100%-ым переводом слово в слово. Будут дополнения к тексту, небольшие изменения содержания, а некоторые части могут быть полностью вырезаны. Можете считать что это основано на оригинальном вопрос-ответе, а не является его полной копией на русском языке :)

И так начнём:

Вопрос

В редакторе "Фрагмент кода" есть возможность включения библиотеки React, но как на самом деле создать "Фрагмент кода", где можно писать React код с поддержкой JSX?

1 ответ 1

10

Это пошаговое руководство, сначала будет краткое содержание, затем подробности с картинками. После подробных инструкций будет несколько "Фрагмент кода" (далее ФК) для демонстрации

Краткое содержание

  1. Откройте редактирование ФК редактора нажав на Иконка ФК кнопку на панели инструментов или вместо этого можете нажать комбинацию CTRL + M

  2. Выберите нужную версию React из раскрывающегося списка слева

    Если вы не видите нужную версию в списке, то смотрите подробности ниже. Так же прошу заметить, что для использования хуков вам нужна версия React не ниже 16.8. На данный момент (май 2022) последняя версия в списке - это 16.6.3

  3. Установите флажок на Use BabelJS / ES2015

    Об этом явно не говорится, но - это именно то, что позволяет использовать синтаксис JSX, т.к. используемая конфигурация Babel включает обработку JSX

    К сожалению, версию Babel, которая используется, не обновляли годами, поэтому не поддерживаются сокращенные фрагменты (<></>) и async / await. Вы можете включить их, если они нужны, просто это будет неудобно

    Обсуждения на тему "Почему не обновляют верисю Babel" можете прочитать на английском SO тут и тут

  4. Если вы НЕ собираетесь использовать консоль в ФК, то самое время снять флажок с Показать консоль

  5. Если вам нужны дополнительные библиотеки, то используйте кнопку Добавить внешнюю библиотеку (или просто теги script и link)

  6. Добавьте свой код в секцию JavaScript

  7. Если вы используете хуки, вы можете либо использовать их непосредственно из React (React.useState и т.д.), либо использовать деструктуризацию в начале (так вы получите более приближенный к import-у вариант):

    const {useState} = React;
    
  8. В конце вашего кода напишите вызов ReactDOM.render, сообщающий, что отображать и где

    Если вы используете вывод в консоль, то убедитесь что в секции HTML объявлен элемент и выбран этот элемент при вызове ReactDOM.render. Если нет, то вы можете рендерить прямо в body, если хотите. (При визуализации в body не работает вывод в консоль потому что элемент консоли перезаписывается)

  9. Вы готовы запустить свой React/JSX код! Нажмите на кнопку Запустить

    Обратите внимание, что может быть небольшая задержка при загрузке скриптов и транспиляции JSX, прежде чем ваши результаты появятся в секции Результат. Как и в случае с любым фрагментом кода, убедитесь, что он работает так, как вы хотите (проверьте веб-консоль, если вы не используете консоль в ФК), и показывает то, что вы хотите продемонстрировать (вашу конкретную проблему, если вы задаёте вопрос, а если если публикуете ответ то вопрос или решение)

Подробное содержание

  1. Откройте редактирование ФК редактора нажав на Иконка ФК кнопку на панели инструментов или вместо этого можете нажать комбинацию CTRL + M введите сюда описание изображения

  2. Выберите нужную версию React открыв раскрывающееся меню слева:

    Расположение кнопки для выбора версии React

    и нажав на нужную версию из списка:

    Выбор нужной версии React

    После выбора нужной версии React (для примера была выбрана версия 16.6.3) вы увидете следующие 2 строчки:

     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
    

    в секции HTML:

    Скрипты после подключения React

    Чтобы использовать хуки и тому подобное, вам понадобятся более поздние версии React. Вы можете подключить последнюю версию из CDN (например: https://cdnjs.com/). Используйте версии "UMD". Например, чтобы использовать версию x.y.z надо просто заменить 16.6.3 на нужную и доступную вам (для примера показана 18.1.0):

     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>
    

    в секции HTML:

    Скрипты после изменения версии React

    Обратите внимание, что после выбора версии, не доступной в выпадающем списке, исчезает надпись с кнопки открывающий этот список:

    На кнопке раскрывающий список версий React отсутсвует надпись

    но не бойтесь - это нормально, всё будет работать корректно, если вы выбрали доступную версию

  3. Установите флажок на Use BabelJS / ES2015 Расположение включателя/выключателся встроенного Babel

    Об этом явно не говорится, но - это именно то, что позволяет использовать синтаксис JSX, т.к. используемая конфигурация Babel включает обработку JSX

    К сожалению, версию Babel, которая используется, не обновляли годами, поэтому некоторые фичи не доступны. Например:

    • не поддерживаются сокращенные фрагменты (<></>), но это легко решается заменой сокращенного синткасиса на развёрнутый (<React.Fragment></React.Fragment>):

      Меняем такой синтаксис:

      <>
      // Ваш код
      </>
      

      на такой:

      <React.Fragment>
      // Ваш код
      </React.Fragment>
      
    • не поддерживется синтаксис async / await. Тут к сожалению придётся переписать на синтаксис .then().catch():

      Меняем такой синтаксис:

      const func = async () => {
          try {
            const response = await fetch(/*url and data*/);
            /*Your code*/
          } catch(e) {
            console.log(e.message);  
          }
      }
      

      на такой:

      const func = () => {
         fetch(/*url and data*/)
         .then(response => {
           /*Your code*/
         })
         .catch(e => {
            console.log(e.message);
         })
      }
      

    Ну и дальше так вверх по цепочке пока ваш код не будет выглядеть как синхронный код

    На самом деле я нашёл небольшой лайфхак, как обойти все ограничения встроенного Babel и писать код со всеми фичами :) Но об этом я расскажу в самом конце после примеров т.к. этот лайфхак никак не помогает писать более современный код в секции JavaScript

  4. Если вы НЕ собираетесь использовать консоль в ФК, то самое время снять флажок с Показать консоль

    Расположение включателя/выключателся встроенной консоли

  5. Если вам нужны дополнительные библиотеки, то используйте кнопку Добавить внешнюю библиотеку (или просто теги script и link) Расположение кнопки добавления дополнительных библиотек

    После нажатия откроется диалоговое окно куда нужно будет вставить ссылку

    Диалоговое окно для вставки ссылки на внешние ресурсы

    Конечно, можно и без этой кнопки, вручную прописывать теги script или link, но в случае с кнопкой вам просто надо вставить ссылку и он сам автоматически поймёт какой тег надо использовать

  6. Добавьте свой код в нужные секции введите сюда описание изображения

  7. Если вы используете хуки, вы можете либо использовать их непосредственно из React (React.useState и т.д.):

    const [s, setX] = React.useState();
    

    либо использовать деструктуризацию в начале (так вы получите более приближенный к import-у вариант) и потом использовать в любом месте кода:

    const {useState} = React;
    /*Some code*/
    const [s, setX] = useState();
    

    Более подробные примеры, с использованием хуков, будут ниже

  8. В конце вашего кода напишите вызов ReactDOM.render, сообщающий, что отображать и где

    • Если вы используете вывод в консоль, то убедитесь что в секции HTML объявлен элемент и выбран этот элемент при вызове ReactDOM.render. К примеру так:

      HTML:

       <!-- Some code -->
       <div id="react"></div>
       <!-- Some code -->
      

      JS:

       /* Some code */
       /* At the end of code */
       const {createRoot} = ReactDOM;
       const rootContainer = document.querySelector('#react');
      
       if (rootContainer === null) throw new Error('There is no root container');
      
       const root = createRoot(rootContainer);
      
       root.render(<App />);
      
    • Если нет, то вы можете рендерить прямо в body, если хотите. (При визуализации в body не работает вывод в консоль потому что элемент консоли перезаписывается):

      HTML:

       <!-- Some code -->
      

      JS:

       /* Some code */
       /* At the end of code */
       const {createRoot} = ReactDOM;
       const rootContainer = document.body;
      
       if (rootContainer === null) throw new Error('There is no root container');
      
       const root = createRoot(rootContainer);
      
       root.render(<App />);
      
  9. Вы готовы запустить свой React/JSX код! Нажмите на кнопку Запустить

    Обратите внимание, что может быть небольшая задержка при загрузке скриптов и транспиляции JSX, прежде чем ваши результаты появятся в секции Результат. Как и в случае с любым фрагментом кода, убедитесь, что он работает так, как вы хотите (проверьте веб-консоль, если вы не используете консоль в ФК), и показывает то, что вы хотите продемонстрировать (вашу конкретную проблему, если вы задаёте вопрос, а если если публикуете ответ то вопрос или решение)

Примеры

Пример кода, с рендерингом в конкретный элемент и с выводом в консоль

const {createRoot} = ReactDOM;

// Пример функционального компонента
const RedText = ({text}) => {
  console.log('Functional component');

  return <span class="red-text">{text}</span>
}

// Пример классового компонента
class App extends React.Component {
  render() {
    console.log('Class component');

    return (
      <div>
        <RedText text="Some text 1" />
        <br/>
        <RedText text="Some text 2" />
      </div>
    );
  }
}

// Рендеринг
const rootContainer = document.querySelector('#react');

if (rootContainer === null) throw new Error('There is no root container');

const root = createRoot(rootContainer);

root.render(<App />);
.red-text {
  color: red;
}
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>

Пример кода, с рендерингом в элемент body (вывод в консоль не покажется)

const {createRoot} = ReactDOM;

// Пример функционального компонента
const RedText = ({text}) => {
  console.log('Functional component');

  return <span class="red-text">{text}</span>
}

// Пример классового компонента
class App extends React.Component {
  render() {
    console.log('Class component');

    return (
      <div>
        <RedText text="Some text 1" />
        <br/>
        <RedText text="Some text 2" />
      </div>
    );
  }
}

// Рендеринг
const rootContainer = document.body;

if (rootContainer === null) throw new Error('There is no root container');

const root = createRoot(rootContainer);

root.render(<App />);
.red-text {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>

Пример кода, с использованием хуков, фрагмента и с выводом в консоль

const {createRoot} = ReactDOM;
const {useState} = React;

// Пример функционального компонента
const Counter = ({initialValue}) => {
  const [count, setCount] = useState(initialValue);
  
  React.useEffect(() => {
    console.log(`(Render) initialValue was ${initialValue}`);
  })

  return <button onClick={() => setCount(count + 1)}>You clicked me {count} time(s)</button>
}

// Пример классового компонента
class App extends React.Component {
  render() {
    return (
      <React.Fragment>
        <Counter initialValue={0} />
        <br/>
        <Counter initialValue={1} />
      </React.Fragment>
    );
  }
}

// Рендеринг
const rootContainer = document.querySelector('#react');

if (rootContainer === null) throw new Error('There is no root container');

const root = createRoot(rootContainer);

root.render(<App />);
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>

Пример кода, с использованием дополнительной библиотеки React-Bootstrap (пример из документации использованый ниже)

const {createRoot} = ReactDOM;
const {Col, Row, Button} = ReactBootstrap;

// Пример функционального компонента
const ExternalLibrary = () => {
  return (
    <Row className="mx-0">
      <Button as={Col} variant="primary">Button #1</Button>
      <Button as={Col} variant="secondary" className="mx-2">Button #2</Button>
      <Button as={Col} variant="success">Button #3</Button>
    </Row>
  )
}

// Пример классового компонента
class App extends React.Component {
  render() {
    return (
      <ExternalLibrary />
    );
  }
}

// Рендеринг
const rootContainer = document.querySelector('#react');

if (rootContainer === null) throw new Error('There is no root container');

const root = createRoot(rootContainer);

root.render(<App />);
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
  crossorigin="anonymous"
/>

<div id="react"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin></script>

Вишенка на тортике :)

Если ну уж очень сильно хочется писать на современном синтаксисе React (с поддержкой async / await, сокращённого синтаксиса фрагментов (<></>) и т.д.), то это легко можно устроить, если писать JS код в HTML секции.

Шаги

  1. После подключения нужной версии React, надо добавить скрипт со ссылкой на нужную и доступную версию Babel

     <script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
    
  2. Ниже всего лишь надо добавить тег script с аттрибутом type со значением "text/babel" и вписать туда свой код. Даже не надо ставить галочку на Use BabelJS / ES2015

     <script type="text/babel">
     /* Some code*/
     </script>
    
  3. Не забываем инструкции по выводу данных в консоль, подробно описанных в 8-ом пункте :)

Единнственный минус, что я заметил - это то что когда указывается аттрибут type="text/babel", то редактор начинает показывать JS код как обычный текст, т.е. без подсветки, и если нажать на кнопку Привести в порядок, то редактор весь код превратит в одну строчку. Потому во время разработки надо убрать этот аттрибут, а перед запуском обратно вставить. Главное после публикации кода подсветка вернётся назад и удобно будет читать. Немного неудобно возиться постоянно удалением и добавлением аттрибута, но зато спокойно можно писать на современном синтаксисе React

Пример кода, с поддержкой современного синтаксиса React в HTML секции

<div id="react"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>

<script src="https://unpkg.com/@babel/standalone@7/babel.min.js"></script>
<script type="text/babel">
const {useState} = React;
const {createRoot} = ReactDOM;

// Пример функционального компонента
const Counter = ({initialValue}) => {
  const [count, setCount] = useState(initialValue);
  
  React.useEffect(() => {
    console.log(`(Render) initialValue was ${initialValue}`);
  })
  
  React.useEffect(async () => {
    try {
      const response = await fetch('https://rickandmortyapi.com/api/character/1')
      
      if (response.ok) {
        const data = await response.json();
        
        console.log(data);
      } else {
        console.log("Can't get data");
      }
    } catch (e) {
      console.log(e);
    }
  }, [])

  return <button onClick={() => setCount(count + 1)}>You clicked me {count} time(s)</button>
}

// Пример классового компонента
class App extends React.Component {
  render() {
    return (
      <>
        <Counter initialValue={0} />
      </>
    );
  }
}

// Рендеринг
const rootContainer = document.querySelector('#react');

if (rootContainer === null) throw new Error('There is no root container');

const root = createRoot(rootContainer);

root.render(<App />);
</script>

Войдите, чтобы ответить на этот вопрос.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками .