as the title suggests I was wondering if it's possible to integrate a component built in React with an existing Wordpress website. The component is only about 80 lines long, consisting of a with an image. The component itself was built as part of a create-react-app project. Any insights greatly appreciated!
What is the react component your using if its available in html5 like bootstrap components for example its unnecessary to use react app and craco together due to multiple issues in polyfills and webpack so its harder to maintain if your looking for something simpler it still works and has around 85kgithub users in 2022 .
https://github.com/dilanx/craco
examples of recent issues in stackoverflow
[craco-does-not-work-properly-with-react-scripts5-0-0][1]
[1]: https://stackoverflow.com/questions/71234041/craco-does-not-work-properly-with-react-scripts5-0-0
Yes, React can be used with WordPress, where the content on the front-end built with React is managed by WordPress CMS using the WP Rest API.
Just use the WP Rest API. Hope it helps.
I have recently been learning Next.js for React and I like the routing system a lot more than react navigation. Now I am about to start a react native frontend and I was wondering if you can utilise Next.js's routing system in react native as well as it's other benefits. I know that you can use it with expo but I am a little confused as to how it all works and I am starting to wonder if the Next only works on the web side of things..
Does anyone have any experience with this? Any information would be much appreciated.
Thanks!
Unfortunately you can't do such thing, due to the fact that the views of react native are Equivalent to native views in Java or Objective C. When you get build version of react native , you are receiving Java or Objective C native views thank to react native's RN bridge. Meanwhile, when you get build version of your Next.js project, you are going to receive HTML, CSS, JS and these codes are not familiar to native platforms.
However, you can use your Next.js backend as your endpoints and fetch data in react native via calling this endpoints.
UPDATE Oct_2022:
there seem to be a new tool created for this purpose , called solito. I haven't used it personally but it might meet your needs.
UPDATE Jan_2023:
It looks like there are more Tools being created for Both web and native platforms , check react-native-web
You can check out Tauri. With that you can create from Next.js, React, Svelte etc. cross-platform native Apps. Currently, Windows, Mac and Linux are supported stable. Android & iOS is currently in Alpha
The magic behind Tauri is, that they provide around your Frontend library/framework a Rust layer with that you can interact with platform native APIs. They call it Commands.
You can find the guide for Next.js here.
Also, if it's not exactly answering the question - "Is it possible to use Next.js in React native?" - I hope that it's helping everyone who is searching for a solution to use Next.js as Cross-Platform Frontend Framework
I read a thread on ycombinator on this where Solito was mentioned and tried it out. In the comments I found this, which suited my needs best :
https://github.com/mlynch/nextjs-tailwind-ionic-capacitor-starter
Solito looks nice but the all in one repo was using Expo, which I did not like because it installs an extra app. I would check it out for yourself and look at the repo above too, which is using Capacitor and is aimed at having one codebase for the two apps.
Both examples worked well. For Tauri I could not find the mobile support so I didn't try it. I would be interested to read more about people's experience with running a minimum stack for cross platform development.
Note : Solito uses React Native, the repo uses Capacitor instead, which may also suite your needs because it works on both iOS and Android.
There's a lot of support now for this tech stack. Besides solito, which is already mentioned, there is also https://tamagui.dev/ which tries to solve all the issues with react-native-web and Next.js along with Solito.
While they currently recommend a monorepo (which adds a lot of complexity in my opinion), I'm playing around with a vanilla React Native + Next.js here: https://github.com/criszz77/luna
This command should get you started to play around:
npx react-native init MyAppName --template #criszz77/luna
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.
salam;
We developed a PWA based on react-boilerplate. it's totally based on webpack.
now I'm supposed to implement SSR on this application. the problem is that , I can't find any suitable solution on converting current project to SSR.
I tried nextjs but integration with project is not possible. additionally its requirement for changing infrastructure is too much.
I tried some other libraries such as react-snapshot and ... but each of them has some specific issues.
any body can help me?