import React from "react";
import "./App.css";
function SecretComponent() {
return <p>Secret2 information for authorised users only </p>;
}
function RegularComponent() {
return <p>Everyone1 can see this component</p>;
}
function App(props) {
if (props.authorized) {
return <SecretComponent />;
} else {
return <RegularComponent />;
}
}
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
ReactDOM.render(<App authorized={false} />, document.getElementById("root"));
In my react project in Visual Studio Code when I make a change the browser page refreshes only if a change is made in the App.js file but doesn't refresh when a change is made in the index.js file. I have to refresh the page manually to show the change.
Try this:
npm install react-hot-loader
In app.js , add import { hot } from 'react-hot-loader/root' .
Wrap the App component while exporting export default hot(App) like this.
Related
So I'm new to React.
I want to style a simple text and found out how to use styles, but when I want to change something in the CSS I have to restart my React App which always takes 3 Minutes.
I use npm start to start the React server that was created with create-react-app.
How can I let React update when the CSS file is changed?
I have an index.js that looks like this:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import App from './Frontend/App.js';
import './Frontend/style/main.css';
ReactDOM.render(<App/>, document.getElementById('root'));
And an App.js that looks like this:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './style/main.css';
class App extends Component {
render() {
var pageHeading = (
<h1 className="pageHeading">bosleeir.it</h1>);
return pageHeading;
}
}
export default App;
Remember that you need to import your CSS in your component. I wouldn't recommend to do it on index.js
I'm assuming your folder structure is:
which could lead me that:
You're using an older version of React
You have modified the structure of your files
So double-check if the path are configured correctly.
I want to build a package and upload it to npm so I tried to create a demo package first.
I used this repo as a starter package: https://github.com/wobsoriano/vite-react-tailwind-starter
and updated the build script to this
"build-test": "esbuild src/App.tsx --bundle --minify --outfile=src/dist/index.js",
and the App.tsx i updated to this
import React from "react";
import "./index.css";
const App = () => {
return <div>My Dummy</div>;
};
export default App;
Then I tried to build it and import it in my main.tsx like this:
import React from "react";
import ReactDOM from "react-dom";
import App from "./dist/index.js";
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById("root")
);
And then I get this error:
The requested module '/src/dist/index.js' does not provide an export
named 'default
I only can give you a quick manual fix. For some reason the index.js file has no "export default" keywords, but you can open the src\dist\index.js file and you can just insert the "export default " at the very begin. So the begin will look like this:
export default ()=>{var K=Object.create;var _=Object.define.
Because the whole index.js just a function, you can do this.
When I run my react app, the console said
Failed to compile.
./src/components/login/index.js
Attempted import error: 'Login' is not exported from './login'.
Here is the folder structure:
├── index.js
├── login.js
└── register.js
index.js file:
export { Login } from "./login";
export { Register } from "./register";
login.js file:
import React from "react";
import ReactDOM from 'react-dom';
import loginImg from "../../login.svg";
class Login extends React.Component {
constructor(props){
super(props);
}
render() {
return(
// correct code
)
}
}
export default Login;
At first, I thought it was due to typo or sth like that, but I checked the spelling and syntax and still confused by the error. Really want to get some help!
The problem is your Login component has default export. And you imported it as named export.
Your import statement must be
import Login from './login'
import { default as Login } from './login'
Or you should export your Login component as
export { Login }
You used export default but your index.js does not import the default export. Change to:
export { default as Login } from "./login";
export { default as Register } from "./register"
When you export anything as default then you have to import it as
import Login from "./login";
not
import { Login } from "./login";
if you are exporting multiple functions or components you can import like
import { Login } from "./login";
But in your case you are exporting a single component itself. So you can import like
import Login from "./login";
since Login is the only thing that is being exported from login.js.
i think you should remove {} over your component.
replace this:
import {Login} from "./login"
with this:
import Login from "./login"
If it happens when you use Jest to run tests, maybe this helps you:
In my case was because I started the command "npm run test" and later created a new JS file in a new folder (data/heroes.js), and it was not finding that new file, showing this error:
Cannot find module '../data/heroes' from 'src/base/08-imp-exp.js'
But VsCode editor detected imports and exports correctly, so I restarted the terminal instance that was running the tests, and it worked !
Restart the tests terminal !
I am totally new to React and i'm following tutorials (Programming with MOSH) in youtube but i'm stuck with this error, unable to resolve after finding similar questions.
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import "bootstrap/dist/css/bootstrap.css";
import Counter from './components/counter';
//import * as Counter from './components/counter'; //tried this method too
ReactDOM.render(
<Counter />,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();
counter.jsx
import React, { Component } from 'react';
class Counter extends Component {
render() {
return <h1> Hello world</h1>;
}
}
export default Counter;
in command prompt i had done npm install and npm start after deleting package-lock.json but still the same error
folder structure
Thanks in advance.
Move your components folder inside the SRC this will fix it
Either move components folder inside src folder or change the reference in the import statement to '../component/counter'
When attempting to use the AppBar in version 0.16.6 of Material UI, I get the following error
Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded.
which looks like a react conflict error.
My code is as follows:
App.js
import React, { Component } from 'react';
import AppBar from 'material-ui/AppBar';
import {deepOrange500} from 'material-ui/styles/colors';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
const muiTheme = getMuiTheme({
palette: {
accent1Color: deepOrange500,
},
});
class App extends Component {
render() {
return (
<MuiThemeProvider muiTheme={muiTheme}>
<AppBar/>
</MuiThemeProvider>
);
}
}
export default App;
index.js
import injectTapEventPlugin from 'react-tap-event-plugin';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);
Has anyone encountered this, or does anyone know how to fix the problem?
In the index.js file you will need this before the ReactDOM.render call:
// Needed for onTouchTap event handling
injectTapEventPlugin();
See if that clears up the issue. If not, then try deleting the node_modules folder and running npm install again.