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)
Related
I'm building a React-Django application, and on my App component, I'm getting an issue on the final line with my render(<App />, appDiv).
Please can someone tell me what I'm doing wrong? I have the necessary modules imported, and this worked on my previous project. I am aware that Function-based components are better, but I'm more experienced with Class-based.
Error:
Code:
import React, { Component } from "react";
import { render } from "react-dom";
import HomePage from "./HomePage";
export default class App extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div className="center">
<HomePage />
</div>
);
}
}
const appDiv = document.getElementById("app");
render(<App />, appDiv);
Thanks,
DillonB07
TypeError expanded:
Try to replace:
import { render } from "react-dom";
with
import ReactDOM from "react-dom";
And use ReactDOM.render instead of just render
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 am currently having a problem getting store to be passed in as a prop and am wondering what to label a few things.
The current error is within create store, I'm unsure what to do with it.
I have tried other methods and only want to use the store method where I pass it in as a prop
import React from 'react';
import { MockGit } from './Constants';
import ExpansionPanelSummary from '#material-ui/core/ExpansionPanelSummary';
import ExpansionPanelDetails from '#material-ui/core/ExpansionPanelDetails';
import Typography from '#material-ui/core/Typography';
import ExpandMoreIcon from '#material-ui/icons/ExpandMore';
import ExpansionPanel from '#material-ui/core/ExpansionPanel';
import Button from '#material-ui/core/Button';
import TestAPI from './TestAPI';
import { displayGitData, userInfoURL, getDataSaga } from '../sagas/sagas';
import { createStore } from 'redux';
class GitData extends React.Component {
constructor(props) {
super(props);
}
render() {
const store = createStore(...); //this is what im unsure of.
const { store } = this.props;
return (
<ExpansionPanel>
<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
<Typography> {MockGit} </Typography>
</ExpansionPanelSummary>
<ExpansionPanelDetails>
{displayGitData()}
{userInfoURL()}
{getDataSaga()}
<TestAPI />
</ExpansionPanelDetails>
</ExpansionPanel>
);
}
}
export default GitData;
The goal is to get store passed in as a prop with no errors.
Any help would be great, Thanks!
You're doing it wrong, here's the recommended way to use React with Redux:
store.js
import { createStore } from 'redux';
export default createStore(...)
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store.js'
const App = () => (<h1>Hello from App</h1>);
ReactDOM.render(
<Provider store={store}><App/></Provider>
document.querySelector('#react-root')
);
You now have an app that is bound with the store.
The react-redux npm package allows also to bind component props to store dispatches and store state, example:
my-component.js
import React from 'react';
import { connect } from 'react-redux';
class MyComponent extends React.Component {
render() {
return (
<p>{this.props.hello}</p>
)
}
}
export default connect(state => ({hello: state.helloReducer.value}))(MyComponent)
For further tutorials, check the official docs of react-redux, or this good youtube playlist.
I'm experimenting with meteor 1.5 and react 15.6.1.
/client/main.js
import React from 'react';
import { render } from 'react-dom';
import { Meteor } from 'meteor/meteor';
import App from '../imports/app';
Meteor.startup(() => {
render(<App />, document.getElementById('root'));
});
This is the App component:
//imports/app.js
import React, {Component} from 'react'
import Message from './message'
export default class App extends Component {
constructor(props){
super(props);
}
render(){
return(
<Message message="Hello Cowboys" />
)
}
}
And this is my Message dumb component:
// /imports/message.js
import React from 'react';
const Message = (props) =>
<p>{this.props.message}</p>;
export default Message;
The Error I receive is: Uncaught TypeError: Cannot read property 'message' of undefined.
Do you have any Idea why i am receiving this error ?
In stateless component you should do this :
import React from 'react';
const Message = (props) =>
<p>{props.message}</p>;
export default Message;
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'