Question

我正在尝试从.js文件中导入React.js代码，并在我的index.html中将其与react cdn导入一起使用。我需要完成非常小的任务，所以我不想使用“创建react app”。

有没有可能使用React.js的方式，就像我们可以仅使用CDN导入并从单独的.js文件导入来使用jQuery / Vue.js一样？

如果我想在现有项目中与另一个javaScript框架一起使用react.js而不使用create-react-app，因为它具有自己的项目结构，该怎么办？

//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>

Answer 1

TL; DR浏览器不了解React将HTML与JavaScript混合使用的JSX格式。您需要先使用babel将JSX代码转换为JS，然后才能直接将其包含在内。否则您将需要在不使用JSX的情况下编写React代码。继续阅读。

在任何浏览器中实际上都不存在在JavaScript程序中自由使用html的明显功能。对于大多数人来说，这种包含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组件会有些冗长。仅当绝对不能使用构建系统时，才使用此选项。

如何使用CDN链接（如常规JavaScript / Vue.js）从另一个.js文件使用React.js？

1 个答案: