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
Related
I have been building a project on react using vscode and when i try to start it in the browser, I keep getting the error that it cant find the file index.js, even though it is in the right folder. (Yes I have imported react and not React). I have literally paused my project for a while day because of this and its weird because i was building a smaller project earlier on the same mahine, in the same way and it worked perfectly.
But I have no idea whats going on here, I have attached the code.
I tried moving the file around, checking my lowercase, deleteing the cache memory and restarting it, deleting the node modules folder and using npm insall, etc all that stuff already on stackOverflow but nothing works.
I am just starting out with react so I'm not sure what the problem is and I've tried googling as much as I could
Navbar.js:
import React from 'react'
import logo from './images/airbnb 1.png'
export default function Navbar(){
return (
<img src={logo} width= "40px"></img>
)
}
App.js:
import React from 'react'
export default function App(){
return(
<h1>App component</h1>
)
}
index.js:
import React from 'react'
import ReactDOM from 'react-DOM'
import App from './App'
import './index.css'
ReactDOM.render(<App />, document.getElementById("root"))
import ReactDOM from 'react-dom'
you are trying to import from react-DOM that does not exist
Just started to learn react, and using the mui library.
I installed the MUI library with
npm install #mui/material #emotion/react #emotion/styled
I also installed the roboto font, and the icons.
Then i made a simple app that should just display MUI button.
App.js
import Button from '#mui/material/Button';
function App() {
return (
<div >
<h2>Hello World!</h2>
<Button variant="text">Text</Button>
<Button variant="contained">Contained</Button>
<Button variant="outlined">Outlined</Button>
</div>
);
}
export default App;
Index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
The three buttons have been copied directly from the library. When I run the app with npm start the page remains empty. The compilation is successful, there are no errors whatsoever. When i remove the buttons, the <h2> Hello World </h2> suddenly renders. When the buttons are left in the code, even the <h2> title disappears.
Why are the components not rendering?
Found the solution.
In my several attempts to get this to work I created multiple apps. Whenever I created the app using npm create-react-app I would then install the MUI library as described above.
The issue was that I did not cd to the app directory before installing the library. After changing directories the Buttons properly rendered.
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
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'
I carefully searched the same problem that I faced but didn't find anything helpful.
webpack 1.13.1. Mac OS X El Capitan last version.
What I am trying to accomplish
I want to create a webpack build to develop multiple page apps.
I want to see the structure like this:
source
/source/page1/page1.css
/source/page1/page1.js
/source/page1/page1.html
public
/public/page1/page1.css
/public/page1/page1.js
/public/page1/page1.html
Current build
This is what I've done.
https://gist.github.com/lavezzi1/9cc0e58cd7d2b8f2470e703022a41db7
I tested it with vue.js and it works perfect. But now I want to get it works with react.js as well.
In dev move everything works just fine but when I ran task for prod build I got this error:
ERROR in ./source/pages/index.js
Module not found: Error: a dependency to an entry point is not allowed
What I did. This is my page folder:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
ReactDOM.render(
<App />,
document.getElementById('root')
);
App.js
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
So what am I doing wrong? I am newbie in react.js, maybe I don't understand something.
In vue.js I just create files:
index.html
index.css
index.vue
index.js
And everything works as expected.
I really really hope you guys help me.
why don't you just indicate the js file as entry point and import the css in that entry file. For multiple js entry file you can use the code splitting feature of webpack.
https://webpack.github.io/docs/code-splitting.html
and in your webpack.config.js file you can define entry file like the following.
entry: {
lite: "./lite.js", pro: "./pro.js",
},
output: { filename: "dist/[name].js" },