How can i create Header project in react and want to share the same to other projects without npm?
Is there any way I can share script and selector like <Header></Header> and they can use the same?
I have tried so many things but cann't able to share with other projects.
Maybe you are talking about reusing Header component in some other project. I suggest you to take a look at Storybook . You can simply add that same component inside the new application and then use it there.
Related
Vite React template has a file called index.html at the root of the project.
The way I understood, this file is static.
I want to change the title of each page based individually.
I know I can use useEffect in each page and set the title using simple vanilla JS.
But I wonder if there is a better more standard react-y way to do that?
You can use react-helmet package, it enables you to add head tag in any component that you want
Using useEffect seems pretty reasonable. You can encapsulate it into your own useTitle hook for more clarity (see for instance https://www.30secondsofcode.org/react/s/use-title).
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 want to move a big Ember v1.4.0 app to React. Instead of creating a new UI from scratch. I want to start building it in React my converting pages over slowly, essentially mixing React and Ember pages in one website.
Goal:
The above is my ultimate goal, but my first goal is is to create a single page in React that is called by Ember's router.
What I have tried so far: I wanted to create a React component in a ./templates/myFirstTestPage.handlebars because, as I understand it, the router.js calls a template file. But I am unsuccessful creating a React component in the handlebars file. Firstly, I cannot use <script> to import React because <script> does not work in handlebars. Secondly, I believe the handlebars is parsing the React app in an incorrect way. Actually, I don't really understand how, and in what order, these frameworks do the rendering.
Possible solutions (but I need implementation details):
Somehow create a React component in the template folder with the .handlebars extension.
Refer to the url of a React app in the handlebars of an Ember app
Have the Ember router map the url to a jsx file. This solution seems really viable to me. I think to myself that surely the creators of Ember must have thought that people might want to have their Ember app refer to some regular html file. Hence, I hope someone might have some knowledge whether this is possible or not.
Somehow create my own router that maps urls to particular files. If its a React component, then I'd map it to my jsx file, if not, I let Ember's router take care of the mapping. I don't really know how to implement a url mapping thing though.
On a React app, a client needs to customize some pages for some specific needs.
Is it possible to inject some custom JS / React component and "override" the behavior of an other component?
I don't want to keep the custom component on the bundle all the time and do some control because other clients may customize other features as well ...
Basically, I'm trying to inject a custom JS with a custom component inside and use it.
Anyone had to do samething like this?
In my company we had kind of the same problem and it can get very messy. You can use window.eval() if you import an external js code to make it run in your project but I would not recommend it at all as it gave us a lot of headaches...
That would be for JS code which are instructions and not components.
If your client has their own components maybe you can suggest them to create a node library so you can import their comps.
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