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!
Related
I am calling two components Welcome and Datecomp. But when I run, Welcome component is not displaying but Datecomp component alone is displaying.
I am calling two components Welcome and Datecomp. But when I run, Welcome component is not displaying but Datecomp component alone is displaying.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Welcome,{DateComp} from './Welcome';
ReactDOM.render(<Welcome/>,document.getElementById('root'));
ReactDOM.render(<DateComp/>,document.getElementById('root'));
Welcome.js
import React, { Component } from 'react';
class Welcome extends Component {
render(){
return(
<div>
<h1>Welcome User</h1>
<p>What is React? React is a declarative,efficient, and flexible
JavaScript library for <br />
building user interfaces. It lets you compose complex UIs
from small and <br />isolated pieces of code called "components".
</p>
</div>
);
}
}
class DateComp extends Component {
constructor(){
super()
var today = new Date(),
date = today.getDate()+'/'+(today.getMonth()+1)+'/'+today.getFullYear();
this.state={
currentDate:date
}
}
render(){
return(
<div style={{float: "right"}}>
Dated:
{this.state.currentDate}
</div>
);
}
}
export default Welcome;
export {DateComp};
Issue
ReactDOM.render(<DateComp/>,document.getElementById('root')); stomps on what was rendered into #root div by ReactDOM.render(<Welcome/>,document.getElementById('root'));. You can only render one React app per DOM node.
Solution
Render each into different DOMNodes, two React apps. (Probably not what you want).
import React from 'react';
import ReactDOM from 'react-dom';
import Welcome, {DateComp} from './Welcome';
ReactDOM.render(<Welcome/>, document.getElementById('root1'));
ReactDOM.render(<DateComp/>, document.getElementById('root2'));
Render each into a single node, single React app.
import React from 'react';
import ReactDOM from 'react-dom';
import Welcome, {DateComp} from './Welcome';
ReactDOM.render(
<>
<Welcome/>
<DateComp/>
</>,
document.getElementById('root'),
);
You can't do that, you are replacing what's inside of root element, so only the last component will display which is <DateComp/>. Use component composition. sth like this.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Welcome,{DateComp} from './Welcome';
ReactDOM.render(<App/>,document.getElementById('root'));
app.js
const App = () => {
return (<div>
<Welcome/>
<Datacomp/>
</div>)
}
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;
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 am using React create app and I understand how to import a component into my main app which is called app.js.
What I do not understand is how I import a component in a component which is then imported in app.js (nested component).
In my app.js file, I have a component called Portfolio. In my portfolio.js file, I have a component called Language. Is it even possible to nest components with React create app? Because it does not seem to work.
This is what I tried to do:
In my app.js file :
import React from "react";
import logo from "./logo.svg";
import "./App.css";
import Portfolio from './components/portfolio';
import "./css/styles.css"
function App() {
return (
<div className="App">
<header>
<h1>My beautiful title</h1>
</header>
<Portfolio />
</div>
);
}
export default App;
In my portfolio.js file :
import React, {Component} from 'react';
import Language from './components/language';
class Portfolio extends Component {
render() {
return (
<div className="portfolio">
<Language/>
<h1>My protfolio</h1>
</div>
);
}
}
export default Portfolio;
And in language.js I have:
import React, {Component} from 'react';
class Language extends Component {
render() {
return(
<div>Switch language</div>
);
}
}
export default Language;
In my browser, I keep getting the following error:
"./src/components/portfolio.js Module not found: Can't resolve
'./components/language' in
'C:\Users\mluce\exercice-react\src\components'"
My language.js file is definitely sitting in my components folder. I do not understand why I get this error?
In portfolio.js:
import Language from './language';