Как использовать React.js из другого файла .js, используя ссылку CDN, как обычный JavaScript / Vue.js? - PullRequest
Новая
       11

Как использовать React.js из другого файла .js, используя ссылку CDN, как обычный JavaScript / Vue.js?

0 голосов
/ 29 апреля 2019

Я пытаюсь импортировать коды React.js из файла .js и использовать его в моем index.html с импортом реагировать cdn.Мне нужно было выполнить очень маленькую задачу, поэтому я не хотел использовать «приложение для создания реакции».

Можно ли использовать React.js так же, как мы можем использовать jQuery / Vue.js, используя только импорт cdn и импортируя их из отдельного файла .js?

Что если бы я захотел использовать response.js в существующем проекте вместе с другой средой javaScript, не используя create-реагировать-приложение, поскольку у него есть собственная структура проекта. 

//my_react.js:

class Greeting extends React.Component {

            state={

                name: 'Deutschland'
            }
     
            render() {

                return (<h1>Hello {this.state.name}</h1>);
            }
        }
     
ReactDOM.render(<Greeting />, document.getElementById('root') );
//index.html:

<!DOCTYPE html>
<html lang="en">
 <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
      <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
      <script src="https://unpkg.com/babel-standalone@6/babel.min.js">          </script>
      
      <script src="js/my_react.js"></script>
 </head>
 
    <body>
 
        <div id="root"></div>
   
    </body>
 </html>

1 Ответ

0 голосов
/ 29 апреля 2019

TL; DR Браузеры не понимают формат JSX, используемый React для смешивания HTML с JavaScript.Вам нужно будет преобразовать код JSX в JS, используя babel, прежде чем он будет включен напрямую.Или вам нужно будет написать код React без использования JSX.Продолжайте читать для этого.

Очевидной возможности свободного использования html в программах JavaScript на самом деле не существует ни в одном из браузеров.Для большинства людей этот смешанный код с JS и HTML проходит через преобразование, и в результате получается чистый код JS, который можно запустить в любом браузере.Просмотрите руководство по началу работы с React, чтобы узнать, как этого добиться https://reactjs.org/docs/getting-started.html.

Преобразование, например, следующего фрагмента будет происходить следующим образом: 

    render() {
        return <div />;
    }

Babel преобразуется в: 

    render() {
        return React.createElement('div', {});
    }

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

React (официально) поддерживает использование без JSX, подробнее об этом здесь: https://reactjs.org/docs/react-without-jsx.html.Однако следует помнить, что компоненты React, написанные таким образом, имеют тенденцию быть многословными.Используйте эту опцию, только если вы абсолютно не можете иметь систему сборки.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...