I'm really new in react and I'm having problems with this:
I create a class and imported it into the App.js file, like this:
The class:
import React,{component} from "react"
class Begin extends component{
render(){
return(
<div>General Kenobi</div>
)
}
}
export default Begin;
then the App with the class imported:
import './App.css';
import Begin from './example'
function App() {
return (
<div className="App">
Hello there
<Begin />
</div>
);
}
export default App;
If I remove the I see on the browser the strip "Hello there", but when I put it, nothing is shown, not even the "Hello there"
I'm not quite sure what I'm doing wrong
Thanks in advance
React class component need to extend from Component class with capital letter C
import React, {Component} from "react"
class Begin extends Component{
render(){
return(
<div>General Kenobi</div>
)
}
}
export default Begin;
Related
I have a component that I want to show in another site.
components/Hello.js
import React from 'react';
export default class Hello extends React.Component {
render() {
return (
<div><p>Hello</p></div>
)
};
};
Now I want to import it into my site named "Profile.js".
pages/Profile.js
import React from 'react';
import Hello from '../components/Hello';
export default function Profile() {
return(
<div>
{/* Say hello*/}
{Hello}
</div>
);
}
What am I doing wrong? Why wont it say hello on my "Profile.js" page?
React syntax for rendering components is as follow :
export default function Profile() {
return(
<div>
{/* Say hello*/}
<Hello/>
</div>
);
}
In my components/ folder I have created two components:
using function-based components:
import React from 'react';
const greet = () => <div className="App"><h3>Hello Sukarna Jana</h3></div>;
export default greet;
using class-based-components:
import React,{Component} from 'react';
class welcome extends Component{
render(){
return <div className="App"><h3>Hi, its Class Components</h3></div>;
}
}
export default welcome;
but when I am trying to import that in App.js it's not running:
import './App.css';
import React from 'react';
import greet from './components/greet';
import welcome from './components/welcome';
/*
* dont know why greet and welcome tags are not working
*/
function App() {
return (
<div className="App">
<greet/>
<welcome/>
<h1>Hello Sukarna Jana</h1><hr/>
</div>
);
}
export default App;
I just reviewed the code and could find the issues easily,
You didn't keep the naming rules in your code.
<greet/> replace to <Greet/>
<welcome/> replace to <Welcome>
Also, you should change the name of the component.
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'm new in React Js don't judge me bad for it. I was writing some class to learn but unfortunately I can't export and import one of my class.
import React from "react";
class Yozuvla extends React.Component{
render(){
return(
<div>
<p>Ismingiz</p>
<p>Familyagiz</p>
</div>
);
}
}
export default Yozuvla;
Here is the second class which can't be imported
import React from "react";
import yozuv from "./components/Form";
class App extends React.Component{
render(){
return (
<div>
<yozuv/>
</div>
);
}
}
export default App;
yozuv class don't show up why.browser is white like snow
Classname should be in PascalCase,
import yozuv from "./components/Form";
this should be
import Yozuv from "./components/Form";
Usage
<Yozuv/>
When you add any element like <yozuv/> (starts with small letter), react takes it as a normal HTML tag and NOT a React Component.
import React, { Component } from 'react'
// make sure the location of file is the same for Yozuvla
import Yozuvla from'./components/Form'
class App extends Component {
render() {
return (
<div>
<Yozuvla/>
</div>
)
}
}
export default App;
tell me in commit it work or not
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.