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>
)
}
}

Why I can not use exported routes in index.js

I receive an error.
React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined
I am trying ti use riutes from import in Index.js
import React from 'react';
import ReactDom from 'react-dom';
import routes from './routes.js';
import { HashRouter as Router, Route, IndexRoute } from 'react-router-dom';
const renderApp = (appRoutes) => {
ReactDom.render(appRoutes, document.getElementById('app'));
};
renderApp( routes() );
I export this routes from routes.js
import React from 'react';
import { AppContainer } from 'react-hot-loader';
import { BrowserRouter as Router, Route, browserHistory, IndexRoute } from 'react-router-dom';
import App from './components/App';
const routes = () => (
<AppContainer>
<Router history={browserHistory} component={App}>
</Router>
</AppContainer>
);
export default routes;

You probably want to call routes:
renderApp( routes() );

Enzyme/Jest Testing Error - Invariant Violation: Target container is not a DOM element

I'm new to doing unit testing and I keep getting the error: Invariant Violation: Target container is not a DOM element. I think it has to do with the way my app.js is structured because it keeps referencing this line ReactDOM.render(, document.getElementById('app'));. Here's how it's structured now:
import React from 'react';
import ReactDOM from 'react-dom';
import HomePage from './HomePage';
class App extends React.Component {
render() {
return (
<div>
<HomePage />
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('app'));
Does this need to be restructured for testing purposes?

You should separate between the two parts of the file, the Component declaration & mounting into the Dom via ReactDom.
The ReactDom has nothing todo with tests.
import React from 'react';
import ReactDOM from 'react-dom';
import HomePage from './HomePage';
// App.jsx
import React from 'react';
import HomePage from './HomePage';
export class App extends React.Component {
render() {
return (
<div>
<HomePage />
</div>
)
}
}
// index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import {App} from './App';
ReactDOM.render(<App />, document.getElementById('app'));