I want to add an script (react component) for a site which is not created with a ReactJS basis but html and dom manipulation. I want to do it with react since the component is going to operate some logic and also it is going to have some kind of state. I've never created a react feature for a website not running with react entirely. Do you think adding a react feature to an existing app is a good idea at all? And if it is, which is the best way to add some style to this script feature?
https://reactjs.org/docs/add-react-to-a-website.html
It covers how to solve this problem using babel but what about styles and css?
Regarding whether it's a good idea we get this per the official React Docs:
React has been designed from the start for gradual adoption, and you can use as little or as much React as you need. Perhaps you only want to add some “sprinkles of interactivity” to an existing page. React components are a great way to do that.
Here's their approach to adding limited React functionality to non-React pages without any build tooling, just pure HTML DOM.
As for personal opinion, which is veering off-topic, I've only done full pages in React bolted on to non-React websites. Though those worked fine, Mosè Raguzzini may be right in that it's too much hassle/overhead if it can be handled with vanilla JS.
You can import styles in multiple way:
normal css embedded in html as usual and className on react tag
import css with proper webpack plugin
styled-components
inline styles
CSS modules
Notice that if you are not moving to API or you do not need react features a refactor from vanilla javascript to react could be a unuseful pain.
Related
I have been hired to develop the frontend for an HTML template that will after be sold in a platform. We would normally do the job using PHP, Gulp, Webpack, etc but since I am starting a course on React I would like to use the ability of developing with react components and the routing tools only during the develop stage.
However, I was wondering if you know a way to build single React pages/urls into separate plain HTMLs as well as the plain CSS. I have seen a tool called React-Snap but I cannot get it to do what I want.
Any help would be much appriciated!!!
Thanks
Trying to make a react app using pre made sources. I have a fully functional web page made in vanila js. Is the best approach (or maybe the only one) to turn the html page into multiple react components and just delete the html page or should I maybe find a way to just implement react code into html?
Why write 5 times the same button when you can write it once and import it the rest 4 times? This assures a unified look on your site and that any minor change you make will be reflected in all the proper places.
Consider a testimonial slider. You want this in your home page and in your about page. Why have the need to update it in two places?
If you are going the React way I will suggest to go all the way. Componetize your site, see the true power of React. Maybe its an overkill for your site (every component appears once -doubt-) but if this is the case you will start learning a really powerful tool with a simple example and the progressively get better.
I have been developing a VueJS website for a few weeks, and realised my design skills were not good enough to design a proper landing page. I came across this stunning Bootstrap open source template and really would like to use it.
However, I would like to stick to VueJS since I need it for some other dynamic pages. What would be the best way to integrate this template into a VueJS component? It uses Bootstrap and a bit of JavaScript as well. I know of Vue Framework such as BootstrapVue, but they would require rewriting the whole page using its custom components (such as b-nav or b-nav-item).
I have tried just copying and pasting the HTML into a component but I then have the problem of the CSS and JavaScript. Is using a bootstrap.css file in Vue JS a good practice ?
I am not asking anyone to do some boring job for me, but it seems to me like tweaking such a template so that it fits to a VueJS component always has some side effects, and I wanted to make sure there were no easiest, more elegant and reliable solution for this.
The whole point of BootstrapVue is to drop Bootstrap's dependency on jQuery.
It only uses Bootstrap's scss and the jQuery part is replaced with BV's own JS (provided via Vue components).
At first glance, it doesn't look like that would be your case, since you want some additional jQuery code (the theme's own JS) - currently written in jQuery.
However, when looking closer, the theme's own jQuery script is quite small. It basically does three things:
routes the page URLs when you navigate between sections (which could/should be replaced by Vue Router calls in your case),
implements scrollSpy (which has a Vue alternative) - it does it for the same purpose - knowing when to change the page URL,
implements magnificPopup (which also has a Vue alternative).
So it looks like the jQuery dependency could be fairly easily dropped, provided it's replaced by Vue code.
You basically seem to want a Vue variant of the Bootstrap theme. Or, to be more exact, a BootstrapVue variant of it.
If we were to look for the best possible candidate for the job, it would probably be found somewhere in the pool of Vue or BootstrapVue experts, as well as the creators of the Bootstrap theme (chances are they shouldn't find BootstrapVue difficult to use - considering the quality of their template).
Whether or not this is a job fit for your abilities is a question only you can answer but, unless you're purely interested in the functional part (getting the job done[1]), it is definitely a good opportunity to learn more about both Vue and Bootstrap.
To provide a helpful estimate, a senior FE developer would take anywhere between 8 to 20 hrs to create this template, provided they know Vue.
[1] Getting the job done with the least amount of effort would mean to simply inject the entire template as a page into your existing Vue app, making sure you import everything it needs (jQuery, jQuery.easing, Bootstrap, magnificPopup & scrollSpy) - roughly estimated at ~4 hours - could be less but you have to account for testing and any potential bug fixing.
I strongly advise against this approach as it's likely to significantly increase the size of your app while reducing its scalability and flexibility. This approach produces applications nobody wants to touch as, in time, the probability that any modification will break some existing functionality increases exponentially.
Since SO questions are supposed to take no longer than 15 minutes to answer, it should be obvious none of the above described tasks is feasible as a Stack Overflow question. Besides, you need to show some of your own coding effort up so far and provide a minimal reproducible example.
Say I have an existing html site, would it be possible to just import over the parts of Gatsby.js that would enable that file to communicate with a CMS like WordPress? Or is it absolutely neccessary that I have to recode this in React?
It is definitely possible, but whether or not it's worth doing is a completely different question. Gatsby is a React framework, so you would have to either change the mount point for Gatsby, which is currently ___gatsby or your would have to create a div in your HTML with the ID of ___gatsby.
If you look at the generated index.html in your /gatsby-project/public folder you'll see this div is present and empty, because like a React app, in the Gatsby version of App.js it's looking for that mount point.
However, if your use case is to just get data from a CMS, you'd probably be better off using vanilla JavaScript or PHP to pull from the endpoint. This is extremely dependent on what you need to accomplish.
TL;DR:
You can do it, but maybe you shouldn't.
I am just starting to use create-react-app. Should I create the HTML/CSS before adding to create-react-app components and applying JSX (so that the layout and elements are styled )? I have not learnt inline styling in React yet, trying to get proficient first.
Typically, people start with create-react-app or some boiler plate code. You can simply make all those afterwards.