Please see image below to assist. I can't seem to work out where i'm going wrong?
This is my first time using expo so I am fairly confused with it. I'm trying to launch my react app on the ios simulator but receiving the error message;
iOS Bundling failed 18ms
Unable to resolve module ./App from /Users/luke/Desktop/Projects/simulate/index.js:
None of these files exist:
* App(.native|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json)
* App/index(.native|.ios.ts|.native.ts|.ts|.ios.tsx|.native.tsx|.tsx|.ios.js|.native.js|.js|.ios.jsx|.native.jsx|.jsx|.ios.json|.native.json|.json)
1 | import { registerRootComponent } from 'expo';
2 |
> 3 | import App from './App';
INDEX.JS
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './Components/App/App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
APP.JS
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
This is happen because you deleted your App.js from your tree, so your project is trying to get access to a file that doesn´t exist
You must have something like this:
enter image description here
Related
I am trying to make an app with react. I want to use react bootstrap. I downloaded bootstrap and react bootstrap in the project.
`
npm i bootstrap#5.2.3
`
`
npm install react-bootstrap bootstrap
`
this is my package.json:
enter image description here
I have imported the css in the App.js, I have also tried to import it in the index.js, but it still doesn't recognize it.
enter image description here
I have copied the link in the index.html of the public folder
enter image description here
when importing react bootstrap components I have done the imports for each component, but it doesn't recognize the styles, my 'card' looks like this : enter image description here
enter image description here
I don't know if I'm missing some import, or some npm to do. I have changed the imports of site a thousand times and it still does not work. does anyone know what could be happening?
1.) install bootstrap from npm package
npm install bootstrap
2.) Open your index file (Index.js) and have these two lines there like so
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css'; //<-- Add this
import 'bootstrap/dist/js/bootstrap.bundle.min'; // <-- Add this
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
reportWebVitals();
3.) Add button to see if Bootstrap button does show in App.js
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
<a className="btn btn-primary"
data-bs-toggle="collapse"
href="#collapseExample"
role="button"
aria-expanded="false"
aria-controls="collapseExample">
Bootstrap button
</a>
</header>
</div>
);
}
export default App;
4.) Run app with npm start and see if your bootstrap has been installed and ready to go. My case
I created my app according to the instructions here:
https://reactjs.org/tutorial/tutorial.html#setup-for-the-tutorial
https://github.com/facebook/create-react-app
This is the code in my index.js file:
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import Logo from './assets/blacklogo.png'
const Header = () => {
return (
<div className="header">
<div className='headerLogo'>
<img src={Logo} alt='Cool Image'></img>
<h1>'Hello world'</h1>
</div>
</div>
);
}
export default Header;
I have attempted reloading the page and ddouble checking to see if I have loops anywhere
I have discovered the issue, I was writing in index.js as opposed to App.js
import React, {Component} from 'react'
const Greet=()=> <h1>Say helllo</h1>
export default Greet;
This functional component i've created and imported in App.js
import logo from './logo.svg';
import './App.css';
import './Components/Greet'
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
<br></br>
<button>Submit</button>
</header>
<Greet/>
</div>
);
}
export default App;
But getting error in chrome web:
**src\App.js
Line 24:8: 'Greet' is not defined react/jsx-no-undef
src\Components\Greet.js
Line 7:16: 'Greet' is not defined no-undef**
New to React Helpful if someone can help me with this.
const greet=()=> <h1>Say helllo</h1>
Try Greet instead of greet
Also in your App.js write in this way
import Greet from "./Components/Greet";
I'm not able to get a 'react' application beyond Screen with the "atom icon" and "learn React" link.
There is a message saying 'Edit src/App.js and save to reload.'
But there's nothing giving any information or clue about what changes need to be made to the App.js file, what configuration or other settings to check (and what the values should be), etc.
What do I need to do to get a React app to actually work?
//=========================
// BEGIN App.js SourceCode:
// ------------------------
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
// ----------------------
// END App.js SourceCode
//=======================
The changes you need to make to App.js is the code for the initial page of your React App.
Replace your code with this, and change the "Hello":
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<p>Hello</p>
</div>
);
}
export default App;
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" },