I am building a React project with Vite. I was using a tutorial from an article that I found at https://www.digitalocean.com/community/tutorials/how-to-set-up-a-react-project-with-vite.
I followed the tutorial as described, however, my "greeting" component will not load.
import React from 'react';
function greeting() {
return (
<div>
Hello World!
</div>
);
}
export default greeting;
import React from 'react';
import greeting from "./greeting";
function App() {
return (
<main>
React⚛️ + Vite⚡ + Replit🌀
<greeting />
</main>
);
}
export default App;
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App";
const container = document.getElementById("root");
const root = createRoot(container);
root.render(
<StrictMode>
<App />
</StrictMode>
);
Components should start with capital letter .
import React from 'react';
function Greeting() {
return (
<div>
Hello World!
</div>
);
}
export default Greeting;
import React from 'react';
import Greeting from "./greeting";
function App() {
return (
<main>
React⚛️ + Vite⚡ + Replit🌀
<Greeting />
</main>
);
}
export default App;
React components have to start with a capital letter, or they will be compiled to a plain HTML tag.
See https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized
So your greeting function should be named Greeting, and change the tag in App() to <Greeting />
your component import name should use Capital Letter
ex : import Greeting from "./greeting";
Related
Im making a simple typescript project, but can't manage to solve the following error:
Compiled with problems:
ERROR in ./src/index.tsx 7:0-28
Module not found: Error: Can't resolve './App' in '/Projects/test/src'
Any suggestions??
Here's the files..
Home:
import React from "react"
export const Home = () => {
return (
<>
<div>
<p>Essa é a pagina home</p>
</div>
</>
);
};
export default Home;
App.tsx:
import React from 'react';
import { Home } from './pages/Home';
export function App() {
return (
<Home />
);
};
index.tsx:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import { App } from './App';
const ApplicationWrapper = () => {
return (
<App />
);
};
ReactDOM.render(
<React.StrictMode>
<ApplicationWrapper />
</React.StrictMode>,
document.getElementById('main'),
);
FILE STRUCTURE:
When the code is exported and with a default keyword, that means you only can import by using import Alias from './module'. If you want to import through Object Destructuring, it needs to export a Component or module without using the default keyword.
Last line of Home component.
export { Home };
When it needs to import.
import { Home } from './path-to-component';
you can export once at Home component like this:
import React from "react"
const Home = () => {
return (
<>
<div>
<p>Essa é a pagina home</p>
</div>
</>
);
};
export default Home;
Please check, App.tsx file should be in index.tsx folder. ie both files should be in /Projects/test/src folder.
I have the typical index.js that calls App.js
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
App.js
import './App.css';
import Test from './Components/test'
import Test1 from './Components/test1'
function App() {
return (
<Test/>,
<Test1/>
);
}
export default App;
When building App.js i wanted to render 2 components Test and Test1
When i run this code only one of the components gets rendered. In this case only Test1 is rendered. If i switch the order only Test is rendered
Is there any way that i can render 2 components?
You can only render one component, so an approach would be to wrap them in one. For example, in a React Fragment, like so:
import { Fragment } from 'react'
...
return (
<Fragment>
<Test />
<Test1 />
</Fragment>
)
Fragment is just a wrapper, it doesn't provide any functionality. Alternatively, you can wrap your components like so:
return (
<>
<Test />
<Test1 />
</>
)
The result would be the same.
You need to wrap this Test and Test1 into some wrap
import './App.css';
import Test from './Components/test'
import Test1 from './Components/test1'
function App() {
return (
<div>
<Test/>,
<Test1/>
</div>
);
}
export default App;
try this
function App() {
return (
<>
<Test />
<Test1 />
</>
)
}
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;
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.
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"]