I have a short question:
In React we import the React Component for every component:
import React from 'react'
Does this mean if I have a screen that uses several subcomponents (which also import React each time), does the React package get imported several times?
So basically:
1 Screen with 4 subcomponents = 5 x React package loaded = 5 times the react memory used
or
1 Screen with 4 subcomponents= 1x React package loaded
Or does it only import the react package once and then access it when it's needed again?
Or does it only import the react package once and then access it when it's needed again?
Basically yes. Your build tool / bundler (i.e. webpack) will take the packages you've imported throughout the app and include them in your build. It will recognize that these are the same package and import it only once.
Related
I have a project with many components, but event if I work on isolated components when I save the file and NextJS compile it takes too long. My develop time is affected by this issue.
I run 4 GB of RAM, but it is still slow
cross-env NODE_OPTIONS="--max_old_space_size=4096" next
How can I solve this issue ?
What are the possible problems ?
If you import components using
import {List,Grid,ListItem} from '#material-ui/core';
instead try use
import List from '#material-ui/core/List';
import Gridfrom '#material-ui/core/Grid';
import ListItem from '#material-ui/core/ListItem';
that's worked for me.
I have two libraries of Stencil JS web components, library-a and library-b. These are not apps, just separate npm packages of components.
I would like to use some of the components from library-a inside library-b. How do I import components from A into B?
The StencilJS docs offer some import instructions but don't cover this particular use case.
Basically all you have to do is npm install (or npm link) the project and import it.
As far as I know there are two places you can include the import:
Inside a global app.ts which is configured as a globalScript in stencil.config.ts.
Inside the root component.
In your case the second option probably won't work since component libraries usually don't have a root component.
Import inside app.ts:
First, create a global script and configure it in your stencil.config.ts:
export const config: Config = {
// ...
globalScript: 'src/global/app.ts',
};
Then add the import inside that file. Example for Ionic Framework:
import '#ionic/core';
Now you can use the components just like any other HTML element.
I have seen that it is used
import React from 'react';
import './cssName.css';
but it does not work for me, I am working on the electron app and add react as shown here
https://reactjs.org/docs/add-react-to-a-website.html
It is not working because you do not have a build process set up. You will need to setup webpack or something like that to be able to import css.
I suggest you read this article: https://flaviocopes.com/react-electron/.
We are using Laravel Mix to compile react components and serve them individually to the respective pages where they are needed - It's not a SPA.
I'm new to React, so excuse my ignorance. I'm trying to get my head around the current setup and find out if it's the proper way of having multiple components in the same page.
So the boilerplate below has been copied and pasted in every component, only changing the selector, e.g.:
'use strict'
import React from 'react'
import ReactDOM from 'react-dom'
import {Provider} from 'react-redux'
import {createStore, applyMiddleware, compose} from 'redux'
import ReduxPromise from 'redux-promise'
import App from './containers/App'
import reducers from './reducers'
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
const enhancer = composeEnhancers(
applyMiddleware(ReduxPromise),
)
const newstore = createStore(reducers, enhancer)
ReactDOM.render(
<Provider store={newstore}>
<App />
</Provider>, document.querySelector('.component-foo')
)
Some components also differ slightly in how the store is created, e.g. redux devtools is not always present.
So, coming from Vue.js, that doesn't make much sense to me - in Vue.js you'd use a single file to import everything related to the framework and then load each component you need with a single line of code. But this React setup seems to be doing quite the opposite: loading a separate instance of React and Redux for every component in the page, as if I had multiple root/app components in Vue.js.
Is it right to assume React is being bundled and booted multiple times and would that be the proper way to do things?
You're almost certainly doing this wrong. Yes, its very likely you are bundling and booting React multiple times, but no that is not the proper way to do things. It seems you are trying to use the Vue paradigm to do this but with code copied from a React SPA which is why you are building this monstrosity.
May I suggest checking basic react+laravel tutorials before you proceed? simple google search showed this: https://code.tutsplus.com/tutorials/build-a-react-app-with-laravel-backend-part-2-react--cms-29443 and I'm sure there are many others.
Since you are new to react, avoid redux for now and just get familiar with putting up react with multiple components. only then add the redux state management IF YOU NEED IT.
I'm getting error when running webpack with babel-loader
Module not found: Error: Cannot resolve module 'react-dom'
Here is my import statement
import ReactDOM from 'react-dom' ;
I 'm using React 0.14.0
In 0.14.x version dom rendering functions had been moved into react-dom package to be more universal.
As we look at packages like react-native, react-art, react-canvas, and
react-three, it has become clear that the beauty and essence of React
has nothing to do with browsers or the DOM.
To make this more clear and to make it easier to build more
environments that React can render to, we’re splitting the main react
package into two: react and react-dom. This paves the way to writing
components that can be shared between the web version of React and
React Native. We don’t expect all the code in an app to be shared, but
we want to be able to share the components that do behave the same
across platforms.
The react package contains React.createElement, .createClass,
.Component, .PropTypes, .Children, and the other helpers related to
elements and component classes. We think of these as the isomorphic or
universal helpers that you need to build components.
The react-dom package has ReactDOM.render, .unmountComponentAtNode,
and .findDOMNode. In react-dom/server we have server-side rendering
support with ReactDOMServer.renderToString and .renderToStaticMarkup.