I have a number of web components consumed in a separate application. They all depend on React. React is not in the parent App, but all of the components will depend on React. Is it expensive to call and load React in each component, even over CDN? Or is there a better way to specify a common dependency shared by multiple web components?
Your browser will keep React in cache so even if you call it several times it will be downloaded once. You can see it in Chrome Dev Tools (HTTP code 304 Not Modified). So it shouldn't impact overall performances.
If you use the Web Component technology you could leverage HTML Imports to load dependancies.
You could also use a module loader like RequireJs.
Related
This might be a silly question, but after reading many documents, I am still not sure. I know there are 3 main types of rendering:
Sever side rendering (render at request time)
Client-side rendering (render on client side)
Static site generation (render at build time)
I have some experience with Next JS, and I know you can choose which rendering type you want for a page in Next JS.
However, for React JS, from what I read here and there, it seems to be client-side render. But when I host a React webpage (say on S3), I would build it first and host the generated static contents on S3. Doesn't this mean React JS fall into the static site generation category? What is the "build action" doing anyway, and how is it different from rendering?
When you write your code you more than likely seperate your concerns and components into different files. With react you likely have a .js file for each component, you may also have a .css file etc etc. This is great for organising workflow, but not idea for a production app.
When you "build" your project, react takes all these files and merges them together and optimises for fast page loading. You are left with a build directory which contains the files ready for deployment.
Rendering happens as the page is loaded. It is the process of react determining what the UI will look like by checking what components need to be loaded and what state they are in.
I am working on a react app with mapbox that gets data from a JSON file and adds the data on the app.. I have successfully built the app. But what I want now is that I want to be able to use my react-app as a web component. In a way that it will be usable in websites and web apps.
Think of it this way:
Your React application is the U-Haul truck that delivers everything from the Web Server (Back-End) to the Browser (Front-End)
Now you say you want everything wrapped in a (native) Web Component:
<move-house></move-house>
It is do-able, but you as the Developer have to develop all dependencies
It starts by fully understanding what React is and does, so you can wrap all its behaviour.
Unlike other Frameworks (Angular, Vue, Svelte) React has no "Make-it-a-Web-Component" option,
because React, with its virtual DOM, is a totally different (and rather outdated) beast that doesn't comply with modern Web Standards. (today [Dec2020] React only scores 71% on the Custom Elements Everywhere test)
See: https://custom-elements-everywhere.com/libraries/react/results/results.html
for what you as the developer have to fix, because React does not do that for you
Some say React compared to modern JavaScript technologies, Frameworks, Web Component libraries like Lit and Stencil or Svelte, is more like:
It is possible in react using direflow. https://direflow.io/
How can we use share components between react-native and react web projects. I have read react native can be derived from react. How is it possible to use same js code between two projects (fully or partially) ?
Take a look at the react-native-web library. It's pretty good:
https://github.com/necolas/react-native-web
As long as you only use react native components, e.g. View instead of div, and Text instead of p etc, you'll be able to share view components between your app and website. Then you can pass down all the data from API calls etc as props from within the individual mobile app/website code.
In my projects I have a common folder that contains all these shared view components, and only put the platform specific code inside mobile or web-app. It works pretty well that way.
I heard "grommet with reactjs" has good UI. So I want to try "grommet" on my environment. But I couldn't understand how to use "grommet". Because I expected this module can work on usual internet browser only. But sometime some websites explained "to use node.js" for grommet. Is this serverside module? Can't use "grommet" internet browser only?
https://v2.grommet.io/
I already read component's page but I wasn't able to understand.
https://v2.grommet.io/components
React is a framework for creating UI components.
Grommet is a set of components built with React. If you need a calendar in your application, you can use the calendar provided by Grommet instead of building your own.
Another example of a component library similar to Grommet is Blueprint.
You can use Grommet wherever you use React. React is meant to be displayed in a browser. React can also be rendered server-side (into static HTML) and then made 'dynamic' again on the client (browser side).
React is javascript, and if you want to see React in a browser, the browser needs to fetch the javascript and HTML from the website from a server/website. You can, but do not have to, use Node.js to serve your React/Grommet website.
We are currently moving an application from asp.Net to React/Redux and .Net core. The application is really complex so we are trying to make so that each page its is own module. But there certain components (Modals, PDF viewers, and other specialized viewers) we need to access throughout the application. Is there a way to add these components from other React projects in a specific application without having to load the entire application. Or maybe create a core React/Redux library that goes in the entire application?
Thanks
Note: we are currently using Webpack, ES6, React and Redux
As a sibling to your modules directory, you may have a shared directory. Inside here, usually, you'll have directories like styles/, fonts/, images/, and ... components/. The components here may be thought of as the atomic structures that create your "molecular" modules. For example, any custom UI components (e.g., buttons, dropdowns, tooltips) go here--assuming you're opting out of MaterialUI.
Then from within your larger "feature" components, you import these components and use them.
As a further step, you can build all your shared components as a private npm module and bring it in that way.
Since Redux is in the discussion, aim to make your routed components be container components. In other words, in <Route path='/something' component={ThisComponent} />, ThisComponent ought to be a generated container component, via the connect()() method.
I would advise against using a Router as your application could easily break should the .net application change urls.
Another option would be to use something like React Habitat