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';
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>)
}
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.
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 learning to develop a multi-page app with React Router. I have been following a tutorial and have managed to set up multiple page without any content. However, I want to add the original main content of the home page that was originally running properly before I used react-router. If I delete the code that is in the div called App, I have added in Home.js, then I can go back to switching between blank pages with no errors:
import React from 'react';
//import "./App.css";
import List from "./List";
import Title from "./Title";
import Ending from "./Ending";
import MoviePage from "./MoviePage";
const home = () => {
return (
<div className="App">
<Title pics={this.state.pics} changePageNumber={this.changePageNumber}/>
<List parentCallback={this.loadMoviePage} movieList={this.state.movieList}/>
<Ending toad={this.state.toad} speedUp={this.state.speedUp}/>
</div>
);
}
export default home;
So I know that I am not able to access the content from this.state.pics.(Nor the other 3 components). I created this content(and by content I mean the arrays that have the general information, i.e image location, etc). in App.Js so I am wondering how can I pass it in to this new Home.js file?
You can not access state in stateless component , if you need some data from another component you need to pass it as props from parent to children , just to show you i just make an example of your code follow it, you will get it
App.js
import React from 'react';
import Home from "./Home";
class App extends Component {
constructor() {
super();
this.state = {
pics: YourArrayDataHere,
};
}
render () {
return (
<Home pics={this.state.pics} />
);
}
export default App;
Home.js
import React from 'react';
//import "./App.css";
import List from "./List";
import Title from "./Title";
import Ending from "./Ending";
import MoviePage from "./MoviePage";
const home = (props) => { //access throught props
return (
<div className="App">
<Title pics={props.pics} />
</div>
);
}
export default home;
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!