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.
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.
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;
//created action.js,rootReducer called everything in index.js but having issue on same..
//getting issue:-
Error: Could not find "store" in the context of "Connect(Home)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(Home) in connect options.
//added rootReducer.js:-
import {combineReducers} from 'redux';
export default combineReducers({
})
//added action.js:-
export const helloRedux= () =>(dispatch:any)=>{
alert("Heloo Redux")
}
//added index.js:-
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Provider} from 'react-redux';
import { createStore, applyMiddleware} from 'redux';
import ReduxThunk from 'redux-thunk';
import rootReducer from './rootReducer';
const store = createStore(rootReducer, applyMiddleware(ReduxThunk))
const MyAppWithStore = () => (
<Provider store={store}>
<App />
</Provider>
);
ReactDOM.render(<MyAppWithStore />, document.getElementById('root'));
serviceWorker.unregister();
//added home.js:-
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { helloRedux } from '../services/action'
class Home extends Component {
render() {
console.log(this.props)
return (
<div>
<h1>home Component</h1>
<button onClick = {() => this.props.helloRedux()}>Click Me</button>
{/* <button onClick = {() => this.helloRedux()}>Click Me</button> */}
</div>
);
}
}
const MapDispachToProps = dispach =>({
helloRedux:()=> dispach(helloRedux())
})
const mapStateToProps= state=> {
{
}
}
const HomeCom =connect(
mapStateToProps,
MapDispachToProps
)(Home)
export default HomeCom;
//app.js
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Home from './component/home'
function App() {
return (
<div className="App">
<header className="App-header">
{/* <img src={logo} className="App-logo" alt="logo" /> */}
<Home />
</header>
</div>
);
}
export default App;
//created action.js,rootReducer called everything in index.js but having issue on same..
//getting issue:-
Error: Could not find "store" in the context of "Connect(Home)". Either wrap the root component in a <Provider>, or pass a custom React context provider to <Provider> and the corresponding React context consumer to Connect(Home) in connect options.
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"]
I'm making a website that have a functionality to change languages from the homescreen, I'm using Redux to handle the state.
I keep getting TypeError: Cannot read property 'connect' of undefined, and It seems to be from Home.js, I dont know why it happens!!, Please Help !!!
import React, { Component } from 'react';
import ReactRedux from 'react-redux';
import './Home.css';
import Navbar from '../../Reusable/Navbar/Navbar.js';
import Footer from '../../Reusable/Footer/Footer.js';
import Action from '../../Reusable/Action/Action.js';
import ProjectsCarousel from '../../Reusable/ProjectsCarousel/ProjectsCarousel.js';
import Getintouch from '../../Reusable/Getintouch/Getintouch.js';
import Header from './Header/Header.js';
import Info from './Info/Info.js';
import Whyus from './Whyus/Whyus.js';
import Testimonial from './Testimonial/Testimonial.js';
let actions = require('../../../actions');
class Home extends Component {
render() {
const content = this.props.content;
const switchLanguage = this.props.switchLanguage;
if (content){
return (
<div className="home">
<Action />
<Navbar data={content.page.menu} switchLanguage={switchLanguage}/>
<Header />
<Info data={content.page.home}/>
<ProjectsCarousel />
<Whyus />
<Testimonial />
<Getintouch />
<Footer />
</div>
)
} else {
return;
}
}
}
module.exports = ReactRedux.connect(
(state) => ({content: state.content}),
(dispatch) => ({switchLanguage: (lang) => dispatch(actions.switchLanguage(lang))})
)(Home);
export default Home;
That's because react-redux has only named exports.
change your import to:
import * as ReactRedux from 'react-redux';
which will import every named property to ReactRedux Object. or import it like:
import { connect } from 'react-redux';
export default connect(
(state) => ({content: state.content}),
(dispatch) => ({switchLanguage: (lang) => dispatch(actions.switchLanguage(lang))})
)(Home);