React rendering non react-dom - reactjs

if react-dom is specifically geared for rendering html elements and react-native renders native views...
Lets say I have an xml type language and I want to use react / jsx to declaratively compose components that have there own native elements.
How do I create base elements (not divs or spans but something else)
How can I get a react component to run its lifecycle method without using ReactDom.render
any resources out there that I can study?
Thanks in advance

You can checkout the tutorial by Nitin Tulswani on writing a custom react renderer.

Related

How to get this layout using tailwind and map elements

I am trying to get this layout using tailwind css and also render elements in this order with vue or react
This layout is called "masonry". I recommend that you check how to do that one in CSS (or with some vanilla JS/package), it's not specific to React nor Vue per-se.
As of how to implement it exactly, SO is not a coding platform so I recommend that you Google that for further progress.

Using custom AEM component inside custom React component

I have a AEM project that has React in it, done by steps from this
https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/spa-editor/react/create-project.html?lang=en
So, right now I have 2 folders:
ui.apps - with AEM components, it includes my custom AEM components
ui.frontend - with React components
Right now, I need to create React component, which will reuse one of the custom AEM components from ui.apps
I am not sure if it's really possible, because I suspect that behind the curtains React components are mapped to AEM components.
But I am not fully sure. Maybe there is an ugly workaround or something that I could look into
Would appreciate any help, Thanks

ReactJS and React native component Library for styling

I'm in the process of learning React JS and I wanted to use one of these library for my styling
ReactStrap
Material UI
The next step for me is to learn React Native as well , and I'm wondering if there will be a similar styling library for both react js and react native with very few differences?
So I could learn and use one library for both react js and react native rather than using two different things for each.
Ciao, I'm using Material UI for my reactjs app and react-native-material-ui for my react-native app. The two libraries are similar (not equal) but very similar and once you learned how to use one, the other one is quite simple to understand.
I`m using Themeor for both: React and React Native. This library has a similar approach to build styled components for React and React Native.
You don`t need to use Stylesheet in React Native and .css files in React projects. You better should read this article about Themeor component and colors using.

What are the limitations of Styled Components in React Native?

There is a full feature set with Styled Components when developing in React. It seems you don't get the full experience in react-native.
These limitation aren't really specified anywhere. What are the exact limitations?
I know selectors is one of them.
Dug around on this for a while and found a good response in a GitHub issue. #Andus in the comments is correct. Styled Components simply works within the bounds of React Native flavored CSS.
There are no pseudo elements in React Native 😅 Similarly you won't be able to use:
Any unsupported positioning
Some transforms don't have transformations afaik
Child / Children / Sibling selectors
Media queries or other at rules
Sorry about that! React Native is very focused on their style system, in the sense that they don't support full CSS but only CSS-like StyleSheets, so all that is done on RN in styled-components is some thin conversions to StyleSheets.

How to use react j s components in react native app?

Is it possible to use all the reactjs components in react native app?If no,what is the best way to switch between react js and react native?
If an app is done using react js is it necessary(Compulsory) to use redux in that?
There are two main points:
1.The base UI components in React (DOM) and React Native are different.
2.The ‘React’ objects in React and React Native are different (React Native removes the DOM-specific stuff adds a lot of native-specific code).
please check this link for more details:
https://medium.com/#aakashns/sharing-components-between-react-and-react-native-f6ce3713658a#.oa4my8p36
I avoid these types of quests because React JS UI components built for the web have different semantics than React JS UI components built for React Native.
React Native doesn't have <div/> or <img/> or a DOM for that matter.
React Native uses React JS components that bind to native views, and things like CSS are so very different than that from the Web.
The only way you'd be able to use a React JS UI component in a React Native app is by making it 100% of the height and width of an embedded webview. It's possible (i've done it for testing purposes), but not ideal.
Is it possible to use all the reactjs components in react native app?
React Native uses other types of components which aren't related to HTML, but to iOS and Android views. Even the styling is slightly different.
If no,what is the best way to switch between react js and react native?
You can still reuse other parts of your code. If you use redux, for example, you should keep using almost the same code.
If an app is done using react js is it necessary(Compulsory) to use redux in that?
No, redux is just an implementation of the flux architecture. There are others, but redux is the most popular one.
If your component contains pure js logic, then yes. React js is meant for Web, where we make use of web semantic. React native extends mobile native UI components.

Resources