Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I am a react beginner learner. I do try to create the first project in react. But I can not output my project.
My react index.js is:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
App.js is:
import react from 'react';
import heard_title from './component/heard_title'
export default function App() {
return (
<div>
<test />
<heard_title />
</div>
);
}
my component is
import React from 'react'
export default function heard_title() {
return (
<div>
<h1>hi</h1>
</div>
)
}
But when the project is run why I can not show output hi?
First of all you should share file structure of your app so that we can understand the work flow of imports in your app.
for example
--- project
-- src
- App.js
- index.js
-- components
- heard_title.js
Once check your imports "components" or "component" directory name
You are violating one of React protocols!
Warning: <heard_title /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.
To achieve your goal, update your App.js like below:
import react from 'react';
import HeardTitle from './component/heard_title'
export default function App() {
return (
<div>
<Test />
<HeardTitle />
</div>
);
}
Related
When I try to access the relevant component under app.js, I get the error "WARNING in [eslint] rc\App.js Line 2:8: 'personAdd' is defined but never used no-unused-vars". When I run the project, I see tags in the form of in html, but the component does not appear on the screen. I have included the codes below. Thanks in advance.
Note : Changes under .eslintrc.json didn't work.
App.js
import React from 'react';
import personAdd from './screens/personAdd';
function App() {
return (
<personAdd />
)
}
export default App;
personAdd.js
import React from 'react';
class personAdd extends React.Component{
render(){
return(
<div id = "personAdd">
<h1>Kullanıcı Bilgileri</h1>
<form>
<label htmlFor="id">Ad</label>
<input id="id"/>
<button>Add</button>
</form>
</div>
)
}
}
export default personAdd;
index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
//import personAdd from './screens/personadd';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
/*const personadd = ReactDOM.createRoot(document.getElementById('personadd'));
personadd.render(
<React.StrictMode>
<personAdd />
</React.StrictMode>
);*/
You don't need to manually create new root elements for every component you want to render.
React inserts an initial element 'root' into the DOM so that the app can render within that.
Try removing:
/*const personadd = ReactDOM.createRoot(document.getElementById('personadd'));
personadd.render(
<React.StrictMode>
<personAdd />
</React.StrictMode>
);*/
If you want to render your personAdd component you can add it as a child of App as you've already done.
function App() {
return (
<personAdd />
)
}
The other reason you're getting these issues is because you're not using Pascal case when naming your components (PersonAdd).
function App() {
return (
<PersonAdd />
)
}
In addition as others have mentioned, stick to function components rather than class components.
I'd recommend having a look at the React Beta Docs which now do everything with functional components. There are helpful walkthroughs on there that should help you out.
As #evolutionxbox said. Try naming the component with UpperCamelCase. It's used to specify a React element
https://reactjs.org/docs/jsx-in-depth.html#specifying-the-react-element-type
Also, it is now common to create components as functions and not Classes. Of course it's up to you if you do prefer classes.
https://reactjs.org/docs/components-and-props.html#rendering-a-component
I have a project using react-router v6, and I am getting an error stating useNavigate() may be used only in the context of a <Router> component.
For some background, I have two projects that live in the same repo and get built together. We leverage code splitting and import them as needed, not sure if this matters.
Now, I have a setup that is pretty simple:
(in the #dummyInc/components project)
Dummy.tsx
import React from 'react'
export function Dummy() {
const navigate = useNavigate()
return <div> Hello World <button onClick={() => navigate('/someRoute')}> </div>
}
Then my code uses it in a different project that is just imported.
(in the #dummyInc/site project)
App.js
import React from 'react'
import Dummy from '#dummyInc/components'
export function App() {
return <div> <Dummy /> </div>
}
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import App from './src/App'
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
)
Now I have the above and when I try to render it in the browser, it says the following, but I'm not sure how that's possible, it's being rendered in that context.
Error: useNavigate() may be used only in the context of a <Router> component.
Am I missing something? Any help is appreciated.
`× Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer
(such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app`
I am new to react so this means I just follow tutorials from the internet and I'm trying to make a sidebar for my project. This sidebar is consist of a search box which includes a search icon from material-ui. After I install the #material-ui/icons and #material-ui/core and imported them to the javascript file (sidebar.js) that I'm working, this error pops-up. However, this invalid hook call says that the problem occurs at my other file (index.js) pointing at a line of code that starts with ReactDom.render( , although the react and react-dom are in the same version. This is the code from my sidebar.js:
import React from "react";
import SearchIcon from '#material-ui/icons/Search'
const Sidebar = () => {
return (
<div className="sidebar">
<div className="sidebar__header">
<div className="sidebar__search">
<SearchIcon className="sidebar__searchIcon"/>
<input placeholder="Search" className="sidebar__input"></input>
</div>
</div>
<div className="sidebar__threads"></div>
<div className="sidebar__bottom"></div>
</div>
)
}
export default Sidebar
And this is my code from the index.js
import React from "react";
import ReactDom from 'react-dom';
import './index.css';
import App from './App';
import { store } from './app/store';
import { Provider } from 'react-redux';
ReactDom.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
while I tried to run my react-redux app using npm start it shows Attempted import error: 'store' is not exported from './app/store'.. error is in my index.js file.
this is my store.js file
store.js
import { configureStore } from '#reduxjs/toolkit';
import counterReducer from '../features/counterSlice';
export default configureStore({
reducer: {
counter: counterReducer,
},
});
this is my index.js file
index.js
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { store } from './app/store';
import { Provider } from 'react-redux';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();```
[1]: https://i.stack.imgur.com/F1e6q.png
Use this instead:
import store from './app/store';
This is because in your app/store you are using export default on the object.
Objects that are exported by default, do not need to be specified within curly braces.
Read the top of this documentation to see various syntax styles.
If you were to export another object from the app/store file, then you'd have to specify it in the following way:
import store, { anotherObj } from './app/store';
You've got mismatched imports and exports.
store.js is doing a default export:
export default configureStore()
But index.js is doing a named import:
import { store } from './app/store';
You need to use the same pattern on both sides. Either export default configureStore() and import store, or export const store = configureStore() and import {store}.
Your import in index.js file for the store.js should be like:
import store from './app/store.js'; (Changes according to your file structure).
But do not use brackets.
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 years ago.
Improve this question
All pages in my app render perfectly. I've just added another page called the Lightning page which looks like this:
import React from 'react'
class LightningPage extends React.Component{
render(){
return(<h1>Hello!</h1>)
}
}
export default LightningPage;
I then have an index.js file which has the following:
export { deafult as LightningPage } from './LightningPage.js'
I then import it into my App.js like so:
import React, { Component } from 'react';
import './App.css';
import { Header } from './header'
import { Route, Switch } from 'react-router'
... Import other page components ...
import { LightningPage } from './lightning'
const contentDivStyle = {
padding: "1rem"
}
class App extends Component {
render() {
return (
<div>
<Header />
<div id='content' style={contentDivStyle}>
<Switch>
<Route exact path="/lightningCounter" component={LightningPage} />
<Route exact path="/" component={Home} />
... Other routes ...
</Switch>
</div>
<Footer />
</div>
)
}
}
export default App;
For clarity my folder structure is:
/src
--/lightning
----index.js
----LightningPage.js
... Other Component folders ...
--App.js
When I view '.../lightningCounter' in my browser I see nothing and from the react developer console I can see that the component prop for Route is undefined. If I change the component to another (eg. Home) it displays. If I move my LightingPage component into the src/ root and modify the import ({ LightningPage } => LightningPage) it works aswell. What am I doing wrong here?
I used the create-react-app and the included npm scripts. Production build does not differ from development.
In the index.js file:
export { deafult as LightningPage } from './LightningPage.js'
Should be:
export { default as LightningPage } from './LightningPage.js'