Ive got a modular .NET application, which loads controllers, views and components from assemblies as plugins.
Going to learn React (totally new to it) - and got a question. Does React support splitting its components into multiple assemblies and loading them at runtime?
Yes, it does.
I suggest you to read React official documentation.
Almost every React component will produce some HTML markup for browser to show. The general idea of component splitting is to split HTML markup between several components like so
// App.js
class App extends React.Component {
render () {
return <div>
My first component
<Component1/>
</div>
}
}
// Component1.js
export default class Component1 extends React.Component {
render () {
return <div>
This is internals of component
</div>
}
}
Related
I am talking about a big web app that has jquery and bootstrap stuff init.
Part of rewriting this giant app using react and material UI, we are writing component by component. Things work fine in general as we make progress toward making this a react app soon.
Our problem:
When a new react component is loaded into the page, the existing (already loaded) react components will lose some or all styles.
We checked the new component load new style (classes) which are matching the names of existing classes for other already loaded components.
Ex:
As you can see, jss1, jss2, ... MuiCardHeader, MuiGrid, ... were also the names for the previously loaded components and now they are overwritten for the newly loaded component.
Packages.json:
webpack config:
Some component code: we are using make style and in some cases withstyle
Tried too much stuff. But nothing seems to work. On initial load, the map has all the correct material-ui stuff but as soon as I click on a marker and the popup component loads in. Now the map is messed up as some styles are overwritten.
How can we make it so that each component styles are named unique and never conflicts with other stuff?
I checked MUI docs and GitHub issues about kinda similar issue but nothing is working for us.
Any thoughts?
If I add:
import { StylesProvider, createGenerateClassName } from '#material-ui/core/styles';
const generateClassName1 = createGenerateClassName({
seed: 'App2',
});
my custom classes ( like root, mydivstyle) will have the prefix like app2-jss1-root, app2-jss2-mydivstyle, ...
but muiCard, MuiCardHeader, ... still being overwritten.
So after a few trial and error. I was able to solve this.
Basically we don't have a component tree path where you can could add a single class generator because of our app structure at this stage. We will soon have one.
The solution was to wrap every component like.
import { StylesProvider, createGenerateClassName } from '#material-ui/core/styles';
const generateClassName = createGenerateClassName({
seed: 'anyprefix',
});
class ActivityContainer extends Component {
render() {
return (
<StylesProvider generateClassName={generateClassName}>
<componenet/>
</StylesProvider>
);
};
}
I had to do this on the container level, this way any component loaded in that container will inherit this prefix.
No more conflicting class names between components and can load them dynamically.
Not a great way but no other option at least in our case. It will leave more classes on the DOM.
So I'm trying to add paypal smart checkout to a react app and I seem to not be able to do it. The problem seems the script does load for the fist couple of seconds then immediately trows error saying the script does not exist when a second ago it was there
I have tried what a guy on youtube suggested for loading third party libraries but to no avail. I get that problem, I tried several other ways suggested but really this is the best approach and it still fails
App.js------------------------
import React, {Component}from 'react';
import './App.css';
import Paypp from './pyapalload'
class App extends Component {
constructor (props){
super(props);
this.state={
hotelname:'',
}
}
render() {
//console.log(this.props)
return (
<div>
Hl
<Paypp/>
</div>
);
}
}
export default App;
second js file
import React, { Component } from 'react';
class paypalload extends Component {
constructor(props){
super(props);
this.state={
}
}
shouldComponentUpdate(){
return false;
}
componentDidMount(){
this.paypa=new paypal.Buttons().render('#paypal-button-container');
}
render(){
//console.log(paypal);
return(
<div>
Test
<div id="paypal-button-container" ></div>
</div>
)
}
}
export default paypalload;
And the script is loaded from the public/index.html
If anyone could help that would be much appreciated.
None of the JS provided by PayPal to render smart payment buttons is intended to be run server-side. It is all client-side code, so your App should merely serve it to the browser, to be executed there.
You can get it working in a .html file first if this simplifies your development, conceptually, and then determine how to best have your node app serve up that client-side HTML/JS
What is alternative way of using package 'react-meteor-data' ? I'm using ES6 for writing react component. What would be best approach for writing meteor subscription in react component so that it will re-render the component if anything change on the server side.
What would be best approach for writing meteor subscription in react
component so that it will re-render the component if anything change
on the server side.
The best approach is using react-meteor-data. What is wrong with this package, that makes you think to not use it?
It even allows you to separate / decouple React Components from Meteor. This is really great because when you reach the point of having written some components that you want to reuse in another non-Meteor project you are free to go without greater hassle.
Of course you could write your own subscription container for react, but with this package you have all important stuff you need plus it is maintained and tested.
If you have trouble setting up a container for subscriptions, you may dig deeper into these tutorials:
https://guide.meteor.com/react.html
https://themeteorchef.com/tutorials/using-create-container
Using react-meteor-data, you first create a HOC container that subscribes to the data and passes it down as props to your component.
Container:
import { createContainer } from 'meteor/react-meteor-data';
export default FooContainer = createContainer(() => {
// Do all your reactive data access in this method.
// Note that this subscription will get cleaned up when your component is unmounted
var handle = Meteor.subscribe("todoList", this.props.id);
return {
currentUser: Meteor.user(),
listLoading: ! handle.ready(),
tasks: Tasks.find({listId: this.props.id}).fetch(),
};
}, Foo);
Component:
import FooContainer from './FooContainer';
class App extends React.Component {
render() {
return (
<div>
{this.props.currentUser.name}
</div>
)
}
}
export default FooContainer(App);
Check out React docs for Higher Order Components to understand how the container works.
We have a Webpack bundle exposing React components. The exposed components contain nested components from the same bundle.
We want to allow users to replace components with their own specific version.
For example, the following component structure;
class A extends React.Component {
render() {
return (
<B/>
);
}
}
const C = require('./C');
class B extends React.Component {
render() {
return (
<C/>
);
}
}
from which the top-level component A is exposed in the Webpack bundle:
const A = bundle.components.A;
Our server-side web framework relies on the exposed bundle interface to invoke the React components.
From this structure, an example use-case would be to replace the nested component C from component A.
Current options that we see for this are;
add a method to the class B (and A) to replace component C
create a registration mechanism, e.g. by using the filename or logical name of C, and a generic method to the bundle to replace a component. For example: bundle.component.replace('./C', './custom-C');
...
What would be the best way, i.e. common practice, to replace a (nested) React component in a Webpack bundle?
Joost, I've got the same problem and the way that I'm been handling this is creating an Block component which decides what component should take place.
This is a working project importing webpack bundles and deciding which one should take place. If they are defined in the template scope I switch the render method.
https://github.com/wallynm/react-template-system
In the end we chose to use render-props, HOCs, and adding some replace functions for specific components.
Complete newbie to React and trying to find out how to load the HTML for components rather than inserting it directly in the render method. For example
import React, {Component} from 'react';
export default class Login extends Component {
render() {
return (
<!-- how can I provide a link to the HTML template for here? -->
);
}
}
React does not have HTML. The JSX that you write in the render method is actually compiled into JavaScript. At the core, React components are all JavaScript. The styles are also inline. Componentisation is neat in React because HTML, CSS, JavaScript (interactions) are all in one place, as JavaScript.
To insert raw HTML, React has an attribute dangerouslySetInnerHTML.
<div dangerouslySetInnerHTML={createMarkup()} />
If you want some type of organization, you can use variables to set the html and then assign that to the render functionalty, but React does not use html templates
var hello = React.createClass({
render: yourVariable
});
I think you might be confused about how JSX works.Just in case, I want to clarify that JSX is what they call "syntactic sugar", that turns React methods such as React.createElement into that XML like syntax. For instance:
var Nav;
// Input (JSX):
var app = <Nav color="blue" />;
// Output (JS):
var app = React.createElement(Nav, {color:"blue"});
(from the React docs)
So, to the best of my knowledge, the JSX syntax actually belongs in the render method. If what you are really looking for is the best way to separate and reuse purely presentational code, you should read on separating your app into Container and Presentational components
https://medium.com/#learnreact/container-components-c0e67432e005#.dzjqc8yrn
https://medium.com/#dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.mn9nf6lz6
Stateless/Presentational/Dumb Components are just functions that return JSX. So you could have your Template component:
import React from 'react';
//you need to import React to use JSX, as it will be expanded into React.createElement calls...
function Template(props){
return (
//...your template here...
);
}
And then your class
import React, {Component} from 'react';
export default class Login extends Component {
render() {
return (<Template {...props}/>);
}
}
}
Makes sense?