im a newone in react and I have tried this example but got an error, with no idea what the issue is.
i simply add a function component of HelloWorld and add it to the app component, but it does not execute.
please help.
App.js
import './App.css';
import welcome from './components/welcome';
import { Component } from 'react';
class App extends Component
{
render()
{
console.log('inside render of app');
return(
<div className="App">
<welcome></welcome>
</div>
);
}
}
export default App;
and
my own functional component, just like to add that I put this file inside the components folder
import React from 'react'
function welcome()
{
console.log("inside welcome.js function");
return <h1> Welcome Ashish </h1>
}
export default welcome
Your component names should begin with upper case letters.
From react docs
When an element type starts with a lowercase letter, it refers to a
built-in component like or and results in a string 'div'
or 'span' passed to React.createElement. Types that start with a
capital letter like compile to React.createElement(Foo) and
correspond to a component defined or imported in your JavaScript file.
use Welcome instead of welcome.
Final code
import React from 'react'
function Welcome()
{
console.log("inside welcome.js function");
return <h1> Welcome Ashish </h1>
}
export default Welcome
In react js our component name must be start with capital letters.
So there we rename componet welcome to Welcome.
import React from 'react'
function Welcome()
{
console.log("inside welcome.js function");
return <h1> Welcome Ashish </h1>
}
export default Welcome
and in App.js use
import './App.css';
import Welcome from './components/Welcome';
import { Component } from 'react';
class App extends Component
{
render()
{
console.log('inside render of app');
return(
<div className="App">
<Welcome></Welcome>
</div>
);
}
}
export default App;
Related
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.
I am new to react and what to understand why the console.log is called twice when inside of the render function ?
import React, { Component } from "react";
import "./App.css";
class App extends Component {
render() {
console.log("Prints twice in console");
return (
<div className="App">
</div>
);
}
}
export default App;
Where as if i dont extend from component and use function instead the console prints only once
import React from "react";
import "./App.css";
function App() {
console.log("prints once");
return <div className="App"></div>;
}
export default App;
Check your index.js in the ./src directory. I think it renders the App component in
<React.StrictMode>
Remove it and it will stop rendering the function twice.
Also you can check This
welcome.js
import React, { Component } from 'react'
class welcome extends Component
{
render()
{
return <h1>Class Component</h1>
}
}
export default welcome
App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Greet from './components/Greet'
import welcome from './components/welcome'
function App() {
return (
<div className="App">
<Greet />
<welcome />
</div>
);
}
export default App;
So basically in welcome.js i have a code for rendering hello rahul and i have exported that and i have imported that in App.js but it showing welcome is declared but never used please help
You have a problem with naming. React assumes every tag beginning with a small letter is native (f ex a <div> or <table>). You have to name your own components with capital letters.
App.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Greet from './components/Greet'
import Welcome from './components/Welcome'
function App() {
return (
<div className="App">
<Greet />
<Welcome />
</div>
);
}
export default App;
It's also a good idea to name your files with components with capital letters, to make them easy to identify.
You are importing a component in lower case letters. React doesn't recognize that as a component. So just restructure it as :
import Welcome from './components/Welcome'
then do
<Welcome/>
i've a component that i import, but its not displayed on the page.
this is my app.js file. i imported the <player/>component but it is not getting displayed properly on the browser.
import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import { player } from "./player";
class App extends Component {
render() {
return (
<div className="App">
<div>
<player />
</div>
</div>
);
}
}
export default App;
this is the contents of the player.js
import React from "react";
import { Button } from "evergreen-ui";
export default class player extends React.Component {
constructor(...args) {
super(...args);
this.state = {
shoot: 0
};
}
shoot() {
this.setState.shoot = Math.floor(Math.random() * Math.floor(3));
}
render() {
return (
<div>
<h1>hello there</h1>
<h1>{this.state.shoot}</h1>
<Button onClick={() => this.shoot}>Shoot another
value</Button>
</div>
);
}
}
In your code, you've exported your player component as a default export
export default class player extemds React.Component
But in your import of it in the other file, you're importing it as a named export
import { player } from "./player";
Try importing it without the curly braces as you would with a default export
import player from "./player";
You are doing two mistakes:
1. Importing the component in the wrong way
2. Rendering the component in the wrong way
Solution
The component should be imported without the curly braces
The react component "player" is supposed to start with capital letters i.e. it should be renamed as Player
Below is the working code I have tried in my local machine. It only modifies App.js
import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import Player from "./player"; // imported without curly braces and with capital first letter
class App extends Component {
render() {
return (
<div className="App">
<div>
<Player /> {/* Rendering the correct way */}
</div>
</div>
);
}
}
export default App;
Sidenote
In player.js, you are setting the state in the wrong fashion, it won't work because:
setState is a method and not a object
this is not binded with method shoot. It will throw error something like "cannot read this of undefined" or something
Modify your player.js as following:
import React from "react";
import { Button } from "evergreen-ui";
export default class player extends React.Component {
constructor(...args) {
super(...args);
this.state = {
shoot: 0
};
}
shoot = ()=>{
this.setState({
shoot: Math.floor(Math.random() * Math.floor(3)),
});
}
render() {
return (
<div>
<h1>hello there</h1>
<h1>{this.state.shoot}</h1>
<Button onClick={() => this.shoot()}>Shoot another
value</Button>
</div>
);
}
}
You have two main issues:
1) You export as default and then your import is wrong.
If you export as:
export default class player extemds React.Component
Then you need to import as:
import player from "./player";
2) Components must start uppercase, otherwise React thinks that they are simple HTML tags and not components.
So you must change player to Player everywhere
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!