3

I am creating ReactJS component in a separate js file and I am not sure I understand how does

import React, { Component } from 'react';

work or whether it is the right way. I got it from a tutorial online but not sure whether I am using it correctly and whether I am missing something. I am getting confused as I am not listing full path ro react.js...

Here is my component:

import React, { Component } from 'react';


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

export default Header;

I am a ReactJs newbie so please do not downvote without explaining why. thanks

UPDATE:

I am trying to move Header component to a separate file and having some trouble.

Here is my working index.html page:

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

Now when I try moving my Header to a separate file I get two files index.html and '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`
Coding Duchess
  • 6,445
  • 20
  • 113
  • 209
  • This is correct, go and read about ES6 Modules, and also CommonJS. http://2ality.com/2014/09/es6-modules-final.html – Tom Oakley Dec 12 '17 at 15:16
  • An import that doesn't refer to a full/relative path generally refers to an NPM module - this depends on which (if any) module bundler you're using though. Could you please provide more info on what your build configuration is? – Joe Clay Dec 12 '17 at 15:16
  • I am not suing any bundlers. Just had a small simple page and trying to move a component to a separate module. Will update my question – Coding Duchess Dec 12 '17 at 15:22
  • 1
    ES6 `import` uses `require`, which cannot be used in the browser, for that you need Node.js and a build system/bundler (such as Webpack). I would answer your question more thoroughly but I don't have time (working...), sorry. The best idea would be to go and get [create-react-app](https://github.com/facebookincubator/create-react-app), install that (using npm) and run it as the project readme says. – Tom Oakley Dec 12 '17 at 15:26
  • Tom Oakley, could you post your comment regarding create-react-app as an answer? That is what I decided to use – Coding Duchess Dec 21 '17 at 16:08

1 Answers1

0

Before your update the answer is: 

import React, { Component } from 'react';

is syntactic sugar in react for

'use strict';

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
Paul Thomas Clarke
  • 27
  • 4