I'm working with some developers to create a website, and I want to know if React will work if I hire someone to create the html and css first, and then have another person integrate react with those templates
Is react integratable in this situation, or does react have to be used from the get go? I am a python programmer, so I have no clue how react works lol
The main advantage of React is being able to generate HTML based on JavaScript code, if the HTML code is already done I'd find it kind of pointless to use React.
I am just a 2nd year student but I'd recommend to use React from the get go.
It should technically be possible to integrate react with already existing html/css files, just like you can manually alter the html and css files in your react project’s public folder, but you dont really provide a good reason for doing so. It might be easier, and more sustainable for maintaining the project to simply move your existing Html into a react project. If you dont have an actual good reason to use react for this project (like for example having primarily react-experienced developers on the team or needing to use specific react libraries and functionalities), there is no real harm in developing a website with plain html, css, and js.
Related
I do my web project and I want to do a react for make my website better but I don't know how to put all the asset that I made into the react.
Start reading the official docs.
https://reactjs.org/docs/getting-started.html
My company has a few different websites, mostly with a react front end but a couple without.
We want to build a cookie bar that can just be imported and used anywhere...basically it should be framework independent and ideally an npm package.
I'm not entirely sure if this is possible but I had the idea to construct the cookie bar package with react...it would be super simple, just a few components with jsx and styling and once that is all done, use webpack to compile it all into vanilla javascript that is independent of react and can just be inserted on any site with any or no framework.
All of the html of the cookie bar (that would have originally been written as react components / jsx but then compiled into vanilla JS with webpack) which will then be injected into the html of the website where the script is included.
Is this possible?
All I can find online is people making react components as npm packages but this is not exactly what I am looking to achieve.
Thanks in advance!
This is absolutely possible.
If the target page doesn't have React in it at all, you may want to bundle it as a tiny app and mount it as in the answers here. If it does have React, you can probably find away to use the existing React by putting it on window in the other code (import React from 'react'; window.React = React.
For bundling a single component or a few components, you may have better luck with Rollup than Webpack (they have different use-cases; both are bundlers, but Rollup has some niceties for bundling libraries specifically). This example may be useful (it also includes Sass, Storybook, and some other extras that you might or might not need). This would give you more flexibility and possibly smaller bundles, but would mean you'd still need a React app to actually import and use the components, as above.
Since your project scope is quite small it should not import or embed the whole react library.
I strongly encourage you to check Preactjs (https://preactjs.com/) which lets you write your code in JSX but has a much lighter footprint (3kB atm). Your component will load way faster, especially for mobile users
Then bundling with tools recommended in the other answers (rollup is great) is the way to go
I am currently migrating a Play Framework application with a view composed entirely of Twirl templates into one with a view composed of a mix of Twirl and React. I have written a PlayRunHook to integrate Webpack with Play's build process, and the result is JavaScript bundles whose names match what I have hardcoded in the new barebones Twirl templates.
So things look like this:
#(title: String)(implicit session: Session, staticAssetResolver: StaticAssetResolver)
#main(title) {
<input type="hidden" name="pageTitle" id="pageTitle" value="#title">
<div id="content">
</div>
<script language="JavaScript" src="#staticAssetResolver.asset("dist/profile.bundle.js")"></script>
}
The React code in the bundle knows to mount at the "content" div and receives props provided in the template.
This all works well, but I would like to avoid hardcoding the bundle name so that I can benefit from asset fingerprinting. This means figuring out a way to more tightly couple Webpack with Play's build process so that Webpack's output can be incorporated into the Twirl templates.
I have researched plugins, but what would you suggest for integrating Webpack and Twirl in this way?
This is probably not what you want to hear - I too messed around with trying to figure out how to embed interactivity in Twirl... but in the ended I concluded it was a back idea to mix javascript and twirl, ended up doing this;
https://blog.usejournal.com/react-with-play-framework-2-6-x-a6e15c0b7bd
It could be that I'm simply not familiar enough with Twirl, but after wrestling for quite a while, I found that simply "changing worlds" into react, and having it talk to the backend via
fetch(/api/myRoute)
was quite productive. In conjunction with React Router I found myself very happy with the productivity, performance and outcome. I spent little time on "custom" build work, outside of copy and paste from that blog, so was able to concentrate on what I wanted.
I would also say that I am not skilful enough, and did not have time to start writing custom "RunHooks"... so that may also be the problem!
The above link worked well for me... with the only downside being that when changing routes one gets no tool support... so it is manual and risky to change a backend route or method signature. Probably not great for a big app... but for my small set of requirements was an effective strategy.
I am developing a reusable set of UI React components using JSS, which are available in both ES5/ES6 modules. Is there a generator or pre-processor that can transform React/JSX into raw HTML and JSS into CSS?
Try React Studio, it allows you write design/code in React style (e.g State/Props/Components/Flows/etc...) and much more features on their website...
Although it does not compile to "pure" HTML/CSS like you asked, but it can be used as a prototype/design tool with a good integration with Sketch, so any other developer/designer can also use it even if they don't understand React
Follow this issue regarding static extraction from JSS if thats what you need https://github.com/cssinjs/jss/issues/579
I made some SPA using vuejs-templates/webpack and that's ok. But now I am developing a website, almost everything is static, so there's no need to be a SPA. I already made the pure html/css layout.
Now I will make some pages with forms and dynamic content, I would like to use vue components inside these pages.
Tell me which of this ideas is the best or give me a better option:
Multiple entries in webpack: I don't know very well how to do it, but I guess I can create a webpack project by scratch and render multiple entries that I include in the pages I want.
Use browserify: I didn't want to do this, but sounds like a good option... I could use vueify to render *.vue components
Use Nuxt: I never tried, but seems a good option too, I could make a "SPA" with SSR.
Tell me if you have another idea.
Thank you
Don't rule out just referencing Vue as a script file. No bundle, no compilation step. You lose single file components, but you can get something very like them by using js template literals. If your needs are simple and you don't want to impact on the rest of the site, this could be a fine solution.