I am trying to set up a basic example of react, this is my code to show the page
import React from "react";
import { render } from "react-dom";
class App extends React.Component {
render() {
return (
<div>
<h1>Hello!</h1>
</div>
)
}
}
render(<App/>, Window.document.getElementById('app'));
and am getting the error:
SyntaxError: Unterminated JSX contents (22:13)
render(< App/>, window.document.getElementById('app'));
No need to use window
Simply write
render(<App/>, document.getElementById('app'));
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
react Create components to prompt errors
This is the code.
import {React,PureComponent} from 'react';
export default class chainRefeshTool extends React.PureComponent {
render() {
return (
<div>
<h1>Hello World!</h1>
</div>
);
}
}
我想输出hello word! 但是页面报错
I want to output Hello word! But the page is wrong.
报错信息如下The error information is as follows:
./src/pages/BackStage/ChainRefeshTool/index.js
Line 4: Your render method should have return statement react/require-render-return
Line 5: Expected an assignment or function call and instead saw an expression no-unused-expressions
Line 5: Missing semicolon semi
Search for the keywords to learn more about each error.
There's nothing wrong with your code, but your import statement is incorrect; it should be:
import React, { PureComponent } from 'react';
Then you can simply extend PureComponent instead of React.PureComponent:
import React, { PureComponent } from 'react';
export default class chainRefeshTool extends PureComponent {
render() {
return (
<div>
<h1>Hello World!</h1>
</div>
);
}
}
There's also nothing wrong with just using the default React export:
import React from 'react';
export default class chainRefeshTool extends React.PureComponent {
render() {
return (
<div>
<h1>Hello World!</h1>
</div>
);
}
}
The problem here is with you import statement. It should be as follows
import React, { PureComponent } from 'react';
Moreover, when you are extending PureComponent it should be like this:
export default class chainRefeshTool extends PureComponent {
This is because you already imported PureComponent as named export from react.
That's why no need to use React.PureComponent while extending.
React project can't detect any change in app.js file
This is my app.js file:
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<h1>I'm a react app!</h1>
</div>
);
}
}
export default App;
This is the result
Try putting the text I'm a react app! inside a div.
class App extends Component {
render() {
return (
<div>I'm a react app!</div>
);
}
} export default App;
You probably need to use ReactDOM to help tell app where to render your component. For instance, if you create a div in your HTML like <div id="root"></div>, then you could use the following code:
import React, {
Component
} from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
render() {
return (
<div>I'm a react app!</div>
);
}
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Also note that when you return your render, the result should be wrapped in a single tag.
I'm quite new to React and after trying for some long hours I haven't been able to add a component inside the main app js
I created my boilerplate with create-react-app
In the main app.js I have:
import React, {Component} from 'react';
// import logo from './logo.svg';
import casa_mini from './casa_mini';
import './App.css';
class App extends Component {
render() {
return (<casa_mini></casa_mini> );
}
}
export default App;
And in the casa_mini.js I have:
import React, {Component} from 'react';
class casa_mini extends Component {
render() {
return (
<div className="listing-box">
<div className="listing-box-image" style={{backgroundImage: 'url("assets/img/casa1.jpg")'}}>
</div>
</div>
);
}
}
export default casa_mini;
Why its not rendering anything? the HTML of casa_mini doesn't appear.. blank page.. Thanks for the help!
Thanks for some fast answers.. the problem is the capital letter of the component..
index.js: Warning: The tag <casa_mini> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
It should be capitalized!
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'