How to use SVGs and image fallbacks with ReactJs? - svg

I am currently using ReactJs for one of my project. Since we all thing in terms of components when it comes to ReactJs, how do we approach having SVGs/fallbacks in React application?
Do we build component for each SVG? or is there a different way you React users build them? I just want to approaching it with the best practise!
I would be really happy if someone helps :)

Have a look at the material-ui library's approach to SVG support. They have a SvgIcon component which you should be able to reuse. Their approach is having the common implementation separated out in the SvgIcon component and then having individual component wrappers for each unique SVG icon.

Related

style isolation in docusaurus

docusaurus is a very useful tool, I love it, we are creating our own component library, the demo of the component library, and eventually rendering in docusaurus, but I found a problem, some of the global styles of docusaurus's own themes affect the React components in the demo. Is there any good advice or elegant way to solve this problem?

Do Theme App Extensions need to be built in liquid?

I finished this review app tutorial where we used new theme app extensions to create app blocks for the dawn theme. The code for the extensions was built in liquid.
This may stem from a fundamental misunderstanding of how app blocks work, but could react be used to build the front end instead of liquid? For example, could this file which displays the average review rating be built with React? Thanks for any clarification!
The short answer is yes, of course you can inject your React into the theme using an App extension.
The problem is, you won't be offering any control of that to the merchant. Your React code does not play in the sandbox like Liquid does. So where some aspects of the Block are exposed to the merchant, which is a good thing, none of a React component would be.
If you want to play with React, Themes and Shopify, go with Hydrogen. If you want to stay inside the usual Shopify themes, like online store 2.0, you want to leverage the functionality of Liquid.
Anywho, I could wrong... have at er and see what happens.

Using Vue Material UI Components with Bootstrap Layout

I am starting my first Vue 2 project and would like to mix Vue Material Components with Bootstrap layout. I have enough experience with Angular Material components to know that mixing them with Bootstrap causes problems. I would like to use Vue Material and integrate it with a Bootstrap theme template. Is this going to be a problem? Thanks in advance.
No problem, you can install the material and the bootstrap without a problem, just be careful when calling the styles, because whoever is last

Using Angular Templates

I have a template to be rendered with angular and a node js application.
I want to make some kind of require('angular'); from my node application and use it's compile service to compile an email template and send the email with node.
Is this possible? Or is it better to look for other alternatives such as this one http://documentup.com/niftylettuce/node-email-templates
Thanks in advance.
At the moment as far as I know no one has figured out how to correctly render angular templates in node. There has been discussion about it, but I don't know of any working module available. For emails, use one of the many readily available templating libraries (mustache is at least similar in syntax to angular). Angular is really geared toward dynamic, interactive DOM changes which you don't need on the server, so it's generally not that great a fit. Rendering email templates and sending them with node is however very straightforward and there are many good modules available to help with that.

NodeJS Skinning

Is there a module or similar things that support skinning in NodeJS? I want to build a NodeJS website, and want to be able to re-skin the website as I like without much efforts, like in Wordpress.
Is skinning supported in NodeJS?
If you're interested in building a website in Node.js and don't need a wordpress-style cms behind it, there are few projects that can help you out.
Have you looked into Bootstrap? It's built with less which you can easily plug in to your Express setup (see the guide here, using the command line executable to set up a new project you can specify less like this: express --css less myapp and it will do all the work for you)
In the bootstrap less file are several variables you can use to change the colours, fonts, sizes, etc, and it's also got a lot of helpers for grid layouts and responsive designs.
It even includes a few useful javascript plugins too which make the ui nicer with less work.
There are also a lot of sites with themes and theme generators around which then work on top of bootstrap, and may achieve what you want.
Plugging in this sort of solution (whether bootstrap or other) is about as close as you can come to getting skinning for node; As otherwise suggested if you're looking for a CMS out of the box as well, probably best to look for another platform like Wordpress.
Node.js is not a content management system. It is a platform on top of which you could built a web server with a content management system. To answer your question you need to be looking for node.js based content management systems that support themes.
The only node.js CMS that I am aware of is Calipso. It's still pretty alpha-stage. It may have some theming support, but it is nowhere near as polished as Wordpress.
Also is there a reason why you want to use node.js? I mean there is nothing wrong in using Wordpress for creating a themeable website - it is just awesome for that.
If you just want another OnlineShop, or maybe a blog, i think nodejs is maybe not your right choose as Jed Watson told.
If your requirements are more complicated, and you want a quick and easy implementation of a nice web interface, and you have html, javascript, and css knowledge... I strongly recommend you just trying to work with MEAN.js
It puts together MongoDB Expressjs, AngularJs, and NodeJs.
Use this, for example with a yeoman fullstack constructor and you will have a powerful webapp, with user autentication, and much more in a few minutes.
After that, the use of jade, less, scss, and similar languages of modelling the front, and the easy way you can also model collections in the back, is for me the best combination you´ll find for creating a website today.
Hope it´ll help you
King Regards

Resources