Trying to split some HTML chunks by dividing the HTML in smaller pieces, located in the components folder. (I know, HTML is not really html, it is JSX).
The outcome I am trying to achieve is to have the imported component [Navigation] to render its content.
I do understand that there might be tools for the code splitting.
Question: Why doesnt the code render the div navigation content?
Navigation.js
import React from 'react';
export default function Navigation() {
return (
<div className="navigation">
<ul>
<li>
Google
</li>
</ul>
</div>
);
}
App.js
import React from 'react';
import './App.css';
import Navigation from './components/Navigation';
class App extends React.Component {
render() {
Navigation();
return (
<div>
Hello from component - Class!
</div>
);
}
}
export default App;
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
Your component is not rendering because u call de function outside the return statement.
For a component render, you need to return the component inside the
render function;
Example:
render () {
return <Component/>
}
When u call this:
render() {
Navigation(); // see, the navigation is outside the return statemente
return (
<div>
<p>Hello from component - Class!</P>
</div>
)
}
try this:
import React from 'react';
import './App.css';
import Navigation from './components/Navigation';
class App extends React.Component {
render() {
return (
<div>
<Navigation/>
<p>Hello from component - Class!</P>
</div>
)
}
}
export default App;
Related
I just started learning React but I can't for the life of me figure out how to link a new file to the App.jsx file. I've seen related questions but the setups are all quite different to mine. I used the default Vite template provided (for the most part). I've provided simple snippets of code below.
App.jsx code below:
import React from 'react'
import { useState } from 'react'
import './App.css'
import Pets from './components/Pets'
function App() {
return (
<div className="App">
<Animals/>
</div>
)
}
export default App
The page I'd like to link:
import React from 'react'
function Animals() {
return(
<div>
<h3>Pets for Africa</h3>
<ul>
<li>dogs</li>
<li>cats</li>
</ul>
</div>
)
}
export default Animals
The default main.jsx file which is part of the Vite template
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import './index.css'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App />
</React.StrictMode>
)
Change the default import's name to Animals
import React from 'react'
import { useState } from 'react'
import './App.css'
import Animals from './components/Pets'
function App() {
return (
<div className="App">
<Animals/>
</div>
)
}
export default App
This should work in your case.
Aren't you trying to import file Pets which has name Animals? If yes, simply rename the import Pets from './components/Pets' to import Animals from './components/Animals'
// -----App.js
import logo from './logo.svg';
import './App.css';
import Navbar from './components/Navbar';
import News from './components/News';
import NewsItem from './components/NewsItem';
function App() {
return (
<div>
<Navbar />
<News />
</div>
);
}
export default App;
// ----- News.js
import React, { Component } from 'react'
import NewsItem from './NewsItem';
export class News extends Component {
render() {
return (
<div>
<NewsItem />
</div>
)
}
}
export default News
//----- NewsItem.js
import React, { Component } from 'react'
export class NewsItem extends Component {
render() {
return (
<div>
NewItem component
</div>
)
}
}
export default NewsItem
I am new to react and trying to learn the basics.I tried to resolve the issue but couldn't find out the actual cause. I tried to search same issue over the internet but can't find any. All though the error msg is same but situation is different.
As you can see the NewsItem.js component is passed to News.js. Is it ok to pass a class component to another class component as a return type?
I'm getting the error as shown in img.
enter image description here
Try to remove export before defining the class
class News extends Component ...
class NewsItem extends Component ...
You are already default exporting it at the bottom
Hey Developers I am new to react js. I have made a react component named todos.js with arrow fuction in
./Components/todos.js
import React from 'react'
export const todos = () => {
return (
<div>
todos works!!!
</div>
)
}
this is how my app.js look like
import './App.css';
import Header from './Components/header';
import Footer from './Components/footer';
import { Todos } from './Components/todos';
function App() {
return (
<>
<Header></Header>
<Todos></Todos>
<Footer></Footer>
</>
);
}
export default App;
import { Todos } from './Components/todos'; I am importing the todos.js file this way. But when I import that component to my app.js it throws error saying
Attempted import error: 'Todos' is not exported from './Components/todos'.
First of all component name should be Capitalised.
Second use export default const Todos
It should be an export const Todos. The component name should be Capitalised it's a batter approach as react components.
Todos.js
import React from 'react'
export const Todos = () => {
return (
<div>
Todos works!!!
</div>
)
}
App.js
import './App.css';
import Header from './Components/Header';
import Footer from './Components/Footer';
import { Todos } from './Components/Todos';
function App() {
return (
<>
<Header />
<Todos />
<Footer />
</>
);
}
export default App;
I'm trying to create a React component for a navigation bar.
This component I'd like to import from a separate file into my App.js.
Currently, the component should just return a simple 'Hello world' paragraph, but I have trouble getting this to work.
I have written the following code into a file located at src/components/navbar.js:
import React from 'react';
export default class navBar extends React.Component {
render() {
return (
<p>Hello world.</p>
)
}
}
Now I'd like to import this component from my src/App.js, which looks like this:
import React, { Component } from 'react';
import './App.css';
import navBar from './components/navbar.js'
class App extends Component {
render() {
return (
<navBar/>
);
}
}
export default App;
If I compile and open the site, nothing's there, which confuses me.
I'd be very thankful for any help!
EDIT:
It's been suggested that the problem is that <App /> is not being rendered anywhere. I don't believe that's the case, since there's another file being created by default (index.js), which looks like this:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
I have also tried putting the paragraph (and the entire navbar) directly into src/App.js.
After compiling I could see the expected results in the browser, so the problem should lie with the exporting/importing.
In JSX, lower case tags are considered to be simple HTML/SVG elements. You can use lower case only if you use accessors (so with a dot like bla.blabla).
You can read about it here for example.
So in your case you must change the class name navBar to NavBar and then in the render method:
render() {
return (
<NavBar/>
);
}
Here is a full working example:
** Note: NavBar.js shoud start with a Capital letter.
App.js
import React from "react";
import ReactDOM from "react-dom";
import NavBar from "./components/NavBar";
function App() {
return (
<div className="App">
<NavBar />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
NavBar.js
import React from "react";
export default class NavBar extends React.Component {
render() {
return (
<div>
<p>Hello world.</p>
</div>
);
}
}
I have a ReactJS basic project which is working fine with the following two files (among others):
Header.js
import React from 'react'
const Header = () => (
<div>THIS IS A HEADER</div>
)
export default Header
App.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Header from './Header'
class App extends Component {
render() {
return (
<div>
<Header />
<div>
Hello World! This is the content.
</div>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'))
What I want to know is:
How can I reference the Header component with a custom tag, for example: <comp-header /> instead of: <Header />. Something like below:
App.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Header from './Header'
class App extends Component {
render() {
return (
<div>
<comp-header />
<div>
Hello World! This is the content.
</div>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'))
Any idea on how to do that?
Thanks!
You can simply
import CompHeader from './Header'
and use normally.
I don't think you can use a dash in JSX and JSX elements that are non native elements need to be capitalized.