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'

How to import a react component with arrow function to app.js

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;

ReferenceError: React is not defined for context

import './App.css';
import ComponentC from './components/ComponentC';
export const UserContext = React.createContext()
function App() {
return (
<div className="App">
<UserContext.Provider value={"deneme"}>
<ComponentC />
</UserContext.Provider>
</div>
);
}
export default App;
import React from 'react'
import ComponentE from './ComponentE'
function ComponentC() {
return (
<div>
<ComponentE />
</div>
)
}
export default ComponentC
import React from 'react'
import ComponentF from './ComponentF'
function ComponentE() {
return (
<div>
<ComponentF />
</div>
)
}
export default ComponentE
import React from 'react'
import { UserContext } from "../App"
function ComponentF() {
return (
<div>
<UserContext.Consumer>
{
user => {
return <div>User Context value {user}</div>
}
}
</UserContext.Consumer>
</div>
)
}
export default ComponentF
I have error ReferenceError: React is not defined, I don't understand why I am so new in react.js
so i need some help.
Thanks.

You need to actually pull in the React library somehow, with script tags in your HTML page, such as
<script src="https://unpkg.com/react#17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#17/umd/react-dom.development.js"></script>
I'd suggest reviewing the doc's here: https://reactjs.org/docs/getting-started.html#try-react, for suggestions getting started & getting going.

Please import React element from react like
import './App.css';
import React from 'react'; // add line here
export const UserContext = React.createContext();
function App() {
return (
.....
);
}
export default App;

You forgot to add import React from 'react'; at the top thus the error.

React jest - You should not use <Link> outside a <Router>

I have a super simple react app like so.
index.tsx
App.tsx
Main.tsx
Home.tsx
index.tsx
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter as Router } from "react-router-dom";
import { ApolloProvider } from "react-apollo";
import client from "./utils/client";
ReactDOM.render(
<Router>
<ApolloProvider client={client}>
<App />
</ApolloProvider>
</Router>,
document.getElementById('root')
);
App.tsx
import React from 'react';
import Main from "./Main";
function App() {
return (
<Main />
);
}
export default App;
Main.tsx
import React from 'react';
import { Switch, Route, Link } from "react-router-dom";
import Home from "./Home";
const Main:React.FC = () => {
return (
<div>
<Switch>
<Route exact path='/' component={Home} />
</Switch>
</div>
);
};
export default Main;
Home.tsx
import React, {useContext} from 'react';
import { Link } from "react-router-dom";
const Home:React.FC = () => {
return (
<div>
<h1>Home</h1>
<Link to='http://google.com'> Google</Link>
</div>
);
};
export default Home;
I have an App.test.tsx with a dummy test just to run it.
import React from 'react';
import { render, screen } from '#testing-library/react';
import App from './App';
test('renders learn react link', () => {
render(<App />);
expect(true).toBeTruthy
});
If I run the test with yarn test
I get an error:
Invariant failed: You should not use <Link> outside a <Router>
The Link I have is in Home.tsc which is surrounded by <Router> in index.tsx
I'm I doing something work here.
The app runs without any errors.
This error only appears when I run the test

There are two solutions below, the first is to add <Router> component into your test case. The second option is to switch from <Link> to a simple anchor tag.
Option 1:
You can add <Router> component into your test also, so it won't missing there as:
test('renders learn react link', () => {
render(<Router>
<App />
</Router>);
expect(true).toBeTruthy
});
Option 2:
Also you can change from <Link> component to a simple anchor tag because it creates the same end result based on your code from:
<Link to='http://google.com'> Google</Link>
To the following in <Home> component:
Google
Then at the end you can keep your original test case.

TypeError: pokemon.map is not a function

I've just started to learn react, I am trying to build a react app with the pokemon api and got the following error: TypeError: pokemon.map is not a function, I am not sure why the .map is not a function in js, does it have something to do with my extensions or the code below? Please help, thank you in advance!
App.js
import React, { useState } from 'react';
import PokemonList from './PokemonList'
function App() {
// eslint-disable-next-line
const [pokemon, setPokemon] = useState("pokemon-1", "pokemon-2")
return (
<PokemonList pokemon={pokemon}/>
);
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
PokemonList.js
import React from 'react';
export default function PokemonList ({pokemon}) {
return (
<div>
{pokemon.map(p =>(
<div key={p}>{p}</div>
))}
</div>
);
}
Pagination.js
import React from 'react';
export default function Pagination() {
return (
<>
</>
);
}

You probably meant to make the default value of the pokemon be an array
const [pokemon, setPokemon] = useState(["pokemon-1", "pokemon-2"])
Notice the square brackets around the two string values ["pokemon-1", "pokemon-2"]