Please take a look at these:
import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
As you see, it imports something, but why React is out of {} and all others are into it? {Component} { AppRegistry, Text, View }
Anyway, when should I wrap something into {}?
The difference is in how the file exports, without {} is the default export. There can only ever be one default export.
Anything inside the {} is part of a named exported function, class, or variable that is exported.
If you look at the react source code you will find the following es5 code.
var ReactComponent = require('./ReactComponent');
...
var React = {
...
Component: ReactComponent,
...
}
module.exports = React;
When you import React, { Component } you are importing all of React
along with React.Component as Component
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
Becomes
class Welcome extends Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
This is commonly used to destructure an object like the following.
const person = {
firstName: 'John',
lastName: 'Doe',
};
const { firstName } = person;
Which is the same as
person.firstName
When you
export default MyComponent // import MyComponent
export MyComponent // import { MyComponent }
Related
I don't know why i am getting this error can someone please help i have checked the syntax and cant find anything wrong. It's probably something stupid but i just can't find what it is.
import React, { Component } from 'react';
//import Node from './Node/Node';
import { render } from 'react-dom'
import './Pathfinder.css';
export default class Pathfinder extends Component {
constructor(props){
super(props);
this.state = {
grid: [],
};
}
}
render(); {
return (
<div>
{this.startGrid()}
</div>
);
}```
Issue is semicolon after the render keyword.
And render method is outside the class component due to wrongly placed brackets
render(); {}
Change it to
render() {}
Code should look like :
import React, { Component } from 'react';
//import Node from './Node/Node';
import { render } from 'react-dom'
import './Pathfinder.css';
export default class Pathfinder extends Component {
constructor(props){
super(props);
this.state = {
grid: [],
};
}
render() {
return (
<div>
{this.startGrid()}
</div>
);
}
}
I think that you copy-n-paste the code, but you messed up with the curly braces.
import React, { Component } from 'react';
//import Node from './Node/Node';
import { render } from 'react-dom'
import './Pathfinder.css';
export default class Pathfinder extends Component {
constructor(props){
super(props);
this.state = {
grid: [],
};
}
} <-- should be removed
render() { <-- remove the ; sign
return (
<div>
{this.startGrid()}
</div>
);
}
} <-- close your component with curly braces
Tip for every code: Use the correct indentation.
Tip for some codes: Use a linter with prettier.
What JavaScript technique is being used so that a class component can accept the passed in properties in this context.
In the below code I am passing "test" property to its Home class component. In Home class component I can accept the passed in "test" property in the this context. I am curious to know what JavaScript technique is being used behind the scene to achieve this (making passed in properties available to class component).
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Home from './Home'
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<Home test='test prop' />, document.getElementById('root'));
serviceWorker.unregister();
Home Class component:
import React, { Component } from "react";
class Home extends Component {
constructor() {
super();
this.state = {
conter:0
}
console.log("Constructor",this.props);
}
componentWillMount(){
console.log("Mount Method",this.props);
}
render() {
console.log("Render",this.props);
return (
<div>
Hello
</div>
);
}
}
export default Home;
Also why the properties are undefined in Constructor method. Or , why the properties are defined in ComponentWillMount and Render method in the above code?. I mean why the console.log() inside constructor method is showing undefined and other console.log inside componentWillMount() and render() are showing correct passed in properties.
Replace your constructor
constructor(props) {
super(props);
console.log(this.props)
}
try it out, you should get output from this.props
Please replace your Home class you get your result.
thanks
import React, { Component } from "react";
class Home extends Component {
constructor() {
super(props);
this.state = {
conter:0
}
console.log("Constructor",this.props);
}
componentWillMount(){
console.log("Mount Method",this.props);
}
render() {
console.log("Render",this.props);
return (
<div>
Hello
</div>
);
}
}
export default Home;
Your constructor has some problems, the correct version is:
import React, { Component } from "react";
class Home extends Component {
constructor(props) {
super(props);
this.state = {
conter:0
}
console.log("Constructor",this.props);
}
componentWillMount(){
console.log("Mount Method",this.props);
}
render() {
console.log("Render",this.props);
return (
<div>
Hello
</div>
);
}
}
export default Home;
First thing first, as already mentioned:
"When implementing the constructor for a React.Component subclass, you should call super(props) before any other statement"
(https://reactjs.org/docs/react-component.html#constructor)
The "JavaScript technique" used specially in React is JSX:
"JSX just provides syntactic sugar for the React.createElement(...)"
(https://reactjs.org/docs/jsx-in-depth.html)
Your code with ReactDOM.render(<Home ...>, ...) ist "translated" to:
React.createElement(Home, { test: 'test prop' }, ...)
That's how React "knows" how to instantiate the class and set the props.
If you want to look at it in detail, check out the code at:
https://github.com/facebook/react/blob/master/packages/react/src/ReactElement.js
I'm trying to export a component without the decorators (connect() in this case)
for unit testing with jest.
So, how could I do this:
import React, { Component } from 'react';
import { connect } from 'react-redux';
export class Header extends Component {
render(){
return <pre>Header</pre>
}
}
export default connect()(Header);
With this component (the export at the beginning doesn't work, it stills exports the connected component)
export let Header = props => {
render(){
return <pre>Header</pre>
}
}
Header = connect()(Header);
export default Header;
Use different variable for your connected component as the following code:
export let Header = props => {
render(){
return <pre>Header</pre>
}
}
let HeaderConnected = connect()(Header);
export default HeaderConnected;
Now you can import your Header freely without using connect()
This can be done without even changing default export:
export let Header = props => {
render(){
return <pre>Header</pre>
}
}
export default connect()(Header);
There may be no need to export original component for connect alone because most well-designed HOCs expose original component:
import Header from '...';
const OriginalHeader = Header.WrappedComponent;
I am working on a simple React Native App, and have decided to user react-navigation. I have also decided to go with Flow for static type checking. What I can't figure out, is how to define navigation related props with Flow.
e.g. I define my App.js to use StackNavigator like so:
import StackNavigator from 'react-navigation';
import Main from './app/containers/Main';
const App = StackNavigator({
Main: { screen: Main },
});
export default App;
then I define my Main class, but I don't know how to reference react-navigation in my props:
// #flow
import React, { Component } from 'react';
import { View, Text } from 'react-native';
type Props = {
navigate: ????
};
type State = {};
class Main extends Component<Props, State> {
...
}
According to https://github.com/react-navigation/react-navigation/issues/3643
import { NavigationState, NavigationScreenProp } from 'react-navigation';
type Props = {
navigation: NavigationScreenProp<NavigationState>
};
Import NavigationScreenProp from react-navigation:
// #flow
import React, { Component } from 'react';
import { View, Text } from 'react-native';
import { NavigationScreenProp } from 'react-navigation';
type Props = {
navigate: NavigationScreenProp<{}>
};
type State = {};
class Main extends Component<Props, State> {
...
}
react-navigation has a flow file. Maybe you can import from there or just copy-paste
https://github.com/react-navigation/react-navigation/blob/master/flow/react-navigation.js#L72
To prevent Cannot import the type NavigationState as a value. Use the import type instead.
// #flow
import React, { Component } from 'react';
import type { NavigationState, NavigationScreenProp } from 'react-navigation';
type Props = {
navigation: NavigationScreenProp<NavigationState>
}
type State = {}
class Main extends Component<Props, State> {
...
}
You can also add below to .flowconfig to prevent flow-typed/npm/redux-devtools-extension_v2.x.x.js:23:33
[lints]
deprecated-utility=off
I am a bit new to react and redux, but made quite a lot of progress.
I am using redux connect to map state to props. Was working like charm, until I got this situation:
Parent component is using mapStateToProps, and here is the source code for it:
import React from 'react';
import { connect } from 'react-redux'
import { NestedComponent } from './NestedComponent'
class ParentElement extends React.Component {
render() {
return (
<div className="App">
<NestedComponent/>
</div>
);
}
}
const mapStateToProps = state => {
const { questions } = state
return {
questions
}
}
ParentElement.contextTypes = {
router: React.PropTypes.object.isRequired
}
export default connect(mapStateToProps)(ParentElement)
Here is the code for the nested element:
import React from 'react';
import { connect } from 'react-redux'
class NestedComponent extends React.Component {
render() {
return (
<div> I am nested</div>
);
}
};
const mapStateToProps = state => {
const { questions } = state
return {
questions
}
}
NestedComponent.contextTypes = {
router: React.PropTypes.object.isRequired
}
export default connect(mapStateToProps)(NestedComponent)
When I try to show the parent element, I get this error:
Warning: React.createElement: type should not be null, undefined,
boolean, or number. It should be a string (for DOM elements) or a
ReactClass (for composite components). Check the render method of
ParentElement.
What am I missing / doing wrong?
Import header file like this:-
import NestedComponent from './NestedComponent'
Without braces.
When a class is exported as a default then it is imported without braces because there is only one default class in a file but, when the class is exported without default you have to import it with braces because there can be more than one class with export keywords in a file (es6 conventions).