I would like to generate Typescript React pages or components by using an API and not a CLI tool (like Plop.js) offers for example. The idea is to generate those components from templates based after a tool is run and it should happen behind the scenes without user interacting with the default CLI tools that they usually come in.
Thank you.
You can use http://json2ts.com/ for this issue.
Or also there is package
https://www.npmjs.com/package/json-to-ts
I have come across Hygen and used their setup that was noted down in the Readme to setup an API for generating custom components without interacting with any default CLI tools.
Related
I am creating a react-native application, And the application having many module like
Login Module
Payment
Cart
Product etc.
So I want to follow Micro Frontend Architecture for each module. I have searched on internet but did not find anything. So I want to know is it possible to achieve Micro Frontend Architecture for React-Native application. If yes then How ?
You can use Re.Pack, which is Webpack toolkit for React Native. Since v3 it provides its own ModuleFederationPlugin, which allows you to set up Module Federation (MF) architecture of building micro-frontends.
Example MF app can be found here: https://github.com/callstack/repack-examples/tree/main/module-federation. It covers a basic example of 2 mini-apps loaded dynamically from a "host" app.
There are no proper solutions for RN Micro-frontend so far.
there are a few libraries that may help you to achieve this.
https://github.com/callstack/react-native-brownfield
React Native Wix
But these are not recommended
kindly go through this link so you will be more clear about your question.
https://www.reddit.com/r/reactnative/comments/jdpfrj/microservices_in_react_native/
Microfrontends are concept originating from Web apps world. Achieving the same paradigm on mobile/React Native is possible, e.g. by using Re.Pack, but requires a quite complex setup. On the other hand, using Re.Pack will give you more app superpowers, like dynamically loading bundle splits from Internet.
As a simpler alternative, I would suggest setting up a monorepo containing separate NPM packages for each of the modules. This way you can achieve code separation more natural for mobile apps paradigm.
Recently I've joined a new job and they are working with Salesforce. They have all pages with APEX and I propose to migrate to Lightning components.
I've created the first 7 components and I'm using Atomic Design Methodology (https://atomicdesign.bradfrost.com/chapter-2/) to develop these components.
I want to implement stories (with Storybook) or another similar library to document and put examples of each web component.
My question is... Is it possible? I try to install Storybook in the project and isn't working. The question is simple, whether or not you can. And if not, if you know any alternative to it.
Thank you!
In order to use Storybook, you will need to follow the provided Storybook documentation for lightning "Web Component" rather than the other available options like React and configure your VS Code to work with your SF Environment. Also, you might want to look into downloading the lwc-services, lwc-webpack-plugin and mo-dx-plugin dependency.
I would like to visualise the components I have used in my project. I have used PHP for the backend and Laravel+Reactjs for the frontend.
What I want to achieve is to understand all the components that depend on each other and how/what they pass to each other.
Is there a way to automatically generate the class/component diagram out of the project in phpstorm or vscode? Can I visualise it on the Chrome's dev tool? Note: I am already using the Chrome dev tool for react component.
You can try dependency-cruiser.
dependency-cruiser can visualise dependencies.
I've used a Google extension called Realize for React for my project, which in the developer tool helps visualize components that appear on a specific route.
But the extension crashes often.
I'm building a reactjs application which needs to load another application on demand which is also in reactjs (imagine its a 3rd party application), I read about react-loadable (https://github.com/jamiebuilds/react-loadable) but not sure if that helps my case. Can anyone provide some guidance on how should I approach this problem and what's the best solution.
react-loadable allows you to load the components of your project dynamically ( using dynamic import syntax ). AFAIK you cannot load modules using react-loadable, which are not build statically by you ( i.e., when you build your bundles and publish ).
Your use-case seems more like you want to load a iframe. Just give the source of the 3rd party React / application and it'll load in it's own sandbox.
Also the major problem here is that not all react apps are written and build the same way, so a direct integration is not possible.
Correct me if I missed something or am wrong. Hope it helps! 😇
I have an app based on the create-react-app starter kit and need to switch to universal/server rendering due to SEO issues.
Is there an easy way or example of taking the create-react-app teamplate and adding or modifying it to support universal rendering?
A lot of the examples I see for universal are overly complex for my needs and I prefer to keep it very clean and simple, if possible.
Thanks.
EDIT: FYI,
I found this medium post which points at this repository.
Seems simple enough, but since I'm a newbie on all webpack/react/node related stuff, if anyone thinks it's the wrong approach, would love to know...
There was a proof of concept of adding server rendering in this PR.
I can’t speak to how good it is but it’s something you could start with.
You may also look at some of the alternatives.
A few of them provide server rendering out of the box.
I've just created react universal (server-side rendering) starter used recommendations from redux and react-router v4. Fill free for feedback
https://github.com/gzoreslav/react-redux-saga-universal-application
You can take your app (bootstrapped with Create React App) to the next level by replacing react-scripts with a slightly altered version - react-app-tools, which allows adding server-side code to your project (e.g. for server-side rendering purposes and/or implementing an API endpoint). It will allow compiling and running your app using normal Create React App pipeline, using a single instance of Webpack, on the same HTTP port.
You can find more info by visiting React App SDK.