Confusion with default import of Reactwhy should we use import React from 'react'Set a default parameter value for a JavaScript functionevent.preventDefault() vs. return falseGet all unique values in a JavaScript array (remove duplicates)What is JSONP, and why was it created?How do I check if string contains substring?Is Safari on iOS 6 caching $.ajax results?Loop inside React JSXProgrammatically navigate using react routerUsing Node.js require vs. ES6 import/exportWhy use Redux over Facebook Flux?
Examples where existence is harder than evaluation
I'm attempting to understand my 401k match and how much I need to contribute to maximize the match
Was Mohammed the most popular first name for boys born in Berlin in 2018?
Are there vaccine ingredients which may not be disclosed ("hidden", "trade secret", or similar)?
What should I use to get rid of some kind of weed in my onions
Using mean length and mean weight to calculate mean BMI?
Is your maximum jump distance halved by grappling?
Why are thrust reversers not used down to taxi speeds?
Do you take falling damage if falling from 20 feet or less while grappled by someone affected by the Cat's Grace option of the Enhance Ability spell?
When an electron around an atom drops to a lower state, is 100% of the energy converted to a photon?
Is this strange Morse signal type common?
Identity of a supposed anonymous referee revealed through "Description" of the report
How do I give a darkroom course without negatives from the attendees?
Is it possible to do moon sighting in advance for 5 years with 100% accuracy?
Is it safe to keep the GPU on 100% utilization for a very long time?
Why is there a cap on 401k contributions?
Should one save up to purchase a house/condo or maximize their 401k first?
GLM: Modelling proportional data - account for variation in total sample size
How do I minimise waste on a flight?
Is there an idiom that means "revealing a secret unintentionally"?
Creating Stored Procedure in local db that references tables in linked server
As a small race with a heavy weapon, does enlage remove the disadvantage?
Can I bring back Planetary Romance as a genre?
What's the difference between "ricochet" and "bounce"?
Confusion with default import of React
why should we use import React from 'react'Set a default parameter value for a JavaScript functionevent.preventDefault() vs. return falseGet all unique values in a JavaScript array (remove duplicates)What is JSONP, and why was it created?How do I check if string contains substring?Is Safari on iOS 6 caching $.ajax results?Loop inside React JSXProgrammatically navigate using react routerUsing Node.js require vs. ES6 import/exportWhy use Redux over Facebook Flux?
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
To import React we write import React from 'react'.
But this is a default export right ? So if I change its name to something else other than React it should also work. But it doesn't work. Can anyone please explain why?
javascript reactjs
asked May 4 at 12:54
Aakash_SardanaAakash_Sardana
445
add a comment |
To import React we write import React from 'react'.
But this is a default export right ? So if I change its name to something else other than React it should also work. But it doesn't work. Can anyone please explain why?
javascript reactjs
asked May 4 at 12:54
Aakash_SardanaAakash_Sardana
445
Related: why should we use import React from 'react'
– Bergi
May 4 at 18:54
add a comment |
To import React we write import React from 'react'.
But this is a default export right ? So if I change its name to something else other than React it should also work. But it doesn't work. Can anyone please explain why?
javascript reactjs
asked May 4 at 12:54
Aakash_SardanaAakash_Sardana
445
To import React we write import React from 'react'.
But this is a default export right ? So if I change its name to something else other than React it should also work. But it doesn't work. Can anyone please explain why?
javascript reactjs
javascript reactjs
asked May 4 at 12:54
Aakash_SardanaAakash_Sardana
445
asked May 4 at 12:54
Aakash_SardanaAakash_Sardana
445
asked May 4 at 12:54
Aakash_SardanaAakash_Sardana
445
asked May 4 at 12:54
Aakash_SardanaAakash_Sardana
445
asked May 4 at 12:54
Aakash_SardanaAakash_Sardana
445
445
Related: why should we use import React from 'react'
– Bergi
May 4 at 18:54
add a comment |
Related: why should we use import React from 'react'
– Bergi
May 4 at 18:54
Related: why should we use import React from 'react'
– Bergi
May 4 at 18:54
Related: why should we use import React from 'react'
– Bergi
May 4 at 18:54
add a comment |
2 Answers
2
active
oldest
votes
Essentially, JSX compilers (like Babel/TypeScript) convert the JSX code to pure JavaScript.
For example, the following JSX code:
const Element = () => (
<div>
Hey there
</div>
);
is compiled into:
const Element = () => (
React.createElement("div", null, "Hey there")
);
Which is now valid JavaScript that can be parsed by the browser.
As you may have noticed, it uses the React.createElement function to create the div. This is why changing the name of the import doesn't work - the compiler still tries to use React.
Babel lets you configure this using the pragma option, if desired, allowing you to use a different function name.
TypeScript can do the same using the jsxFactory compiler option.
answered May 4 at 13:05
odenscodensc
499711
1
Awesome that you citedpragmaoption, there are also another useful options in the link you provided, thanks @odensc
– Joao Bueno
May 4 at 13:08
@Junius L. This is the reason why changing the import name doesn't work, which is what the question was asking. If you don't use JSX, you can change the import to whatever you want.
– odensc
May 4 at 13:32
@Junius L. Because if they were not using JSX then there wouldn't be any issue. This is the only reasonable answer to the question, barring any misconfiguration of the bundler.
– odensc
May 4 at 13:38
1
This question is very specifically about the default export of the React library, not just imports in general.
– odensc
May 4 at 13:45
add a comment |
It works so, as you use Babel, or something similar, to translate JSX.
So when you input something like this:
function AComponent()
return <div>Hello world</div>
You will get the next transpiled code:
"use strict";
function AComponent()
return React.createElement("div", null, "Hello world");
By this reason you should use the definite name of React.
You can try it here: https://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=AQ4MwVwOwYwFwJYHsrAIIGEkFsAOKBTKOACgEpgBvAKFBACcC4J7UAeAEwQDcA-ACQIAbIUmAB3JPSEc2Aei59aoAL5A&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.4.4&externalPlugins=
answered May 4 at 13:06
NikNik
78449
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55982727%2fconfusion-with-default-import-of-react%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Essentially, JSX compilers (like Babel/TypeScript) convert the JSX code to pure JavaScript.
For example, the following JSX code:
const Element = () => (
<div>
Hey there
</div>
);
is compiled into:
const Element = () => (
React.createElement("div", null, "Hey there")
);
Which is now valid JavaScript that can be parsed by the browser.
As you may have noticed, it uses the React.createElement function to create the div. This is why changing the name of the import doesn't work - the compiler still tries to use React.
Babel lets you configure this using the pragma option, if desired, allowing you to use a different function name.
TypeScript can do the same using the jsxFactory compiler option.
answered May 4 at 13:05
odenscodensc
499711
1
Awesome that you citedpragmaoption, there are also another useful options in the link you provided, thanks @odensc
– Joao Bueno
May 4 at 13:08
@Junius L. This is the reason why changing the import name doesn't work, which is what the question was asking. If you don't use JSX, you can change the import to whatever you want.
– odensc
May 4 at 13:32
@Junius L. Because if they were not using JSX then there wouldn't be any issue. This is the only reasonable answer to the question, barring any misconfiguration of the bundler.
– odensc
May 4 at 13:38
1
This question is very specifically about the default export of the React library, not just imports in general.
– odensc
May 4 at 13:45
add a comment |
Essentially, JSX compilers (like Babel/TypeScript) convert the JSX code to pure JavaScript.
For example, the following JSX code:
const Element = () => (
<div>
Hey there
</div>
);
is compiled into:
const Element = () => (
React.createElement("div", null, "Hey there")
);
Which is now valid JavaScript that can be parsed by the browser.
As you may have noticed, it uses the React.createElement function to create the div. This is why changing the name of the import doesn't work - the compiler still tries to use React.
Babel lets you configure this using the pragma option, if desired, allowing you to use a different function name.
TypeScript can do the same using the jsxFactory compiler option.
answered May 4 at 13:05
odenscodensc
499711
1
Awesome that you citedpragmaoption, there are also another useful options in the link you provided, thanks @odensc
– Joao Bueno
May 4 at 13:08
@Junius L. This is the reason why changing the import name doesn't work, which is what the question was asking. If you don't use JSX, you can change the import to whatever you want.
– odensc
May 4 at 13:32
@Junius L. Because if they were not using JSX then there wouldn't be any issue. This is the only reasonable answer to the question, barring any misconfiguration of the bundler.
– odensc
May 4 at 13:38
1
This question is very specifically about the default export of the React library, not just imports in general.
– odensc
May 4 at 13:45
add a comment |
Essentially, JSX compilers (like Babel/TypeScript) convert the JSX code to pure JavaScript.
For example, the following JSX code:
const Element = () => (
<div>
Hey there
</div>
);
is compiled into:
const Element = () => (
React.createElement("div", null, "Hey there")
);
Which is now valid JavaScript that can be parsed by the browser.
As you may have noticed, it uses the React.createElement function to create the div. This is why changing the name of the import doesn't work - the compiler still tries to use React.
Babel lets you configure this using the pragma option, if desired, allowing you to use a different function name.
TypeScript can do the same using the jsxFactory compiler option.
answered May 4 at 13:05
odenscodensc
499711
Essentially, JSX compilers (like Babel/TypeScript) convert the JSX code to pure JavaScript.
For example, the following JSX code:
const Element = () => (
<div>
Hey there
</div>
);
is compiled into:
const Element = () => (
React.createElement("div", null, "Hey there")
);
Which is now valid JavaScript that can be parsed by the browser.
As you may have noticed, it uses the React.createElement function to create the div. This is why changing the name of the import doesn't work - the compiler still tries to use React.
Babel lets you configure this using the pragma option, if desired, allowing you to use a different function name.
TypeScript can do the same using the jsxFactory compiler option.
answered May 4 at 13:05
odenscodensc
499711
edited May 4 at 13:23
answered May 4 at 13:05
odenscodensc
499711
answered May 4 at 13:05
odenscodensc
499711
answered May 4 at 13:05
odenscodensc
499711
499711
1
Awesome that you citedpragmaoption, there are also another useful options in the link you provided, thanks @odensc
– Joao Bueno
May 4 at 13:08
@Junius L. This is the reason why changing the import name doesn't work, which is what the question was asking. If you don't use JSX, you can change the import to whatever you want.
– odensc
May 4 at 13:32
@Junius L. Because if they were not using JSX then there wouldn't be any issue. This is the only reasonable answer to the question, barring any misconfiguration of the bundler.
– odensc
May 4 at 13:38
1
This question is very specifically about the default export of the React library, not just imports in general.
– odensc
May 4 at 13:45
add a comment |
1
Awesome that you citedpragmaoption, there are also another useful options in the link you provided, thanks @odensc
– Joao Bueno
May 4 at 13:08
@Junius L. This is the reason why changing the import name doesn't work, which is what the question was asking. If you don't use JSX, you can change the import to whatever you want.
– odensc
May 4 at 13:32
@Junius L. Because if they were not using JSX then there wouldn't be any issue. This is the only reasonable answer to the question, barring any misconfiguration of the bundler.
– odensc
May 4 at 13:38
1
This question is very specifically about the default export of the React library, not just imports in general.
– odensc
May 4 at 13:45
1
1
Awesome that you cited
pragma option, there are also another useful options in the link you provided, thanks @odensc– Joao Bueno
May 4 at 13:08
Awesome that you cited
pragma option, there are also another useful options in the link you provided, thanks @odensc– Joao Bueno
May 4 at 13:08
@Junius L. This is the reason why changing the import name doesn't work, which is what the question was asking. If you don't use JSX, you can change the import to whatever you want.
– odensc
May 4 at 13:32
@Junius L. This is the reason why changing the import name doesn't work, which is what the question was asking. If you don't use JSX, you can change the import to whatever you want.
– odensc
May 4 at 13:32
@Junius L. Because if they were not using JSX then there wouldn't be any issue. This is the only reasonable answer to the question, barring any misconfiguration of the bundler.
– odensc
May 4 at 13:38
@Junius L. Because if they were not using JSX then there wouldn't be any issue. This is the only reasonable answer to the question, barring any misconfiguration of the bundler.
– odensc
May 4 at 13:38
1
1
This question is very specifically about the default export of the React library, not just imports in general.
– odensc
May 4 at 13:45
This question is very specifically about the default export of the React library, not just imports in general.
– odensc
May 4 at 13:45
add a comment |
It works so, as you use Babel, or something similar, to translate JSX.
So when you input something like this:
function AComponent()
return <div>Hello world</div>
You will get the next transpiled code:
"use strict";
function AComponent()
return React.createElement("div", null, "Hello world");
By this reason you should use the definite name of React.
You can try it here: https://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=AQ4MwVwOwYwFwJYHsrAIIGEkFsAOKBTKOACgEpgBvAKFBACcC4J7UAeAEwQDcA-ACQIAbIUmAB3JPSEc2Aei59aoAL5A&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.4.4&externalPlugins=
answered May 4 at 13:06
NikNik
78449
add a comment |
It works so, as you use Babel, or something similar, to translate JSX.
So when you input something like this:
function AComponent()
return <div>Hello world</div>
You will get the next transpiled code:
"use strict";
function AComponent()
return React.createElement("div", null, "Hello world");
By this reason you should use the definite name of React.
You can try it here: https://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=AQ4MwVwOwYwFwJYHsrAIIGEkFsAOKBTKOACgEpgBvAKFBACcC4J7UAeAEwQDcA-ACQIAbIUmAB3JPSEc2Aei59aoAL5A&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.4.4&externalPlugins=
answered May 4 at 13:06
NikNik
78449
add a comment |
It works so, as you use Babel, or something similar, to translate JSX.
So when you input something like this:
function AComponent()
return <div>Hello world</div>
You will get the next transpiled code:
"use strict";
function AComponent()
return React.createElement("div", null, "Hello world");
By this reason you should use the definite name of React.
You can try it here: https://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=AQ4MwVwOwYwFwJYHsrAIIGEkFsAOKBTKOACgEpgBvAKFBACcC4J7UAeAEwQDcA-ACQIAbIUmAB3JPSEc2Aei59aoAL5A&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.4.4&externalPlugins=
answered May 4 at 13:06
NikNik
78449
It works so, as you use Babel, or something similar, to translate JSX.
So when you input something like this:
function AComponent()
return <div>Hello world</div>
You will get the next transpiled code:
"use strict";
function AComponent()
return React.createElement("div", null, "Hello world");
By this reason you should use the definite name of React.
You can try it here: https://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=AQ4MwVwOwYwFwJYHsrAIIGEkFsAOKBTKOACgEpgBvAKFBACcC4J7UAeAEwQDcA-ACQIAbIUmAB3JPSEc2Aei59aoAL5A&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.4.4&externalPlugins=
answered May 4 at 13:06
NikNik
78449
answered May 4 at 13:06
NikNik
78449
answered May 4 at 13:06
NikNik
78449
answered May 4 at 13:06
NikNik
78449
78449
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55982727%2fconfusion-with-default-import-of-react%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Related: why should we use import React from 'react'
– Bergi
May 4 at 18:54