How to internationalize ReactJS Web Application including Arabic language? - reactjs

Looking for something compatible with ReactJS to make my Web Application multilingual along with RTL to LTR and vice-versa.
As per my research, I found NPM package called "react-intl" backed by Yahoo using FormatJS is relevant solution.
https://www.npmjs.com/package/react-intl
Is that reliable to use for Arabic language as well?
Do you know any other stable and scalable solution?

Yes, That's perfect you can use https://www.npmjs.com/package/react-intl
for Internationalization in React.
Also I did using above npm in Arabic, Hindi, Spanish.
Go through this link(https://medium.freecodecamp.org/internationalization-in-react-7264738274a0) which is helpful.

I use react.i18next specially when i'm using react hooks
here's a good step by step guid docs

Related

Is it possible to use Material Design for Bootstrap in react js using npm?

I need to use https://fezvrasta.github.io/bootstrap-material-design/ for my web app. I can see npm version also available at https://www.npmjs.com/package/bootstrap-material-design. I am looking for a better solution and guidelines to use it in react. I had looked MDB i.e https://mdbootstrap.com/. This UI kit having react version. But compared to first one, this is a little bit less attractive. Can any help me out this?

How can I develop a plugin for Kibana?

I am really a beginner in ELK stack. I want to learn a plugin building for Kibana. I see their documentation for plugin building (https://www.elastic.co/guide/en/kibana/current/development-plugin-resources.html)
But the thing is, it's not enough for me or I can't understand it properly. I want to customize the Kibana dashboard with some other functionalities I want. I want to build the plugin by ReactJs in front-end. If anybody has any resource or any example codes to share it would be a great help for me. I am using Kibana and ElasticSearch both version 7.4.2
This might be an old question, but since I am facing the same issue, so maybe someone else could use this answer.
I found this presentation by Elastic for how to build you own Kibana plugin, it is an old one, they are working on Kibana 5 I guess, but could be a good starting point for someone.
https://www.elastic.co/elasticon/conf/2016/sf/how-to-build-your-own-kibana-plugins
I have also found this article that is more recent and the author uses ELK 7
https://chunkbytes.com/how-to-create-a-plugin-for-kibana/

Do I need a localization framework for a small PWA in React?

I'm working on a small web application in React and I want it to be in two languages. I've seen several localization libraries like react-i18next and react-intl but I'm hesitant to install something maybe too big for such a simple application. Is there a lightweight library to do simple localization or should I look into a more straightforward approach like a string replacing component?
Thanks!
If it is a small project you probably do not need it.
However, it would be a really good experience to write your own localization component, integrate it with redux and opensource it.
Also, there are some simplified versions already available so you can reuse it and/or contribute into.
Here is a simple react-localization implementation.

Where can i find react js with php mysql source code samples

I am a PHP developer wanting to learn react js. However, I tried googling for samples codes that i can pick up but found none. All my database are in mysql. Seeking any advise on this?
Terry
This tool will create a standard React project seed, you can look at the code it generates for a start.
Otherwise, the React tutorials on their official website is full of code examples.
This site helped me when I learnt PHP, mySQL and implementing a react frontend, along with CRUD functionality, and seeing how the frontend adapts. I know you've asked this question a long time ago, so I hope you've come right, but here's my input for a coverage on
ReactJs introduction
React CRUD operations using PHP API and MySQL
Credits to : Durgesh Sahani
DEVTO

Front end material design stack with angular.js

I am trying to get better at coding and am trying to figure out exactly what front end stack I need. I have red a lot and about a lot of tools but it is too much and I don't know which ones work good together or not.
Currently my idea is to do a web app with the design principles of Material Design from google and use angular for the logic of the front end.
I have red about and used these tools: Angular.js, Material Design Lite, Angular-material, polymer, ionic, bootstrap, Materialize and other various material design frameworks.
I am playing with this demo that I wanted to try out Material Design Lite but went too further and ended up needing Polymer for some input drop-down components. Playing further more with MDL I found out that it is not sufficient as bootstrap as I am used to work and would like to have this in it, but don't get me wrong I like MDL.
ionic has some good features for the local server and easy set up of template app as well other nice things like export to ios,android app, push notifications, but I ended up deleting ionic.css cause it was interfering with MDL and Polymer
I am asking some more experienced web app developers to help me out with this stack dilemma. I would like to get this out of my mind so I can be free and develop more.
Also tools like GRUNT, BOWER and so on? which one is the best in my case?
note: if u got interested the back end would be cakePhP and Mysql and the data type is going to be JSON (angular will send json to php into DB).
It can be overwhelming trying to learn all the tools and using them at the same time. My advice is to just use the tools when you need to.
If your web app is simple you may not even need a framework like angular. If you want to play with material design, you can do that with the css classes that MD lite offers no matter if you use angular / polymer / or plain javascript. ( If you want to use Polymer you already have some material design styles included. )
Some people prefer starting with the most simple solution and keep adding more sophisticated tools gradually. Others prefer starting with a more complex solution that has integrated the best practices, and in that case using a "Starter kit" may be useful.
Regarding Grunt/gulp... etc. You could worry about that later when you need to have a "build system" to do tasks like compressing files, optimising images and other things that are important for publishing.
After years doing frontend development i realised that is not possible to master all the tools available ( and having a life outside code ). You eventually settle for some tools (everybody have different preferences) and the important experience comes with solving real problems.
i would recommend you to use angular-material for your project if :
you have good knowledge of angularjs or if you find it interesting to learn
you have gone through google design and you want to implement it in angularjs way
try implementing missing features or take online help
Angular-material team is working on adding more and more features as already build in directives and services. Check releases on github page & demo guide
( Drop downs are already there in latest version as menu)
Few points
Google has an awesome open source guide for design.
Angular-material is a framework that helps you implement and follow that design language and principles using angularjs.
Bootstrap is just a framework which gives implementation of css, js related to front end work. Look and feel will be entirely different from google design.
Ionic is again a completely different framework which provides implementation and guide for mobile app development.
You can read about diff in angular-material/bootstrap/ionic in my post here
Bower/Grunt
bower ( package manager) and grunt ( task runner) are tools which work in node environment.
if your development environment is nodejs you should use them to get work done quickly and efficiently.
Check there sites for more information.
cakePhp/mySql
If your backend runs on these and you have angularjs in frontend.
Angularjs can make restfull calls in JSON to your api and it would all work good.

Resources