Hi guys I'm new to Reactjs, I can run <h1>Hello World </h1> in App.js. But when I use <Container></Container> in Reactstrap even though I have done all the imports, I get a blank page in the browser. App.js is not rendered when I use <Container></Container>.I am not getting any errors either.
App.js => rendered
import React, { Component } from 'react';
import { Container, Row } from 'reactstrap';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<h1>Hello World</h1>
</div>
);
}
}
export default App;
App.js => not rendered
import React, { Component } from 'react';
import { Container, Row } from 'reactstrap';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<Container>
<h1>Hello World</h1>
</Container>
</div>
);
}
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import 'bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(
<App />,
document.getElementById('root')
);
package.json
{
"name": "test-react-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap": "^5.1.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "0.9.5",
"reactstrap": "^9.0.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
Hey here it looks like react-scripts is low version.I upgraded it to 4.0.0 and added the following in package.json
,
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
Problem solved, thank you.
Related
I'm developing a React frontend with react-bootstrap. React is working fine, but when I use any react-bootstrap component in any page, Chrome just shows a fully blank page.
I think the problem might be in the index.html. I have this in the <head> tag, but no alert showing, I'm not sure if it should.
<script src="https://unpkg.com/react/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react-bootstrap#next/dist/react-bootstrap.min.js"></script>
<script>var Alert = ReactBootstrap.Alert;</script>
Anyway, here's all the other code I consider relevant:
This is my index.js:
import React from 'react';
import {createRoot} from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './index.scss';
import App from './App';
import reportWebVitals from './reportWebVitals';
const rootElement = document.getElementById('root');
const root = createRoot(rootElement);
root.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>
);
reportWebVitals();
This is my App.js working fine, Chrome shows the text:
import React from 'react';
export default function App() {
return (
<div className="App">
<p>This is some text.</p>
</div>
);
}
This is my App.js not working. It doesn't give any error, just a completely blank page, not even the text shows.
import React from 'react';
import { Button } from 'react-bootstrap';
export default function App() {
return (
<div className="App">
<p>This is some text.</p>
<Button variant="primary" type="button" value="Input" />
</div>
);
}
This happens with any bootstrap component, not only the Button (I've tried a few). I'm new to React, so any kind of help is welcome.
EDIT: Here's a screenshot of the Chrome console when the blank page problem happens.
EDIT 2: Here's my package.json:
{
"name": "asignacionesfrontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^12.1.4",
"#testing-library/user-event": "^13.5.0",
"bootstrap": "^5.1.3",
"http-proxy-middleware": "^2.0.4",
"jest-editor-support": "^30.0.2",
"react": "^18.0.0",
"react-bootstrap": "^2.2.3",
"react-dom": "^18.0.0",
"react-router-dom": "^6.3.0",
"react-scripts": "^5.0.1",
"sass": "^1.50.0",
"sweetalert": "^2.1.2",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "set HTTPS=true&&react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"prestart": "node aspnetcore-https && node aspnetcore-react"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
It seems like you have set up your react-bootstrap & bootstrap not properly. When using react-bootstrap, you don't need the js-bundle from bootstrap, but the css. You have two options:
Install bootstrap (npm i bootstrap) and add import 'bootstrap/dist/css/bootstrap.min.css'; to your index.js or App.js file
Or use CDN: Paste following snippet into your index.html:
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous"
/>
https://react-bootstrap.netlify.app/getting-started/introduction/#stylesheets
I solved it. I needed to actually install all the packages with npm in my project folder. I had them installed in my Windows user folder and globally, but not in my project.
Basically, just open a cmd in your project folder and run:
C:\SomePath\MyReactProject>npm install react-bootstrap bootstrap
Try this
<Button href="#" variant="primary" type="button" value="Input" />
I'm creating a React project and I want to implement the BrowserRouter but the problem is that when I used it, it always throw the React Error of:
***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
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.***
I don't know what is this about, because as far as I know, I'm not using hooks and I read the documentation and other tutorials to solve this problem (like deleting double react or npm link and that's stuff) but this still a problem.
Here are my files.
App.js
import { BrowserRouter, Route, Routes, Link } from "react-router-dom";
import Navbar from "./components/navbar"
import Login from "./components/login";
// import CreateExercise from "./components/create-exercise.component";
// import CreateUser from "./components/create-user.component";
function App() {
return (
// <h1>HOASNKFNLSA</h1>
// <div>
// <Home/>
// </div>
<BrowserRouter>
<Routes>
<Route path="/" render={() => {
<h1>HOKAKSFNAKSO</h1>
}}>
</Route>
</Routes>
</BrowserRouter>
);
}
function Home() {
return (
<div className="container text-center">
<h1>KEVIN STYLE PELUQUERIA</h1>
</div>
);
}
function About() {
return (
<div>
<h2>About</h2>
</div>
);
}
function Dashboard() {
return (
<div>
<h2>Dashboard</h2>
</div>
);
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
package.json
{
"name": "kevin-style-peluqueria",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I don't know if you need anything else, but if you do, ask me in comments. If you need to know more extra info, I'm not using webpack. I'm using the classic React structure application when you do the command npx create-react-app. I'm also using express and MongoDB like my backend (basically I'm creating an application with the MERN Stack).
You should do something like this.
And take a look to the docs with examples
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter as Router } from 'react-router-dom'
ReactDOM.render(
<React.StrictMode>
<Router>
<App />
</Router>
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
I am new to ReactJs and I am trying to implement TabContext using material UI library of react and I am getting the error above. I think it's due to path. I tried to install material UI again but it didn't help. I am sharing my code.Please check
my-app/src/App.js
import logo from './logo.svg';
import './App.css';
import Navbar from './Components/Navbar';
import Form from './Components/Form';
function App() {
return (
<div className="App">
<h1>Hi</h1>
<Navbar></Navbar>
</div>
);
}
export default App;
my-app/src/Components/Navbar.js
import React from 'react'
import { makeStyles } from '#material-ui/core/styles';
import AppBar from '#material-ui/core/AppBar';
import Tab from '#material-ui/core/Tab';
import {TabContext} from '#material-ui/lab/TabContext';
import {TabList} from '#material-ui/lab/TabList';
import {TabPanel} from '#material-ui/lab/TabPanel';
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
backgroundColor: theme.palette.background.paper,
},
}));
function Navbar() {
const classes = useStyles();
const [value, setValue] = React.useState('1');
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<div className={classes.root}>
<TabContext value={value}>
<AppBar position="static">
<TabList onChange={handleChange} aria-label="simple tabs example">
<Tab label="Item One" value="1" />
<Tab label="Item Two" value="2" />
<Tab label="Item Three" value="3" />
</TabList>
</AppBar>
<TabPanel value="1">Item One</TabPanel>
<TabPanel value="2">Item Two</TabPanel>
<TabPanel value="3">Item Three</TabPanel>
</TabContext>
</div>
);
}
export default Navbar
package.json
{
"name": "my-forms",
"version": "0.1.0",
"private": true,
"dependencies": {
"#material-ui/core": "^4.12.3",
"#testing-library/jest-dom": "^5.14.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"material-ui": "^0.20.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
In my-app/src/Components/Navbar.js
try this:
import React from 'react'
import { makeStyles } from '#material-ui/core/styles';
import AppBar from '#material-ui/core/AppBar';
import Tab from '#material-ui/core/Tab';
import TabContext from '#material-ui/lab/TabContext';
import TabList from '#material-ui/lab/TabList';
import TabPanel from '#material-ui/lab/TabPanel';
You need to install #material-ui/lab and #material-ui/core as well.
npm install #material-ui/lab
npm install #material-ui/core
Then use these imports:
import Tab from '#material-ui/core/Tab';
import TabContext from '#material-ui/lab/TabContext';
import TabList from '#material-ui/lab/TabList';
import TabPanel from '#material-ui/lab/TabPanel';
The above tested for #material-ui/core v4.12 and #material-ui/lab v4.0.
It seems like you are actually trying to import some components from the lab side of material-ui but from your package I don't see it installed in your project. To use the lab components you need to install a separate dependency.
https://material-ui.com/components/about-the-lab/
So basically will need to install it.
npm install #material-ui/lab
You need to install #mui/lab and #mui/material.
https://mui.com/material-ui/about-the-lab/#installation
npm install #mui/lab #mui/material
For yarn:
yarn add #mui/lab #mui/material
If you've installed, #material-ui/lab then change your import in Navbar.js
import TabContext from '#material-ui/lab/TabContext';
// or
import { TabContext } from '#material-ui/lab';
Ref:- https://material-ui.com/api/tab-context/
You're doing import {TabContext} from '#material-ui/lab/TabContext'; which is incorrect. Same correction would be needed for TabList and TabPanel
I'm trying to import react-router-dom and history for work with React-router but doesn't work and I get this error.
I imported this packages:
yarn add react-router-dom
yarn add history
I'm working under v14.4.0 version of node.
This is my code:
index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { Router } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
const history = createHistory();
ReactDOM.render(
<Router history={history}>
<App />
</Router>,
document.getElementById('root')
);
serviceWorker.unregister();
package.json (for check a lot of versions xd):
{
"name": "react-router",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"history": "^5.0.0",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
```
If you need additional information for help me to solve the problem, don't doubt it for ask for.
Thanks a lot!!
Try importing it like this:
import { createBrowserHistory } from "history";
const history = createBrowserHistory();
I am following this tutorial on React-Redux and I stumbled upon error on 1st part of section "React Redux tutorial: asynchronous actions in Redux, the naive way".
Post.componentDidMount
src/js/components/Posts.js:12
9 |
10 | componentDidMount() {
11 | // calling the new action creator
> 12 | this.props.getData();
| ^ 13 | }
14 |
15 | render() {
My understanding is that props from store is not passed down from the App component to Posts component. I have repeated the steps several times but I still cannot see the exact culprit. The source code from Git works just fine. I noticed, there are difference between my local and that of the GIT repo.
This is my package.json
{
"name": "react-redux-study",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"react-redux": "^7.2.0",
"redux": "^4.0.5"
}
}
And this is the package.json from the Git repo.
UPDATE: Added my App.js and Posts.js
App.js
import React from "react";
import List from "./List";
import Form from "./Form";
import { Post } from "./Posts";
const App = () => (
<>
<div>
<h2>Articles</h2>
<List />
</div>
<div>
<h2>Add a new article</h2>
<Form />
</div>
<div>
<h2>API posts</h2>
<Post />
</div>
</>
);
export default App;
Posts.js
import React, { Component } from "react";
import { connect } from "react-redux";
import { getData } from "../actions/index";
export class Post extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
// calling the new action creator
this.props.getData();
}
render() {
return null;
}
}
export default connect(
null,
{ getData }
)(Post);
I can actually just move on and use the source code from Git but I do want to understand what is the exact issue.
Issue :
// posts.js
export class Post extends Component { // <---- First : Export
...
}
export default connect( // <----- Second : Export
null,
{ getData }
)(Post);
// inside app.js
// you are importing first import, not the default which is connecting to you store
import { Post } from "./Posts";
Solution :
Change this line
import { Post } from "./Posts";
To
// import the default one
import Post from "./Posts";
In app component
<Post getData={postdata} />
In Posts component you can get data like this.
componentDidMount() {
let posts=this.props.getData;
}