How to import dependencies in reactjs class?

Question

I created a react jsx file (index.jsx) as shown below. The first line is used to import jquery library in our class.

import $ from 'jquery'
import React from 'react';
import ReactDOM from 'react-dom';

import './main.css';
import './component';
import Search from './search/search'

when I started the webpack-dev-server, I got below error:

index.jsx Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import $ from 'jquery';
| import React from 'react';
| import ReactDOM from 'react-dom'

I have added the jquery and react dependencies on my package.json file. I wonder what I missed here.

Are you using a compiler such as babel? Can u post your webpack.config file? — thitemple
– thitemple, Commented Apr 8, 2016 at 15:40

Anthony De Smet · Accepted Answer · 2016-04-08 08:19:35Z

2

The question is tagged as React, but I don't see it. If you want to use React, do something like:

HelloWorld.js:

import React from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';

var HelloWorld = React.createClass({
    render: function(){
        return <h1> Hello World! </h1>
    }
});

ReactDOM.render(<HelloWorld />, document.getElementById('content'));

index.html:

<html>
    <head>
        <title>Hello World Example</title>
    </head>
    <body>
        <div id='content'/>
    </body>
</html>

If you don't want to use React, please post your other code so we can see how everything couples together, and where things go wrong.

answered Apr 8, 2016 at 8:19

Anthony De Smet

2,4454 gold badges22 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joey Yi Zhao Over a year ago

I do want to use react but I got the error before importing react. Actually, I tried your code but got this error: "index.jsx Line 1: Unexpected token You may need an appropriate loader to handle this file type." I have changed the post to include this error.

fandro · Accepted Answer · 2016-04-08 08:11:40Z

0

juste do :

var $ = require("query");
        module.exports = { 
          function(){

           var element = document.createElement('h1');

           element.innerHTML = 'Hello world';

           return element;
         }
    }

another syntaxe can be :

var $ = require("query");
    module.exports = { 
              myFunction : function(){

               var element = document.createElement('h1');

               element.innerHTML = 'Hello world';

               return element;
             }
        }

edited Apr 8, 2016 at 8:11

answered Apr 8, 2016 at 8:07

fandro

4,9138 gold badges44 silver badges64 bronze badges

2 Comments

Joey Yi Zhao Over a year ago

I want to import jquery can other libraries, where should I place the import code?

fandro Over a year ago

at the top of module export like you did, can be : var $ = require("query");

Collectives™ on Stack Overflow

How to import dependencies in reactjs class?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related