Import React vs Import React, { Component }
Which one is better and why?
Or does it make no difference other than writing less code later on?
Does writing { Component } mean it only imports the Component object?
import React, { Component } lets you do class Menu extends Component instead of class Menu extends React.Component. It's less typing and duplication of the React namespace, which is generally a desired modern coding convention.
Additionally, tools like Webpack 2 and Rollup do "tree shaking," meaning any unused exports are not bundled into your final code. With import React/React.Component you are guaranteeing all of React's source code will be bundled. With import { Component }, some tools will only bundle the code needed to use the Component class, excluding the rest of React.
The above paragraph is irrelevant in this specific case, because you always need to have React in the current namespace to write JSX, but only importing the exact modules you need in other cases may lead to smaller bundled code in the end.
Beyond that it's entirely personal preference.
What these are are named imports or namespace imports. What they do is basically copy over the module's contents into the namespace allowing:
import React, { Component } from 'react';
class SomeComponent extends Component { ... }
Normally, we'd extend React.Component, but since the Component module is imported into the namespace, we can just reference it with Component, React. is not needed. All React modules are imported, but the modules inside the curly brackets are imported in such a way that the React namespace prefix is not needed when accessing.
TLDR;
it's entirely personal preference.
Just a note…
import React, { Component } lets you do class Menu extends Component
instead of class Menu extends React.Component. It's less typing…
If you want to do less typing, then don't import Component in addition to React.
import React, { Component } from 'react';
class Menu from Component {
is more typing than:
import React form 'react';
class Menu from React.Component {
even if you consider auto-completion. ;)
Related
so suppose I have an npm package I'd like to use with my project, which was not necessarily made for React. This particular package comes as a Class, which I need to make an object out of.
How could I achieve this in React, when working with class components? Is there a 'standardized way' of doing such a thing?
pseudocode:
import React, { Component } from "react";
import {whatever} from 'coolPackage'
class myReactClass extends Component {
myObject = new whatever()
render() {
return <div></div>;
}
}
export default myReactClass;
Ok, me noob, sorry all for waste time.
There is a problem with the npm package I was trying to use. After checking the error logs again, this time with a lot more care, the problem is not related to the question asked.
A lot of examples use the syntax import React, { Component } from 'react'; to import React class which should be a default export in a module exported from a file with name react. However it is a rule that import statements need to have a path information like ./react in it and cannot be bare. Is webpack or some other library being used to make this work ?
I want to display the Root component inside my html file. I'm aware on how to do it with es5 using ReactDOM.render(<Root/>, document.getElementById('app')) but what about for es6?
Here's my html file:
<div id="app"></div>
Here's my js file:
import React, { Component } from 'react';
class Root extends Component {
render() {
return(
<div>
<h1>Testing</h1>
</div>
);
}
}
ReactDOM.render(<Root/>, document.getElementById('app'));
My attempt above the es5 way because I wasn't quite sure how to make this happen in es6, this obviously isn't working.
Note: I'm not using create-react-app for my project. I'm just trying things out outside of create-react-app environment and instead, onto other environments. I installed Babel and all the other stuff manually.
What can I do to make it work?
It looks like you're missing an import statement for the React DOM, because you will need it to render components to the DOM from React, unless you're importing those components from separate files.
import ReactDOM from "react-dom"
Add that after your first import statement.
I'm working through a React tutorial which uses old-school require syntax, and trying to update it to the more modern import syntax from ES6.
The tutorial suggests we start our JS file with the lines
var React = require("react");
var ReactDOM = require("react-dom");
require("./index.css");
I've figured out that the first two lines should instead read
import React from "react";
import ReactDOM from "react-dom";
but I'm stuck on the third line. What's the import version of requiring a CSS file?
(Normally I would just link the CSS in my HTML file - I assume the reason they're having us include it in the JS is so it will get minified and bundled? Are there other reasons?)
You can import css just like anything else!
import "/index.css";
I assume the reason they're having us include it in the JS is so it
will get minified and bundled?
You're right! Importing CSS inside your module allows tools like Webpack to properly scour the dependency tree and include your CSS file.
Assigning a module name to your CSS import also allows for some neat features.
For example, if you assign a module name to your import as follow,
import stylesheet from './index.css';
you'll now be able to treat the class selectors inside your stylesheet as properties of the module name, which makes it easy to assign styles to your component's DOM.
For example, you can now do:
import stylesheet from './index.css';
class ExampleComponent extends React.Component {
...
render() {
return (
<div className={stylesheet.myClassSelectorName}></div>
)
}
}
Just Import css in your file using import "FilePath/FileName";
We use a React component package which provides some reusable components such as Button, Form, TreeView etc... That package is developed on top of React 14.
We want to develop a new application using React 16 and utilize this component package because it provides a lot of look and feel stuff out of the box.
Our code looks like this.
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import Button from 'reusable-components/button';
export default class MyComponent extends Component {
render() {
return <Button>{this.props.buttonCaption}</Button>;
}
}
MyComponent.propTypes = {
buttonCaption: PropTypes.string
};
With this code, when I open the page, I get an error saying TypeError: o.PropTypes is undefined in the browser console. I believe "o.PropTypes" is the obfuscated version of "React.PropTypes" and I am getting this error because somewhere in the source code of Button component they used "React.PropTypes" which became invalid after React 14.
Another thing is that when I do not use Button and do not import it at all, everything works fine. So, I am pretty sure that the issue is caused by the Button component.
I tried below thing in my index.js but it did not help.
import React from 'react';
import PropTypes from 'prop-types';
React.PropTypes = PropTypes;
Is there a way to use React 14 components from React 16 app? In the worst case we will downgrade to 14 as the library does not have 16 support yet but we really want to avoid it.