I'm creating an app with React , and my main styling comes from Material-UI . I want to use only one component from materialize-css which i really like (Carousel) .. I both tried implementing Carousel with M.Carousel.init method (npm installed materialize) and via jQuery as a script tag in public.html file (following instructions from materialize site ) , and both failed . Cant show my Carousel. Trying Carousel without material-ui installed , succeeds !!
Is there an issue concerning the collaboration between these two Frameworks ??
Thanks in advance
Related
Context
New electron user here. I just cloned and installed the recommended React + Electron repo: https://github.com/electron-react-boilerplate/electron-react-boilerplate
Now I want to use Material-UI. So I thought I just follow the instructions here:
https://material-ui.com/getting-started/installation/
After I did this, the app doesn't show me anything from Material-UI. I created a Component with a simple App Bar. But it does show nothing.
So I found out that there is another package.json in the folder /app/package.json
I cd'd into it and redid the installation. Restart the dev server but still nothing shows up (no appbar, just white screen).
Here is a screenshot:
Also according to the docs I should add a link for the roboto font to the html file. Where is this supposed to go? I put it into the only html file I found in app/app.html.
How can one set up Material-UI with Electron or rather this specific boilerplate?
I couldn't find anything up to date for this question.
I found the error. Turns out I imported MenuIcon but material doesn't export it. So when I get rid of it, the appbar renders correctly.
I'm working on an update of an existing project, and the whole project uses Bootstrap , and the only place where I would like to replace bootstrap by semantic UI is in components where I defined list items.
Here is what i've done :
1 - I've followed the following guide : Get Started with Semantic UI to install React semantic UI
2 - And in my header tag, i've place the semantic UI cdn before bootstrap
Note : I've use the React Bootstrap for bootstrap
The semantic UI components render as expected , but the only problem is that the whole pages are now using semantic UI even my form field that i've created with bootstrap.
Where can the problem come from?
There can (will) be a lot of conflicts between SUIR and bootstrap. You probably shouldn't import the whole package. Instead install only needed modules. You can find a list of individual ones here
Certain elements in both packages share similar naming patterns, so there will be namespace conflicts. You can rename semantic element keywords in semantic.js and semantic.css.
When i customize vscode source code, i found it hard to add a page.
I know there are many ways to do so, such as Part/Widget/Browserwindow, but only if i new a Browserwindow can i explicitly load html and js files like in chrome browser and it's friendly.
If i use a Part or a Widget, i need to use native js api to do dom manipulation, and it's so inefficient,
~~so i want to know how did vscode team decide to use no ui framework during the development? Is there some trade-off?~~
i tried to import react and react-dom directly in my own contrib file /vs/workbench/contrib/dialog/browser/dialog.ts, and then get successful compilation and the react component shows up, but i don't know how to add babel with the compilation procedure, so i use react without jsx.
so i want to know how to import react framework into vscode source code project to create ui component? Is there some practices?
have very simple sample app which build Create React App + Styled-Components to prove this issue. But I have real big application which I am facing this issue which I am going to explain it below.
I would like to pre-render this app with Rendertron for SEO/GoogleBots and etc. But the problem is when I build PRODUCTION version of React App which use Styled-Components . all the style will be missing on static version which Rendertron produced, but from other side if I try the same workflow with dev-server of app , everything looks fine .
So far I know there is different on PROD version and DEV version of my application when I render it with Rendertron . But I am not sure what cause this issue and how I can fix this issue .
I am looking for solution or idea which can help me to solve this issue .
Here is my sample code which I peppered for test .
https://github.com/AJ-7885/test-styled-component-with-rendertron
Here is screen shot from different version of Rendered version by Rendertron base on PROD or DEV version of the same application .
enter image description here
After a lot of searching around, I finally found out the reason. The Styled Components library uses something called the "Speedy mode" to inject styles on production. This makes the styles bypass the DOM` and be injected directly inside the CSSOM, thus, appearing in the inspector, but totally invisible on the DOM.
Fortunately, Styled Components 4.1.0 came with a fix for this issue! Now you can set a global variable called SC_DISABLE_SPEEDY to true in order to disable the Speedy mode and get the styles to appear on Production as well.
Reference: https://www.styled-components.com/releases#v4.1.0
But the only part I am not sure , how to set disable this Speedy Mode in Create-React-App without Ejecting , Dose any body has any idea ?
You need to render your styles on the server side and inject those styles in your pre-rendered react app. Styled-components explains how to do that here: https://www.styled-components.com/docs/advanced#server-side-rendering
Also, I'd recommend using react-snap for pre-rendering since that is recommended by the Create React App docs. react-snap seems to be more of a React-specific solution that may be easier to implement, especially with styled-components.
Currently I am using Highcharts for my web app, but now I am building an android app using react-native. Will Highcharts work with React-native.
HighCharts works with the DOM. You cannot use HighCharts or charting libraries that depend on the DOM directly in React Native, but you can use charting libraries in a WebView with React Native. I have not use High Charts specifically, but have used other charting libraries with WebView and it works great.
Here you can use this component to send the config json to the componente and it will be displayed
https://github.com/TradingPal/react-native-highcharts
Two main ways you can utilise Highcharts in React Native app are :
WebView component. I used this technique on other platforms (Appcelerator Titanium) as well.
Official minimal Highcharts wrapper for React : highcharts-react-native.
As of now pre-requisite for this are:
node 11.2+
npm 6.7.0+ or similar package manager
React 16.4+
React native 0.59.3+
To install:
npm install #highcharts/highcharts-react-native
NOTE: There are other un-official wrappers as well like react-native-highcharts but I have not used them.
You can use this module:
react-native-highcharts.
It works using the web engine on Android or iOS and the Highcharts JavaScript module to render dynamic charts.
Example:
<ChartView style={{height:300}} config={conf}></ChartView>
Add this line to the ChartView component : originWhitelist={['']}
Example:
<ChartView style={{height:300}} config={conf} originWhitelist={['']}></ChartView>