I'm learning ReactJS right now and trying to separate all the components into discrete files.
Is there some strategy to simplify the process of requiring/importing components? It seems rather silly to have import React from 'react'; on the first line of every component file?
I'm using Babel for the import function.
To get around writing import React from 'react' every time, you can use Webpack and:
write a loader that adds the statement import React from 'react' to every JSX file it encounters; or,
use React from a CDN and include it as a Webpack external in your configuration.
I believe that's the recommended way if you want to use the import/export mechanism from ES6 to separate the component.
A way to not do this is to assign React as a global variable, but that kinda defeat the purpose of using import/export.
Indeed we need to do similar things in other languages like Java?
Related
I'm curios to know why react provided the two import libraries
I have tried both the methods but I couldn't find any difference with both of them!
react-dom/client provides just methods for client development.
https://reactjs.org/docs/react-dom-client.html
It can't be used for server side development.
For example well-known function renderToString for SSR is exported from react-dom/server but not from react-dom/client
react-dom contains both of them.
Hello guys i have a little question about importing files into a single .js file.
Which way is better (best practice), what's the scenario that is used for:
import './file;'
import { something } from './file'
import * as evertything from './file'
Because i see that 2 and 3 are the same thing but different syntax(maybe Syntactic Sugar).
All three do different things.
import './file;'
That loads the file, and does not import anything. This is useful if you want to initialize that module (or add some external dependency, e.g. a css file if you use Webpack).
import { something } from './file'
That just imports something from the file, therefore a bundler could optimize all other dependencies away. I'd always try to go with that instead of
import * as evertything from './file'
That imports everything from that module under a namespace, and therefore makes treeshaking more difficult (the bundler cannot optimize it well). I'd only use that if you need everything from that dependency, or if that dependency is loaded externally nevertheless (e.g. import * as React from "react").
I guess the following MDN documentation will make you clear about those things:
import - JavaScript|MDN
As far as I know, 1st method is used when you have only one default export. 2nd is used when you have multiple default exports but you don't want all of them to load and want only few of them. 3rd is the case when you want everything under a single object (which can be used similar to namespace in other programming languages).
I would like to be like to be able to get a relative import:
e.g.
import Router from '#/router/router.js'
import IndexController from '#/controller/index.js'
Is there a easy way to achieve this? I have never set it up myself but I was able to use it with frontendframe works such as react or vue when setting them up through their cli. I'm pretty sure they do it with webpack, but is there a way to achieve this flexibility without adding any additional tooling such as webpack?
We are using React and TypeScript in our current project and I come across below behavior.
import React, { Component } from 'react';
I replace the above line with the one below since it seems to be using Component import only.
import { Component } from 'react';
And I was thrown below error
Error: 'React' refers to a UMD global but the current file is a module. Consider adding an import instead.
I tried looking it up on Stack and GitHub, found few articles and discussion but still unclear about why it's happening.
Would be more interested in whether React or Typescript is throwing it and WHY ? Not the ways to fix it.
Also some light around UMD, why it's used here ?
Are you rendering any jsx in the file? If so, you do need to import React, since those jsx tags compile into calls to React.createElement(). Without the import, the references to React are trying to reference a global variable, which then results in that error.
If you're using eslint, i'd recommend using eslint-plugin-react and turning on the rule react-in-jsx-scope, which will catch this case.
The way JSX syntax is transpiled depends on compiler options, jsxFactory option defaults to React.createComponent. This means that <p/> is transpiled to React.createComponent('p'), and React is expected to exist in the scope of a module.
If there's no React import, it's expected that React global should exist.
Bear with me, I'm not sure if this is purely a React Native issue, or just an ES6 question in general. But I noticed I'm unable to do this:
import {navBarRouteMapper} from '/src/helpers';
I get an error saying it's unable to resolve the module. I have to do this instead:
import {navBarRouteMapper} from '../../../src/helpers';
Keeping track of folder depth can get a bit unmanageable as the complexity of the app grows. Why am I not able to use an absolute path?
EDIT:
I see people are recommending adding babel, but I don't want to pollute React Native's system. There's obviously transpilation to ES6 already going on. I was hoping for a solution specific to the React Native ecosystem.
There is actually a pretty clean solution for React Native, have a look here: https://medium.com/#davidjwoody/how-to-use-absolute-paths-in-react-native-6b06ae3f65d1#.u47sl3p8x.
TL;DR:
You'll just have to create a package.json file in your src/helpers folder:
{
"name": "#helpers"
}
And you will be able to import it from anywhere:
import { navBarRouteMapper } from '#helpers'