React using import vs. required

Question

I am currently learning react and I have an app using webpack, babel and react. It seems react has two ways of writing it using either required or import. It also seems there is a lot more documentation on using import. How can I change my stack to use the import version?

I think you want to know difference between `require` and `import`. — Pardeep Dhingra, Aug 07 '17 at 09:45
This may help you https://stackoverflow.com/questions/31354559/using-node-js-require-vs-es6-import-export — Pardeep Dhingra, Aug 07 '17 at 09:45

score 4 · Answer 1 · edited Aug 07 '17 at 09:53

4

The import and export statements are an ES6 standard. Right now, your setup is likely using Babel to transpile this into ES5. You can use one or the other, but import/export will soon become the standard, so adopting it is advised.

edited Aug 07 '17 at 09:53

glhrmv

1,712
1
16
23

answered Aug 07 '17 at 09:45

Nevosis

1,366
1
16
27

Thanks for your help! – Jamie Aug 07 '17 at 11:27

score 0 · Answer 2 · answered Aug 07 '17 at 12:06

import is ES6 (or ES2015) standard. To use it, you need to install and activate the preset in babel.

Follow these steps:

Go to your project folder then type this: npm install --save-dev babel-cli babel-preset-env
Create a file named .babelrc (in case you have not created one) and insert this lines:

{ 'presets': ['env', 'react'] }

I assume you have setup the webpack to work with babel.

React using import vs. required

2 Answers2