I personally recommend using compileFile which compiles from a separate.
If your pug template is simple and concise enough to be contained in a string, feel free to use compile. The pug API reference provides two handy functions: compile and compileFile. The first step of rendering pug templates inside React is to compile the said pug template into an HTML string on the node.js server side, usually in your controller where you handle the data assembly. You also have to spend some time injecting fragments of pug code into React, which I will share my experiences in the next section. React components should work flawlessly under a unified React root.Ĭons: effort will be higher, as you have to do all the ground work of constructing a webpage again. Pros: this is a great opportunity to wipe out tech debt and start anew. This means to build React pages from ground up and inject existing legacy pug-based components into React. The second approach is to start anew, use React as the foundation of the page. You’ll need to go the extra mile to avoid excessive code repetition and will have a hard time if these new React components that live across different roots need to talk to each other. Minimal disruption to how the legacy pages work before.Ĭons: you have to deal multiple React roots. Pros: relatively easy to do, as React supports this fragmented rendering mechanism natively. You build React components individually and inject them into these legacy pug-based pages. The first approach is to keep pug as the foundation of the web pages. There are 2 approaches to handle a pug-to-React frontend migration. This is the reality for most migration projects. To start off, we can’t just delete the entire pug stack and rewrite from scratch overnight we have to migrate the app gradually, one component at a time. You are trying to migrate this frontend codebase to a modern stack: React, webpack, all that good stuff. This is a practical problem I encountered at work: let’s say you have a legacy application written in pug (previously known as jade) template engine, a common choice of building web apps back in 2013 ~ 2015. Be careful with a few gotchas, such as relative pathing and potential client side JavaScript conflicts.
To inject pug templates into React, compile the said pug template into an HTML string on node server side with compileFile and pass it down to React.
0 kommentar(er)
