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.
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 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/.
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.
We use a React component package which provides some reusable components such as Button, Form, TreeView etc... That package is developed on top of React 14.
We want to develop a new application using React 16 and utilize this component package because it provides a lot of look and feel stuff out of the box.
Our code looks like this.
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import Button from 'reusable-components/button';
export default class MyComponent extends Component {
render() {
return <Button>{this.props.buttonCaption}</Button>;
}
}
MyComponent.propTypes = {
buttonCaption: PropTypes.string
};
With this code, when I open the page, I get an error saying TypeError: o.PropTypes is undefined in the browser console. I believe "o.PropTypes" is the obfuscated version of "React.PropTypes" and I am getting this error because somewhere in the source code of Button component they used "React.PropTypes" which became invalid after React 14.
Another thing is that when I do not use Button and do not import it at all, everything works fine. So, I am pretty sure that the issue is caused by the Button component.
I tried below thing in my index.js but it did not help.
import React from 'react';
import PropTypes from 'prop-types';
React.PropTypes = PropTypes;
Is there a way to use React 14 components from React 16 app? In the worst case we will downgrade to 14 as the library does not have 16 support yet but we really want to avoid it.
I am trying to load a number of Vue.js components into my app.js file (using browserify/vueify via elixir) in a laravel project.
Instead of loading every component at once, I'd like to lazy load the individual vue components when they are needed using vue router.
Where do I set up the partition bundle json file and how should it be structured?
At the moment, Ive tied out the following an my main app.js file:
import Vue from 'vue';
import Resource from 'vue-resource';
import VueRouter from 'vue-router';
// These are the components that I wish to lazy load:
// import Users from './components/Users.vue';
// import Sales from './components/Sales.vue';
// import Projects from './components/Projects.vue';
// import Dashboard from './components/Dashboard.vue';
// import Receipts from './components/Receipts.vue';
Vue.use(Resource);
Vue.use(VueRouter);
var router = new VueRouter();
router.map({
'/async': {
component: function (resolve) {
loadjs(['./components/Users.vue'], resolve)
}
}
})
Here's where I am stuck:
How do we lazy load all .vue components listed above in the router.map function?
How to set up the partition table json file for the above, and where should it be saved?
From the documentation https://v2.vuejs.org/v2/guide/components.html#Async-Components
If you’re a Browserify user that would like to use async components, its creator has unfortunately made it clear that async loading “is not something that Browserify will ever support.” Officially, at least. The Browserify community has found some workarounds, which may be helpful for existing and complex applications. For all other scenarios, we recommend simply using Webpack for built-in, first-class async support.