We Keep Coding

React Vite - How do I link a different page in React?

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'

Class constructor not getting called

I have a function ChartWrapper and a class called LineChart.
All the code:
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(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
App.js ->
import React, {useRef, useEffect, useState, Component} from 'react';
import './App.css';
import ChartWrapper from './ChartWrapper'
class App extends Component {
render() {
return (
<div id="app">
<ChartWrapper />
</div>
)
}
}
export default App;
ChartWrapper.js ->
import React, {Component, useEffect} from 'react';
import { useRef } from 'react';
import LineChart from './LineChart'
function ChartWrapper() {
const svgRef = useRef();
console.log("works");
useEffect( () => {
const chart = <LineChart parent = {svgRef} />
console.log(chart);
}, []);
return (
<svg ref={svgRef}>
</svg>
);
}
export default ChartWrapper;
LineChart.js ->
import React, {Component} from 'react'
import {scaleLinear} from 'd3-scale'
import {max} from 'd3-array'
import {select} from 'd3-selection'
class LineChart extends Component {
constructor (props) {
super(props);
this.svg = select(props.parent);
console.log("does this work");
console.log(this.svg);
}
}
export default LineChart;
The ChartWrapper function creates a LineChart object and passes a const as a prop. To check if the code is working, I have print statements. For some reason, the print statements in ChartWrapper work fine. The print statements in LineChart constructor class however do not.
Am I missing something?

What you get in return when you log chart to the console is just an object representing the component, like this:
If you look at the type, it specifies the function/class to call. The class is only instantiated when it's rendered.
And the chart component is not returned, therefore react does not render it.

you need to call the render method for LineChart

How to solve import error after npm start

Just started using react and i am following a tutorial. I have the same code as him but i am getting the following error.
./src/index.js
Attempted import error: './components/App' does not contain a default export (imported as 'App')###
Here are my index and component file.
my index.js file
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
ReactDOM.render(
<App/ >,document.getElementById('root')
)
my App.js
import React, {Component} from 'react';
class App extends Component {
render(){
return(
<div>Ageteller Component</div>
)
}
}

You need to export your App component.
Under the component put export default App
It should look like:
import React, {Component} from 'react';
class App extends Component {
render(){
return(
<div>Ageteller Component</div>
)
}
}
export default App

export the App Component
Try following
import React, {Component} from 'react';
export default class App extends Component {
render(){
return(
<div>Ageteller Component</div>
)
}
}

Error on compiling in React application

Element type is invalid: expected a string (for built-in components)
or a class/function (for composite components) but got: object. You
likely forgot to export your component from the file it's defined in,
or you might have mixed up default and named imports.
Check the render method of App.
//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.css';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
registerServiceWorker();
//App.js
import React, { Component } from 'react'; //import logo from
'./logo.svg'; import './App.css';
import HeaderComponent from
'./Components/HeaderComponent/HeaderComponent';
import FooterComponent from './Components/FooterComponent/FooterComponent';
import Main from './Components/Main/Main';
const App = () => {
return(
<div>
<HeaderComponent />
<Main />
<FooterComponent />
</div> ) }
export default App;

I think the error is very clear, one of your imports is not importing a valid react component.
To fix this, make sure all your imports are exporting a react component, either a class or a function for stateless components.
you might have something like the following for each component.
export default HeaderComponent extends Component { ... }
export default Main extends Component { ... }
export default FooterComponent extends Component { ... }

how to render a react component using ReactDOM Render

_Header (cshtml)
<div id="Help"></div>
export default class Help {
ReactDOM.render(
<Help/>,
document.getElementById('Help')
);
}
Help.js (component)
}
My goal is to render a help button on header.
I've Created div tag with id help-modal , and a
component rendering help button. I am connection those two in help.js
by ReactDOM.render(.........);
when I do npm run dist and dotnet run , and see the browser
I couldn't see the button on header . Can any one help on this please ??

You are calling ReactDOM.render within a React component that doesn't get rendered.
Call ReactDOM render outside of the class definition for help
To render your button to the screen:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButton';
class Help extends Component {
render() {
return (
<div>
<RaisedButton label="Help"/>
</div>
);
}
}
ReactDOM.render(
<Help />,
document.getElementById('Help-modal')
);
That's it.
To avoid confusion should try and give your components meaningful names. Naming both of them Help can get confusing when you are trying to import one into another (which in this case isn't necessary).
If you indeed wanted to nest the Help component in an app.js/index.js root level component, it would be necessary to export the element, so the class declaration line would be modified as follows:
export default class Help extends Component {
then in your parent component, you'd need to import it with something like:
import Help from './components/Help';
UPDATE:
just noticed there was a type with:
import RaisedButton from 'material-ui/RaisedButon';
it's missing a 't' in RaisedButton!
should be:
import RaisedButton from 'material-ui/RaisedButton';

You need to export the Help Component
Help.js
import React, { Component } from 'react';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import RaisedButton from 'material-ui/RaisedButon';
class Help extends Component {
render() {
return (
<div>
<RaisedButton label="Help"/>
</div>
);
}
}
export default Help;
And no need to create a React Component to render the HelpComponent
Helppage.js
import HelpComponent from '../components/Help';
import ReactDOM from 'react-dom';
ReactDOM.render(
<HelpComponent/>,
document.getElementById('Help-modal')
);