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
Related
I try to follow vercel next.js example folder structure, but don't know what is the difference between ui and common inside components folder in vercel/commerce next.js example source code.
It seems that UI is an atomic styled component that is a reusable building block, and Common is a component that is build using what have been defined in UI folder but used everywhere too.
This is the source code:
https://github.com/vercel/commerce/tree/main/site/components/common
That is a great question! I am also developing on top of Next.js Commerce, and I find that they don't provide any specific documentation for the custom hooks, schema (API) and the overall structure of the project.
It seems that UI is an atomic styled component that is a reusable
building block, and Common is a component that is build using what
have been defined in UI folder but used everywhere too.
You are right!
Essentially in the components/ui folder, you will find all the components that comprise of the UI design of the application & are used repeatedly over the website. For example, button, link, grid, dropdown, input...
In the components/common folder though, you will find components that are also used repeatedly throughout the application, and are not single elements like the UI ones (button, link, input...). Instead, they are a combination of UI components with additional functionality, that are also meant to be used in various places through the code (e.g. avatar, footer...)
Hope my answer was clear!
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.
We will be doing our first project using React.
It will not be a Single Page App, but a Multiple Page App.
What I'm trying to figure out at the moment is : what's the difference between a component and an app.
If I only use components, can I still use Redux to have some state management on the current page ? Or do I need an app for this ?
Thanks for the information you can bring !
THoma
There is no special object called "React App". React Components build an "React App" by coming together.
But React Components are formed like tree structure. That means each component have a parent component so you can create a React Component that named "App" and can put another components inside it.
You don't need redux for state management in React Components.
I hope the answers have helped.
Your app may contains a single component and still it will be a react App. If you are using multiple components in a page you can still use react-redux. Redux is basically a container for your states and let suppose you need some state from one component to be consumed in another, Redux provide you a mechanism to make the communication efficient and predictable.
You can also look at the React Context APIs as an alternate to Redux.
An app is simply a component that holds the root of the work you are trying to do. For example an App may have the navigation menu, testimonials, adverts, content, login avitar etc.
If you are making a single App per page (For example a testimonial) then you would still have a SPA. For example, adding testimonials, searching, editing.
You should only use Redux if you are using a SPA with lots of different parts with data in common. If you are making a one-app-per-page and there is no cross over in data then you can simply using Reacts State/Props to hold your data.
Redux is good, but it forces you into a complex path your should try to avoid. If you find yourself wanting data from different domains (customers address and a list of testimonials) then you should use Redux.
If this is a new applications (green) then I strongly recommend you build the whole thing within a SPA using React-Router to control components. you can use frameworks like Next.JS to ensure the site remains small in size (dynamically loading script only when required).
I need to make a bit-src place that hold my React components from different React UI framework, so I found that bit can make it easy, however how can I push React UI's components from many React UI into bit.into bit-src
(disclaimer - I help maintain Bit) You can export components from various projects to the same collection, thus creating your curated collection of components you use in your projects.
Each component can have its own build/test process. Components are completely detached from each other in regards to their build processes. So you can have components from different frameworks in the same collection.
Organizing the collection is something you control. Do whatever fit your needs.
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.