After i changed App.js code.. The page show blank page with 3 error code continusly
I tried to fix it for 4 hours..
Now I can't hold on anymore..
Can you help me..?
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render(){
return (
<div className="App">
Hello, React!!
</div>
);
}
}
export default App;
I think you are running the app with live server of visual studio code. To run react app you need to run following command in the root of react app.
If you are using npm then run this command :-
npm start
If you are using yarn then run this command :-
yarn start
Related
I created a react app using npx create-react-app ./
then I deleted my src folder and created src folder again. then I created index.js with following codes
import react from 'react'
import { ReactDOM } from 'react'
import App from './App'
ReactDOM.render(<App/>,document.getElementById('root'));
Then created App.js file with following codes
import React from 'react'
const app = () => {
return (
<div className='App'>
<h1>Hello</h1>
</div>
)
}
export default app
Then saving those files in terminal I started the app. npm start
this loades the react app in localhost:3000 but it shows a white screen only.
please help me solving this problem.
I want this code shows Hello
I am learning React but getting some error when using bootstrap ListGroup. I have tried searching the same but could not understand the issue why this is happening and how to resolve it.
I have installed npm install react-bootstrap bootstrap as per documentation. It's working fine with form but throwing error with ListGroup.
I have tried this as well import { ListGroup } from 'react-bootstarp';
Can any one tell me why it is throwing this error.
Product List Component:
import React from 'react'
import ListGroup from 'react-bootstarp/ListGroup';
function ProductList() {
return(
<>
<div className="list-container">
<div className="header">
<h3>Products</h3>
</div>
<div class="panel">
<ListGroup>
<ListGroup.Item>Oppo F9 Pro</ListGroup.Item>
<ListGroup.Item>Samsung Galaxy A1</ListGroup.Item>
<ListGroup.Item>Lava Lite Pro</ListGroup.Item>
<ListGroup.Item>Sony Xperia Lite</ListGroup.Item>
<ListGroup.Item>iPhone 13 Pro</ListGroup.Item>
</ListGroup>
</div>
</div>
</>
)
}
export default ProductList;
App.js
import logo from './logo.svg';
import './App.css';
//Custom code
import ProductList from './components/ProductList';
function App() {
return (
<div className="App">
<ProductList/>
</div>
);
}
export default App;
Ref: https://react-bootstrap.github.io/components/list-group/
Module not found error occurs when you are using some module and that module is not installed or the node is unable to locate that module due to the wrong path.
One module you are trying to install has either dependency on other modules as well
so sometimes not all the modules are installed correctly due to some permission security issues.
So please try giving all permission or run as Root and add sudo if you are using an ubuntu machine.
So you can install that module by directly running the following command:-
npm install react-bootstrap-validation --save
or if you are using Linux/ubuntu then run the following command:-
sudo npm install react-bootstrap-validation --save
Or first please check in the console when installing the module that
is there any dependency error showing in the console
if so then please also attach that console, in that case, you need to install the dependent module also as separately via npm install.
Hope this will help!
Thanks
I'm following along to a youtube tutorial to learn the MERN stack. Currently i'm trying to import boostrap css in my App.js file. But i keep getting this error.
Error
Here is my App.js file
import React, { Component } from 'react';
import AppNavbar from './components/AppNavbar';
import './App.css';
import 'boostrap/dist/css/bootstrap.min.css';
class App extends Component {
render() {
return (
<div className="App">
<AppNavbar />
</div>
);
}
}
export default App;
I ran npm install --save boostrap before attempting to include it, ive also restarted the server. All to no avail. Is there a new way to include css from the node_modules folder?
If you are trying to import bootstrap into your react project. You can import the css file into your App.js like this.
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
The import statement is not finding the file(s) do to the path passed in.
You have a typo, use this
import 'bootstrap/dist/css/bootstrap.min.css'
/*Greetings to all; I would like some help as regards an issue i am having with the 'export default' module on Webstorm when building react apps.
Background to recreate issue:
After going through the steps to create a React app: [1]: npm install -g create-react-app [2]: create-react-app hello_world [3]: cd hello_world [4] npm start
//Everything works fine.
*/
- Open the project Folder in Webstorm 2017.2.5
- Navigate to the src folder and open the App.js file
- Observe the last line of code: 'export default App' //All is active
and working. Implies, JSX syntax is enabled in ES6.
- create a new JS file inside the same src folder and fill in with the
following (just something quick to test. classNames used are just for demo):
1 import React, { Component } from 'react';
2 import logo from './logo.svg';
3 import './App.css';
4 class Output extends Component {
5 render() {
6 return (
7 <div className="output">
8 <header className="output-header">
9 <img src={logo} className="output-logo" alt="logo" />
10 <h3 className="output-title">Welcome to React</h3>
11 </header>
12 <p className="output-intro">
13 To get started, edit <code>src/Output.js</code> and
save to reload.
14 </p>
15 </div>
16 );
17 }
18 }
19 export default Output; // this is where I am having the challenge.
Webstorms error highlighting says: 'Unused default export'
I tried to import the Output.js file into the App.js file via:
import Output from './Output'; //yet the problem persists.
I also tried doing the same with another Editor (Atom), and it worked perfectly. problem was solved.
After looking up this issue, I came across something similar [here][1] but no solution.
How can I resolve this issue on Webstorm?
I was doing a course on ES6 and react. I just finished the ES6 modules and lessons my live updates were working. Hit command S on mac keyboard and the page was updated.
Now I went into terminal and installed a few react things and I am noticing that I am still connecting to my local 3000 host server with npm start. But its not live updated. I'll have for example this code and I have to close my terminal run another npm start then my code will be updated. Is this correct or am I doing something wrong? If theres any information you need I will edit in the info thank you.
import React, { Component } from 'react';
import { FormGroup, FormControl, InputGroup, Glyphicon } from 'react-bootstrap';
class Global extends Component {
render() {
return (
<div>
<h2> Hi </h2>
</div>
)
}
};
export default Global;