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;
Related
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 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.
I was wondering and trying to find out how webpack internally finds out which are the import statements a entry file has?
For example my index.js looks like
import React, { PropTypes, Component } from 'react';
import { findDOMNode } from 'react-dom';
import classnames from 'classnames';
import Loading from 'components/Loading';
import Button from 'components/Button';
import Header from 'components/Header';
import Footer from 'components/Footer';
class App extends Component {
render() {
return (
<div className="shopping-list">
<Header />
<h1>Shopping List for {this.props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
<Footer />
</div>
);
}
};
export default App;
Now I am trying to understand how webpack is finding out what are the other imports that file has? And then one of the imported files has other imported files?
Basically, Webpack is build tool and it is design to convert your app into optimized solution like compressing the js/scss/css and many more files.
Webpack can be configurable according to your choice and there are many loaders and plugins developed, you can use them to add support for that type of file.
It's like telling a system to take list of source files (input) and compiling them by using related webpack plugin or loader and giving optimized solution as output.
by webpack configuration, you tell it that load this type of file and generate output here and it normally convert your advanced source code to native source code so, it can work on any system.
for example,
we know that scss file is not supported by browsers, we need to convert it into css and then we can import it, but using scss loader plugin and by configuring it with webpack you can directly use scss file no need to manually convert scss to css and directly can import scss file into component and webpack will read the file, see the type and convert it for us.
configuring the webpack is the difficult part but there are pretty good pre-configured solution available to use like create-react-app where you don't need to worry about the configurations
for more info see the webpack documentation
I’m running my react app via Node. Is there a way to easily handle this import hell?
I’m running
./node_modules/.bin/babel-node --presets react,es2015 server/server.js
as npm start. And server.js is a simple Express Server that serves a ReactDOMServer.renderToString(<MyApp />)
Some of my react components have something like this:
import GenericTemplate from "../../templates/GenericTemplate/GenericTemplate";
import Footer from "../../organisms/Footer/Footer";
import Header from "../../organisms/Header/Header";
import Hero from "../../organisms/Hero/Hero";
import MainMenu from "../../organisms/MainMenu/MainMenu";
import TodoList from "../../organisms/TodoList/TodoList";
this is prone to error, one changement like directory name would result in manually entering every file to update this.
do you have any idea how I can fix this. Ideally I would have something like this:
import { Footer, Header, Hero, MainMenu, TodoList } from "myComponents"
is that possible? How?
Thank you!
This also doesn't look a lot better to me:
import { Footer, Header, Hero, MainMenu, TodoList } from "myComponents"
... because in order to do that, you need to export / import to "myComponents" every time you create a new component.
The core issue I see in your example is that using relative paths for imports makes your code base very hard to maintain.
To escape the "import hell" in React, one popular option is to make the import statements without relative paths.
With a minor tweak to your Webpack configuration, you can get it to load files relative to the app root. See here and read more here.
You can create a common components file in your organisms directory to achieve that. Just create a new common.js or whatever name with the following:
export Footer from "./Footer/Footer";
export Header from "./Header/Header";
export Hero from "./Hero/Hero";
export MainMenu from "./MainMenu/MainMenu";
export TodoList from "./TodoList/TodoList";
Then in your other file:
import { Footer, Header, Hero, MainMenu, TodoList } from "path to common.js"
The external React component says Uncaught TypeError: Cannot read property 'Component' of undefined when I link as npm package.
I link a package in package.json as "react-mapbox": "https://github.com/varya/react-mapbox.git". Then I use it in code
import {render} from 'react-dom';
import MapBox from "react-mapbox";
render(
<div>
<h1>Hello, world!</h1>
<MapBox />
</div>
,
document.getElementById('example')
);
But nothing works, I get that error. The full repo is here https://github.com/varya/react-mapbox-test I made a small example to illustrate.
The react-mapbox package is my own, maybe I build it wrongly? This is its repo https://github.com/varya/react-mapbox
I built it with webpack, like that https://github.com/varya/react-mapbox/blob/master/webpack.config.js As I suppose, this build does not include react package assuming that this will be at the project which link it. But the component still do not see react object.
UPD
I added import React from 'react'; as #aulizko suggested, but this only provided React object onto a page. It still was not visible for the component.
To fix this I had to provide this changes https://github.com/varya/react-mapbox/commit/2687d66025aaa84553a79850aa8686e88f1f39d9
I required react in the code of the component as well.
And I have to build with Babel. For some reason the webpack build gives the same error even if react is required. I created a branch to illustrate this https://github.com/varya/react-mapbox/tree/webpack Now I'm happy with Babel, but with this branch you can see what's wrong with webpack if interested.
You're probably bundling your module as UMD which is causing the bundle to utilized a global React variable which doesn't exist in the consumer app. You need to export the bundle as a CommonJS or AMD module using https://webpack.github.io/docs/configuration.html#output-librarytarget. Simple add libraryTarget: 'commonjs2 or libraryTarget: 'amd' to the output key in the webpack config and make sure you are importing react in your component.
I added import React from 'react'; as #aulizko suggested, but this only provided React object onto a page. It still was not visible for the component.
To fix this I had to provide this changes https://github.com/varya/react-mapbox/commit/2687d66025aaa84553a79850aa8686e88f1f39d9
I required react in the code of the component as well.
And I have to build with Babel. For some reason the webpack build gives the same error even if react is required. I created a branch to illustrate this https://github.com/varya/react-mapbox/tree/webpack Now I'm happy with Babel, but with this branch you can see what's wrong with webpack if interested.
The thing is that the jsx-code that you see in your editor is not the code that will be executed by node or browser.
If you look into code that are generated by the babel, you'll see something like this:
(0, _reactDom.render)(React.createElement(
'div',
null,
React.createElement(
'h1',
null,
'Hello, world!'
),
React.createElement(_reactMapbox2['default'], null)
), document.getElementById('example'));
So as you can see it uses React constant under the hood.
You need to explicitely import React if you want to use jsx-code.
Add something like this in your code and it'll work:
import React from 'react'; // <!--- add this!!!
import {render} from 'react-dom';
import MapBox from "react-mapbox";
// the rest of your code goes here...
You have to import React's Component it this way:
import {Component} from 'react';
or even:
import React, { Component, PropTypes } from 'react';