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.
Related
we're working with Apostrophe CMS v3 and we're trying to add some custom apps to the pages with React. I was able to add components inside using the React CND scripts and loading components as script files in views/layout.html. But it probably isn't best practice. I was wondering if theres a way to add React apps into Apostrophe using npm packages and imports. Thank you very much!
It looks like this question was cross-posted to the Github Discussions forum: https://github.com/apostrophecms/apostrophe/discussions/3393
The response there from the lead software architect:
You can do it in two ways. Which is best depends on your needs.
If you are building a single-page React app but you need some dynamically edited CMS content, you should most likely keep building your React app just as you have been, and use Apostrophe's REST APIs to access piece and
page CMS content where you need it. See the documentation on our REST APIs.
On the other hand, if you are building a pretty normal CMS-driven website
but you have a few experiences inside your pages that would benefit from
embedding a React application, you should carry on with your Nunjucks
templates for Apostrophe as you normally would to build a website with
Apostrophe, and in addition set up a webpack build of your own to build
your React apps, and push the output to a ui/public/build.js file nested
in any module of your Apostrophe project. Any .js file found in a
ui/public subdirectory of a module is automatically included in the
frontend bundle generated by Apostrophe.
In that situation, you can still use the REST APIs to access data from the
React app, or you can pass data via data attributes in your markup. If you
do the latter, the | jsonAttribute Nunjucks filter is helpful to turn it
into a string that is safe for incorporation into a quoted attribute in
your markup.
Hope that helps!
I’ve built a small app with React Native and it looks awesome, but I was wondering - can I just export it for web (HTML/JavaScript) instead making a separate code in ReactJS for it? And if it’s possible, what are the pros and cons? BTW I used a free UI kit for the developing. Thanks!
You have two options:
Use react-native-web and share 90% the same source code, between native and webapp.
Good for non-complex projects;
If your app have native/complex navigation, then it will have issues, because this can't work on web.
Use web react and share some components.
Recommended for complex projects;
If you have a complex native app, share the components can be the best option;
bit.dev can be useful to achieve this solution.
More info:
https://blog.bitsrc.io/6-ways-to-share-and-reuse-react-components-6d80e2fd16cd
You can use Expo to build for any platform: IOS, Android, Web
For the web, you can use expo build:web
It creates a production ready static bundle in the web-build/ directory
Here is the full document for the web
I try to add ReactJS in my custom theme but I don't have any idea to How to integrate ReactJS with Magento 2 frontend.
I want to make Magento 2 frontend using react js instead of knockout js.
Does anyone have idea?
Where can I start and how it's possible ?
In general, you can use graphQL API (with Apollo client).
SSR (Server Side Rendering) should be used for SEO reasons. For simplicity (and speed) you can use Gatsby and treat Magento as headless CMS. I found a tutorial for that a few days ago.
Cart/order processing can be done using standard templates (for simplicity).
For React JS integration With Magento 2 yo need special approach. This module shows how integrate Magento 2 with WebPack for React and JSX compilation. This module provides this opportunity and automatically deploys and overloads magneto page if you bundle js file has changes (live reload) - https://github.com/Genaker/reactmagento2
I need to create a new project using reactJS and lumen 5.5 and i was installed lumen 5.5 and reactJS. but then i was stuck, so i have some questions:
where is the position of the reactJS folders should be?
how i can add a react component in the home page with data-source from lumen api?
how we can integrate between them?
what the content of package.json should be?
i will appreciate any clear answer, because i was spent alot of time to make an integration between them without any results.
Lumen isn't intended to have views, it's primarily intended to be a lightweight API framework. If you want views and a front end, you should use Laravel. Which also comes with a react preset to get you started right away. Laravel also has API routes built in that you can use for your API. The good news is that your code from Lumen should be fairly easy to transfer over to a Laravel project.
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.