I am working on a relatively complex React project. It's integrated with WordPress and includes some static pages, as well as blog and product pages for e-commerce. I have been trying to add the ability for the user the choose the site language, i.e. English or Spanish. I have tried working with a package called react-auto-translate - for some reason, it doesn't work on all of the components with text, so that is probably not a viable option. I've also been trying out the GTranslate plugin for wordPress, which provides a language url, so if the user selects Spanish the JSON url changes to /es/wp-json, making all of the JSON data translated to Spanish. This would seem like the best option, except that it only takes care of the text coming from the JSON data, not the hardcoded text in the React app.
I have also attempted to use the Google Translate API directly, but was not successful in getting it to connect to my app.
Is anyone aware of any other solutions for handling translations in WordPress + React applications?
You can try this alternatives:
https://react.i18next.com/
Airbnb's Polyglot: https://airbnb.io/polyglot.js/
But take into consideration that none of this will work automagically, you may need to make changes to your project. Choosing an internationalization/localization solution may be one of the things you decided when designing your app.
Related
js and React experts,
Situation:
In our portal we have 2 completely different applications: CMS (PHP based with its own framework, templating engine and so on) and an Online Shop (Next.js based, React technology stack).
Now, there's one module which is already completely built in the Next.js world, but it doesn't exist in the CMS world.
Challenge:
implement the same functionality also in the CMS part of the website with minimal possible effort
Obviously, the naive way would be just to implement it once again in the CMS technology, which is possible, but not very elegant, as the implementation in Next.js will be supported by a separate team, which is going to change things over time and add features, that all would need to be implemented twice.
I'm new to React, but according to an example from the official docs there is a way to run a React app encapsulated in one div element (see https://nextjs.org/learn/foundations/from-react-to-nextjs). I tried it and this minimal example worked embedded in the CMS templating context just fine.
Now, the question is: Would that also work with a Next.js component? Can I render the complete subpage with a separate CMS engine and only one single encapsulated HTML element with Next.js? From what I understood Next.js is built to take over the rendering of the whole page completely, but maybe there's some advanced way to make it work React-like?
Thank you very much for your input.
I am working on a React project for a non-profit with the goal to allow them to post articles to viewers on the website. (like Wired.com posts tech articles)
Currently, I am creating a component for each page, then adding that to the React Router route file so it has a URL, then creating a post preview in a few places to link to that new article page (such as on the front page carousel to show recent posts), then finally adding the actual content to the article page (like paragraphs, links, and graphs).
The client now wants to be able to post articles without going thru me, much like a traditional Squarespace/Wordpress site might have setup, but I do not want to backtrack after creating this React site.
I want to try and create something for the client to fit their needs with the current React site. I can imagine how to allow an admin login section that allows the admin to create a post by submitting the title, image URL, and the body text, but two things I am stumped on are how to go about programmatically creating a JS component file (like ArticleName.js) in a specific location in my src directory, and then also editing existing JS files (like adding a route to react router). I would love to get some direction on how to tackle this. Or am I recreating the wheel and is this a use case of when website builders like Wordpress are a better choice?
Yes, you're definitely recreating the wheel and given the use case it's in their best interest to use something that exists already. If you're doing this pro bono and time and cost are not an issue, it'd be a good experience for you and could pad your resume. If any of those things are an issue, take the off the shelf solution, there's a lot to consider that would be difficult for just one person to do quickly and competently.
I have designed a user interface for a web application using Nuxt.js and Vuetify.js (Nuxt implies the use of Vue.js code)
My interface is quite good, but I need to embed it into an existing website which does not make use of Nuxt/Vuetify stack.
I wonder what are the techniques that could be used in such situations?
I read some old posts like this one: Embed website into my site but I wonder if there is anything more trend and more suitable for a Vuetify user interface?
You could take the transpiled, javascript bundle that Webpack creates for your Nuxt/Vuetify application and insert it into whatever webpage would use it. This would let you use the javascript you wrote where you need it on that existing site, but wouldn't use it for any other pages.
If you don't like that approach, however, <iframe>s are always an option.
feel like this is kind of weird question but still,
I want to create studio where people can create cards using different kind of contents, like Text, Images, Video, Audio, Links etc. and save them, so that I should be able to render them as they designed through some other view.
I am planning to built it with ReactJS Framework. I am new bee to ReactJS, just went through TODO tutorials. And done some work around to understand Drag and Drop features with ReactJS.
But I am still confused about How and Where to begin coding for my requirement. What should be the structure of my application. What all properties each components should have, totally got blocked.
I am not asking here exactly to give the structure for my application, I am looking for some resources/documents where it explains how to structure application for these kind of requirements.
Something like beefree.io is what I want to build.
Many Many Thanks for all your feedback.
I very recommend TinyMCE editor: https://www.tinymce.com/download/. This editor has a lot of features. I can also recommend http://hammerjs.github.io/, https://github.com/yabwe/medium-editor and http://premiumsoftware.net/cleditor/.
If you want to create standalone HTML5 editor, you should research GitHub sources of recommended editors and learn mainly jQuery and AngularJS.
Instructions how to create from basics HTML5 editor:
http://www.simonewebdesign.it/how-to-make-browser-editor-with-html5-contenteditable/
http://blog.teamtreehouse.com/building-an-html5-text-editor-with-the-filesystem-apis
http://buildwithreact.com/
I recommend trying out Unroll.io's react-email-editor: https://github.com/unroll-io/react-email-editor
It has a lot of features that you are looking for and is super easy to use in your web app. Also good documentation is available.
This React component is focused towards emails but if you plan to use it for HTML pages instead of emails, you can easily create a similar React component and change displayMode to web as per Unroll.io docs.
I have seen this being used in production on EmailMonster's email editor.
I want to rebuild an old website made on plain HTML and add some extra functionality with AngulaJS. But since I plan to use ng-views to render templates on my main layout, is it possible to make search engines still find the templates of these subpages?
In a general sense, this is not an angular problem - its the same problem with any single page site that uses javascript to generate your html.
The general solution would be to detect when it is a crawler accessing your page instead of a person (usually by using the query agent string), and then use server side logic to render pages that are suitable for the crawler to process.
Here is one article that discusses this problem:
http://www.webdesignerdepot.com/2013/10/how-to-optimize-single-page-sites-for-search-engines/
but google (or searching this site) for "google seo single page app" will give you lots of other ideas.