I recently heard that there is a component called styled component in ReactJS. This question was asked me during one of my interview.
If anyone has an idea, kindly explain.
Traditionally you'd do the styling of your react app using css or a preprocessor like SASS or LESS. An alternative, that is becoming more popular recently, is to place the styling of your components within your JS.
Styled Components is one of the many packages that enable you to do this: https://www.styled-components.com/
Other examples include cssinjs: http://cssinjs.org/ or glamorous: https://glamorous.rocks/
Related
Good day.
I have done some visualizations with Plotly in Python, but I have very limited experience with Plotly Dash. I have a React app in which I want to embed Plotly Dash components that my colleague created in Python. Is there a way to do that?
I see that you can use React to make Dash components, but I have Dash components that I want to embed in my React app.
Is that possible?
Any and all assistance is greatly appreciated. Thanks!
It's a weird question, but to summarize it, no, you can't use a Dash component in React.
One thing that is very important to understand is that DASH COMPONENTS are REACT COMPONENTS.
So, reproducing a Dash component in React is very easy (mainly if you're using CSS classes in your project)... In the links below, you can better understand how the Dash components are created using React:
https://dash.plotly.com/react-for-python-developershttps://dash.plotly.com/plugins
https://dash.plotly.com/all-in-one-components
I hope that this can be useful to make you a better understanding... Let me know if something is not too clear;
Regards,
Leonardo
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.
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.
I'm used to writing React Native code, but I'm currently working on a React App, so I was wondering is there is something like React Native Elements but for React as such.
https://react-native-training.github.io/react-native-elements/
If I understand your question correctly, there are many UI component libraries suitable for React App development. A few that come to mind are:
Material-UI
React components that implement Google's Material Design.
https://material-ui.com/
React-Bootstrap
The most popular front-end framework, rebuilt for React.
https://element.eleme.io/#/en-US
Element-React
Element was initially written in Vue, which has many elegant UI components, but we also love React, so we forked it for the React community.
https://github.com/elemefe/element-react
Can I combine material-ui components with non-mui components without problems ? Are they compatible ?
If not, why not ?
In general there are no obstacles to use in one app bouth Material-UI and other Components. The only thing you need to take in mind that mui components need to be wrapped into MuiThemeProvider, so you need to organize your app structure to cover them all.
An additional issue may occur if you're going to create the themable app. You'll find that your non-mui components don't follow theme colors. In that case you can try to use react-theme-provider which solves common issues about it.
Usually ui components can work pretty well together. I know that some material ui component werent composable you had to pass props to customize them instead of putting component as childs but they have been working on that and you can customize with your own components more and more.