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

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

Related

Integrating React Build file inside Django project

I have been building web apps using NextJS and Django for some time. But recently, my boss gave me the requirements for using ReactJS and using the build files inside Django as templates. Now, I have never tried it before, but according to this Tutorial, it is possible.
But my question is, should I do it? Would I face any performance issues in the future if I do this? Or will there be any bugs or issues related to routing?
I know I can try it myself, but I am looking for some expert advice from senior developers.

I'm a beginner to React Redux. Will I be able to get some suggestions to develop some sample apps to improve myself in the subject?

I'm a quite beginner to React and Redux..Will I be able to get some suggestions on some sample apps to develop to improve myself in the mentioned subject area?
I am not sure whether you can get any sample project for the same. But if you want to learn, you can refer to the Udemy course React - The Complete Guide (incl Hooks, React Router, Redux)
Everything is explained in simple terms. As of now, the prices are high. Just look for some sales (comes very often). You can get it for Rs 700 or even less.
Many resources, free even for you to try. I would recommend using the official websites and just go with their tutorials to get a sense of how to make something small. That's how I started, some of them have interactive sample apps in CodePen or Sandbox. In Redux, for example, a Counter with React.
After that, it depends on what kind of application you want. On the official pages, they have example projects too:
https://reactjs.org/community/examples.html
https://redux.js.org/introduction/examples#examples
Doing a google search also has many example projects too.

porting an app built using Tornado framework to Django framework

I have an app that was developed using Tornado framework and Angularjs.
the app is basically a game with two type of users a moderator and players. the moderator and players exchange data in "real time" and a graph is updated based on their input.
I am a decent coder but new to web development and this is just an in case question. Since the app has some issues, and since I will have to learn a framework anyway, I would rather learn Django. I was wondering if there is a resource out there that makes the conversion easier?
What I am looking for is advice on how to tackle this in a way where I don't have to go through the documentation of both frameworks before I can do anything useful.
Ideally, I'd like to incrementally learn more about both frameworks as I make meaningful edits to the app.
From what I see you need to get familiar with two things. Django Rest Framework` which is a great tool, with a really good documentation. Basically it helps you to communicate with you application by REST API. And of course Django.
They also have a tutorial made for starting your way with Django. Which basically have everything needed to start. If you have an experience with Tornado, you will have no problem to work with Django. Here is a link to tutorial.

MeteorJS Tutorial & detailed explanation

I just finished the JS course on codecademy and started learning meteorJS for Angular 2 now for building my first real application. I started with the simple-todos tutorial but noticed that the tutorial isn't for real noob beginners but instead for intermediate programmers. I do not understand what the single lines of code do
for example:
angular.module('simple-todos', [
angularMeteor
]);
This is one of the many examples which are not clearly explained in the tutorial.
Do you know a source where I could learn all this noob stuff before I continue with Meteor?
Thank you!
Personally, I think the official Meteor tutorials do a really good job of explaining all the meteor specific stuff that it covers. One thing you could do is also pull up the Meteor API and read the details about a specific function it asks you to use as you progress. This will certainly provide some more meat to the tutorial.
The piece of code that you provided in your question is actually Angular specific code. Angular itself has a somewhat steep learning curve so by doing that tutorial, you are taking quite a big step by trying to learn Angular and Meteor at the same time.
Instead, I highly recommend you follow the Meteor Blaze tutorial. It provides much more detail and it covers ONLY meteor specific stuff. Once you finish that then read the Meteor guide and if you have the funds, buy the Discover Meteor book and follow that tutorial. This approach is exactly how I learned Meteor and it was very successful for me.
Be sure to just read along in the Meteor API and Blaze API as you progress thru any tutorial and you will be well on your way (and then later you can jump into learning Angular or React with Meteor if it suites your fancy)! Honestly, I have had a lot of success with Blaze and use it for Meteor apps 99% of the time.

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