I have just started learning React and I am running the server with the command npm start but the problem is whenever I am making any changes in the index.js file it is updating it on the website but whenever I am importing some other apps and making changes in those apps it is not updating the website .
How can I update my site on updating any file in the project ?
Here is my header.js file
import React from 'react';
const user = {
name : 'Brijesh',
lastname : 'Maurya',
age : 20
}
const Header = () =>{
return (
<div>
<div>{user.name}</div>
</div>)
}
export default Header;
Here is index.js file
import React from 'react';
import ReactDOM from 'react-dom';
// Components
import Header from './components/header'
const App = () =>{
return (
<div>
<Header/>
</div>
)
}
ReactDOM.render(<App/>, document.querySelector('#root'));
As your issue is resolved by creating another app , maybe you should think over the flow you went through while making those files .
As you mentioned that you have just started learning react , I think you might have done something like deleting all the files and then creating new files from scratch.
Anyways , welcome to the world of React JS !
It sounds like whatever server npm start is running - probably a node server - has Hot Module Replacement configured and for the other apps that you are running HMR is not configured.
You can learn more about how to configure HMR on Webpack's site here:
https://webpack.js.org/concepts/hot-module-replacement/
And about React Hot Loader here:
https://gaearon.github.io/react-hot-loader/getstarted/
If npm start runs the wepack-dev-server it may be as simple as running the server with the --hot flag.
Related
I am newbie in react, react-native and nodejs.
I tried create node module via npm init. In this module i created a component - for start styled button. I packed this via npm pack a link in application in package.json file by "file:../shared/_dist/shared-1.0.0.tgz" in dependency section.
in my shared index.js is
import MyButtonFirst from './components/buttons/MyButtonFirst';
module.exports = { MyButtonFirst };
in react application is
import React from 'react;
import { MyButtonFirst } from 'shared';
export default function MySharedButton()
{
return <MyButtonFirst />;
}
It works!
Then i tried create component which using react-native-async-storage/async-storage (via npm install in shared project). After increase version, npm pack, link and install new version of package I get error that AsyncStorage is null after android run.
Why AsyncStorage is null? Have I create dependecy in both projects? (that's a weird solution - it doesn't feel right to me, although it works)
How to share for example resources like icons, images etc.
We need to develop three applications on the same data (API) in the field of sports for different types of users (athlete, referee, administrator of the sports ground) and a lot of code we need to share - icons, contexts (user, theme etc...), error handling, API calls etc... We don't want develop it as one big rights-controlled application, but as several small applications for individual roles.
What is the best way how to share code between more react-native apps?
AsyncStorage is deprecated, see here.
You could create a start.js that links to different apps based on the feedback of your database (the roles of your users).
Else, it will route to a welcome component with, for example, a login and registration child-component.
import ReactDOM from "react-dom";
import Welcome from "./welcome";
import AppAth from "./app-ath";
import AppRef from "./app-ref";
import AppAdmin from "./app-admin";
fetch("api/users/role.json")
.then((res) => res.json)
.then((user_role) => {
if (user_role == "ath") {
ReactDOM.render(<AppAth />, document.getElementById("root"));
} else if (user_role == "ref") {
ReactDOM.render(<AppRef />, document.getElementById("root"));
} else if (user_role == "admin") {
ReactDOM.render(<AppAdmin />, document.getElementById("root"));
} else {
ReactDOM.render(<Welcome />, document.getElementById("root"));
}
})
.catch((err) => console.log(err));
Like that, you can keep the standard folder tree of an application in React and share all child-components, hooks and files in the public folder between them:
To keep the users separate, you store the role of the user in a cookie and check for the role on the server side.
If the cookie is empty, it will always lead back to the welcome component.
Side note: of course, the folder structure is always dependent on the bundler setup! So the folder structure of your app could differ from the one on the image.
I am actually just getting started with Reactjs. So as i installed all the React packages on my PC using npm, i deleted all the src files which were in it because they were just sample files, i wanted to create on my own, but the problem is that my main js file name was "original.js" while it was demanding that "index.js" can't be found. So i changed my file name to "index.js" and now it works. Can someone tell me how to find the settings where i can see this issue so that i don't have to name my every main rract file as "index.js".
Thank you
Generally in the web development world (not just React), we use index.* files instead of main.* files.
If you would like to rename it, you might need to do some complex stuff like ejecting the app from create-react-app, and then changing webpack.config.js, but that seems way too advanced for you.
Instead I would recommend what most tutorials online say to do, which is keep index.js as the entry point of your app and import your Main component into it, like so:
// src/index.js
import React from "react";
import ReactDOM from "react-dom";
import Main from "./Main";
ReactDOM.render(
<React.StrictMode>
<Main />
</React.StrictMode>,
document.getElementById("root")
);
// src/Main.js
import React from 'react';
const Main = () => {
return (
<h1>My main component</h1>
);
};
export default Main;
I'm trying to create a simple React module. My project structure looks like this :
project
|---src
|---Login.js
|---login.css
|---index.js
...
I have used create-react-app boilerplate.
Now when I have published the repo, it gives me :
Could not find module in path: 'react-mua-login' relative to '/src/index.js'
What is the problem actually ?
Repo : https://github.com/maifeeulasad/react-mua-login
npm package name : react-mua-login
codesandbox : https://codesandbox.io/s/react-mua-login-sample-x12dr?file=/src/index.js
Import Login component correctly:
import React from "react";
import ReactDOM from "react-dom";
import Login from "react-mua-login/src/Login";
const rootElement = document.getElementById("root");
ReactDOM.render(
<React.StrictMode>
<Login />
</React.StrictMode>,
rootElement
);
Working code
EDIT
If you want to use method like import Login from "react-mua-login", you should export Login component from your main entry file.
For example, you can create index.js in the project root directory and export Login component like this:
import Login from "./src/Login";
export default Login;
Recommended readling list: Preparing a React component to publish on npm
Doesn't look like react-mua-login is a library but an application. You cannot import anything from it and it generates a weird error.
You need a main property in react-mua-login's package.json so you can import things from it.
Also, you should probably move some dependencies in react-mua-login from dependencies to peerDependencies or devDependencies.
#testing-library/jest-dom dev
#testing-library/react dev
#testing-library/user-event dev
react dev & peer
react-dom dev & peer
react-scripts dev
It is often best that a lib doesn't ship with its own version of dependencies (especially react)
I have a website that I use to download common files that I need. I want to use this to display the files: https://github.com/uptick/react-keyed-file-browser
I have a raspberry pi that I run my website off of. I installed npm and ran the command from that github page (npm install react-keyed-file-browser) with success but I'm confused as to how to do the next step. Where does this go?
import React from 'react'
import ReactDOM from 'react-dom'
import FileBrowser from 'react-keyed-file-browser'
var mount = document.querySelectorAll('div.browser-mount');
ReactDOM.render(
<FileBrowser
files=[]
/>,
mount[0]
);
Thanks a ton! I'm sorry I'm so clueless.
I have been trying to execute a very simple react application, but for some reason I'm unable to compile it. When i try to compile it in bash using "npm start", i get the error stating "Failed to compile: ./src/index.js
Module not found: Can't resolve './registerServiceWorker' in '/Users/Pruthvi/Desktop/ReactApplication/my-app/src'"
can anybody help me as I am a new bee to react application!
By default, create-react-app will create a progressive web app, as documented here. The progressive web app relies on registerServiceWorker() in the registerServiceWorker.js file. You have apparently deleted this file, so your project no longer builds.
You have two choices:
Keep your project as a progressive web app, in which case you should simply restore the original state you had after first creating.
Opt out of the progressive web app features.
In order to opt out of the progressive web app features, you need to modify your src/index.js file as follows:
Delete the import of the registerServiceWorker.
Delete the registerServiceWorker() call.
Your src/index.js will then look like this:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
// Deleted -- import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// Deleted -- registerServiceWorker();
Once you've made those modifications to your index.js, you can safely delete the registerServiceWorker.js file (which it appears you've already done based on the error message you've posted).
The documentation gives a more complete description of how to opt out and some of the consequences of having a progressive web app.
If you are new to react and need to build apps fast you can try
create-react-app by facebook
it a command line tool that will help you build better react app fast with zero configuration you can learn more from the link above and its easy to use
also make sure that you use a good editor that can help you catch errors
and to help you and give you good answer the second time please provide your code to understand the problem well .