I want to create a react based theme engine for NextJS, in summary, the user can upload a set of .js files that contains React components, and I want to inject them inside my app on some specific parts.
The question is: It is possible to compile react component and inject them in my app after build and at runtime?
I also open to suggestions, still looking for an alternative of this.
Related
I have created a website with react.js, Material-UI, and node.js. Now I want to create a mobile app for that website with React-native. I have used redux,react-redux, and saga on the website. I am new to react-native.
I want to know, Is it possible to create a mobile app and website in a single project structure, If possible then how? Because I don't want to repeat the same state and API calling procedure two times.
React.js uses HTML to render pages and React native doesn't support HTML so you can't use direct HTML.
You can buy react native theme that suits your need and you can re-use services and api call logic from react code.
Theme: https://codecanyon.net/search/react%20native
You can't just use your whole code into the react native app.
First and foremost, you must adhere to the react native architecture before creating your UI with react native components.
https://reactnative.dev/docs/getting-started
The most of the assistance will be found here.
There is also the option of creating a new react-native project and using webview to show your entire website there.
https://github.com/react-native-webview/react-native-webview
Let's consider react application with Tiny.MCE component. I need to create a custom plugin. But I would like to create this component as a React component.
I have no idea how could I inject the react component to my plugin. Any idea?
TinyMCE plugins have a specific format for how the JavaScript has to be created/bundled. A React component won't fulfill that requirement.
The process for creating a TinyMCE plugin is documented here:
https://www.tiny.cloud/docs/advanced/creating-a-plugin/
I would recommend placing your custom plugins in their own directory and using the external_plugins option to load them. This will keep your custom code separate from the editor and avoid things being deleted/overwritten if you update TinyMCE itself.
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.
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.
I want to share my components globally. Instead of going with the common isomorphic route I decided to use this guy https://github.com/koajs/react-view.
I can generate user data server side and pass into the koa render method. From there I can import existing components.
I am doing it this way because I have a web app, and a subdomain route that generates a website for my users. I want to share components between the web app and the generated website. So this seems perfect.
However I am using webpack. Webpack allows me to import scss to my component. The react-view lib does not.
My question is how can I compile the imported scss when I am importing the components to the index file rendered by koa?