THE ERROR MESSAGE I AM GETTING ON MY DEVICEIam working on React Native.As I import my other react native file(i.e component1.js) into the index.android.js file.
It's giving an error
"Expected a component class,got[object Object]".
component1.js
import React, { Component } from 'react';
import {AppRegistry,Text,View} from 'react-native';
export default class component1 extends Component {
render() {
return(
<View>
<Text>This is component1</Text>
</View>
);
}
}
AppRegistry.registerComponent('component1', () => component1);
index.android.js
import React, { Component } from 'react';
import {AppRegistry,Text,View} from 'react-native';
import component1 from'./app/Components/component_a/component1'
export default class myapp extends Component {
render() {
return (
<View>
<component1 />
</View>
);
}
}
AppRegistry.registerComponent('myapp', () => myapp);
The problem is you define multiple AppRegistry in child and parent file. Remove AppRegistry.registerComponent('component1', () => component1); in component1.js, you don't need it . Just declare in the root component.
From RN docs.
AppRegistry should be required early in the require sequence to make sure the JS execution environment is setup before other modules are required.
Related
when i use context in Reactjs ,by using hooks I just can use 'useContext' for function component in other module , but I want to use it for --> class component <-- in other module but i cant do it, and in browser console i see this error: ==>> ((
ReferenceError: Cannot access 'MyContext' before initialization
Module.MyContext
http://localhost:3000/static/js/main.chunk.js:12:101
Module../src/news.js
F:/0 React Js project/my-appfirst-app/src/news.js:21
))
do we have any way to use class component in other module?
these are my codes
parent commponent:
import React,{createContext,Component} from 'react';
import ReactDOM from 'react-dom';
import Roots from './news'
import * as serviceWorker from './serviceWorker';
export let MyContext=createContext();
class Show extends Component{
render(){
return(
<MyContext.Provider value={{name:'ali',family:'mohammady',done:'false'}} >
<div className='container-main'>
<Roots />
</div>
</MyContext.Provider>
)
}
}
ReactDOM.render(<Show />, document.getElementById('root'));
and this child module:
import React,{Component} from 'react';
import {MyContext} from './index'
class Roots extends Component{
static contextType = MyContext;
render(){
return(
<>
<p>{console.log(this.context)}</p>
</>
)
}
}
export default Roots;
I wonder how to work this codes if i put child component in parent component !!??
You need to export then import the consumer from the context to use it like that
export let MyContext=createContext();
export const MyContextConsumer = MyContext.Consumer
Then import that consumer and use it
import React,{ Component } from 'react';
import { MyContextConsumer } from './index'
class Roots extends Component{
render(){
return(
<MyContextConsumer>
{value => <p>{console.log(value)}</p>}
</MyContextConsumer>
)
}
}
#topched
thanks for your help
your answer is very helpful for me but the console show the error again and then I did a few changes on your code and it runs without error.
when I use bottom script in index.js , i get error but i created a new file with the name context.js and put bottom script in it , the codes run without error
export let MyContext=createContext();
export const MyContextConsumer = MyContext.Consumer
I know that the following snippet gets optimized if styles are created by Stylesheet.create() and Child extends PureComponent.
import React, { Component } from 'react'
import { View } from 'react-native'
import Child from './Child'
import styles from './stylesheets'
export default class Parent extends Component {
render() {
return (
<View>
<Child style={styles.x} />
</View>
)
}
}
Does it also works with multiple styles? I'm afraid that [] literals prevent optimization.
import React, { Component } from 'react'
import { View } from 'react-native'
import Child from './Child'
import styles from './stylesheets'
export default class Parent extends Component {
render() {
return (
<View>
<Child style={[styles.x, styles.y]} />
</View>
)
}
}
Or do I need to define combined style statically?
import React, { Component } from 'react'
import { View } from 'react-native'
import Child from './Child'
import styles from './stylesheets'
const childStyles = [styles.x, styles.y]
export default class Parent extends Component {
render() {
return (
<View>
<Child style={childStyles} />
</View>
)
}
}
I confirmed that array literal spoils PureComponent optimization.
When i run the code, i get this error:
invariant violation view config not found
index.js code is :
import { AppRegistry, Text, Image, View } from 'react-native';
import React, { Component } from 'react';
import main from './src/codes/main';
class app extends Component{
render(){
return <main/>;
}
}
AppRegistry.registerComponent('app', () => app);
main.js code is :
import React, { Component } from 'react';
import { Text, View } from 'react-native';
export default class main extends Component{
render(){
return (
<View>
<Text>Salam</Text>
</View>
);
};
}
please help
The component names must be capitalized as a syntax requirement in React Native.
index.js
import { AppRegistry, Text, Image, View } from 'react-native';
import React, { Component } from 'react';
import Main from './src/codes/main';
class App extends Component{
render(){
return <Main/>;
}
}
AppRegistry.registerComponent('App', () => App);
main.js
import React, { Component } from 'react';
import { Text, View } from 'react-native';
export default class Main extends Component{
render(){
return (
<View>
<Text>Salam</Text>
</View>
);
};
}
React fails to some weird error when importing another component. If I remove ChristmasMap references in App.js then app works fine. But I want to import the ChristmasMap. Any help?
App.js
import React, { Component } from 'react';
import './ChristmasMap';
class App extends Component {
render() {
return (
<div>
<p>asd</p>
<ChristmasMap />
</div>
);
}
}
export default App;
ChristmasMap.js
import React, { Component } from 'react';
class ChristmasMap extends Component {
render(){
return (
<div>
component
</div>
);
}
};
export default ChristmasMap;
And the error I'm getting is App.js:56 Uncaught ReferenceError: ChristmasMap is not defined(…)
You should do:
import ChristmasMap from './ChristmasMap'
I am trying to incorporate mobx with react. Since I spawned my application using create-react-app, I can't use decorators given by mobx.
Given that we can use mobx without decorators as per this documentation: https://mobxjs.github.io/mobx/best/decorators.html
Here's a component that I created:
import React, { Component } from 'react';
import observer from 'mobx-react';
export const TestComponent = observer(class TestComponent extends Component {
render() {
return <div>Just a test component!</div>
}
});
Here's a simple calling of the above component:
import React, { Component } from 'react';
import './App.css';
import Auth from './Auth'
import { TestComponent } from './Test'
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';
import authStore from './stores/Store'
class App extends Component {
constructor(props) {
super(props);
this.state = {
}
}
render() {
return (
<div className="app">
<MuiThemeProvider>
<div>
<TestComponent store={authStore} />
</div>
</MuiThemeProvider>
</div>
);
}
}
export default App;
Now when I run the above component, I get error: Uncaught TypeError: (0 , _mobxReact2.default) is not a function(…) nothing get displays in console.
What am I doing wrong here?
Please use import {observer} from 'mobx-react';
N.B. note that decorators can be used with create-react-app by using custom-react-scripts, as explained here)