使用ES6将React导入js文件

Question

我在一个单独的js文件中创建ReactJS组件，我不知道我是怎么做的

import React, { Component } from 'react';

工作或是否是正确的方式。 我从在线教程得到它但不确定我是否正确使用它以及我是否遗漏了一些东西。 我感到困惑，因为我没有列出完整路径ro react.js ...

这是我的组件：

import React, { Component } from 'react';


 class Header extends Component {
     render(){
         return(
           <div>
              <div className="App-header">
                 <h2>Header</h2>
              </div>
          </div>
        );
     }
}

export default Header;

我是ReactJs新手，所以请不要在没有解释原因的情况下进行投票。 谢谢

更新：

我试图将Header组件移动到一个单独的文件，并遇到一些麻烦。

这是我的工作index.html页面：

<!DOCTYPE html>
<html lang="en">

  <head>

     <meta charset="utf-8">

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <script src="../build/react.js"></script>
     <script src="../build/react-dom.js"></script>
     <script src="../build/babel.js"></script>
     <title>React App</title>

 </head>

<body>

    <div id="root"></div>

     <script type="text/jsx">

      class Header extends React.Component {
          render(){
               return(
                <div>
                    <div className="App-header">
                    <h2>Header</h2>
                    </div>
            </div>
        );
          }
}

    class Main extends React.Component {

        render() {

            return(
                <div id="main">
                    <div className="container">
                        Main content here
                    </div>
                </div>);
        }
    }

    class Page extends React.Component {
        render(){
            return(<div>
                        <Header/>
                        <Main />
                    </div>);
        }
    }
    ReactDOM.render(<Page />, document.getElementById('root'));

    </script>

</body>

</html>

现在当我尝试将我的Header移动到一个单独的文件时，我得到两个文件index.html和' Header.js ：

index.html的：

<!DOCTYPE html>
<html lang="en">

  <head>

     <meta charset="utf-8">

     <meta name="viewport" content="width=device-width, initial-scale=1">

     <script src="../build/react.js"></script>
     <script src="../build/react-dom.js"></script>
     <script src="../build/babel.js"></script>
     <title>React App</title>

 </head>

<body>

    <div id="root"></div>

     <script type="text/jsx">

import Header from './js/Header.js';


    class Main extends React.Component {

        render() {

            return(
                <div id="main">
                    <div className="container">
                        Main content here
                    </div>
                </div>);
        }
    }

    class Page extends React.Component {
        render(){
            return(<div>
                        <Header/>
                        <Main />
                    </div>);
        }
    }
    ReactDOM.render(<Page />, document.getElementById('root'));

    </script>

</body>

</html>

Header.js：

import React, { Component } from 'react';




class Header extends Component {

render(){

    return(

        <div>

            <div className="App-header">

                <h2>Header</h2>

            </div>

        </div>

    );

}

}



export default Header;

When I run it, I get an error `Uncaught ReferenceError: require is not defined`

Answer 1

在您更新之前，答案是：

import React, { Component } from 'react';

是反应的语法糖

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

使用ES6将React导入js文件

问题描述

1 个解决方案

解决方案1
0 2017-12-12 16:08:25

使用ES6将React导入js文件

问题描述

1 个解决方案

解决方案1 0 2017-12-12 16:08:25

解决方案1
0 2017-12-12 16:08:25