I've seen a few comments mention how they've done tutorials and understand parts, but not all of React as if that is a problem. I feel the OPs pain along with those commenters.
I've been working with Gatsby alot lately and it can seem very overwhelming. But I would also remind you that 100% "getting it" is neither necessary nor reasonable to expect with a new technology. The fact that your able to hack stuff together means that your on the right track and full comprehension will come in time.
Biggest thing to remember about React is that it is really just a UI/UX library, nothing more and nothing less. Unlike Angular, it does not really have a server-side aspect to it.
I saw somebody ask what you could do with React that you couldn't do with jQuery and the answer is: nothing, really. React is a JS library meant to do what JS does: create dynamic front ends. The difference is not what they can do, but how they do it. React uses JSX and the idea of web components to help you build apps made of pieces that can be hot swapped in and out. Think of it as "microservices for UIs". Rect is there to handle how your website looks and behaves; to collect and display data. Anything beyond that would be a good place to put your PHP background to work because server-side is out of the jurisdiction of React.
Take a breath. We're here for you because learning a new approach is usually frustrating at first. Don't over engineer or give React more credit than is due because of the pressure of it being "the new hotness". You got this. Just a matter of time 😁😁
Thank you for replying. I'm getting an understanding of it after all these great replies and looking at how React fits into a project. It's going to take time, as all good things do.
I need to see if I can use it with perch CMS and try some examples.
If I may, I'd suggest attempting to step back for a second and look at what each part of a web app does. Abstract it a bit. Rather than start with the names of frameworks, start with what parts a website/app has, then map different technologies to them. For instance, what does a web app contain, in no particular order:
Content Management System
Cache or CDN
Now, while the final product is a singular item, each piece is independent in itself. What makes the final product is, ultimately, the glue code that joins it all together.
So rather than thinking "How do I need to shoehorn React into Perch" think "What is Perch's job? - To get the content from the database and put it in front of people." Then think "What kind of presentation am I looking for once the content gets in front of people? - Responsive, dynamic UI that can change based on user needs, browser statem, and media breakpoints."
From what I'm reading, it looks to me like your trying to build this application as an entire, monolithic and, therefore, overwhelming undertaking. When really, just focus on the pieces as standalone projects. You know your CMS, your know MySQL, you know Apache/Nginx, and I'm sure you've used some jQuery and/or JS, and you know your HTML/CSS setup of choice. React does not do anything you do not already do on a regular basis. And, to be honest, it does not even go about it all that different than you are used to. Try to even strip away the fact that the JSX files are "React" files. Convince yourself that it is JS as I've always known and used it, the imports and keywords are just different. Control flow is the same, conditionals are the same, all the fundamentals you are already a pro at are right there. They're just served up a little different. You got this! We all have the utmost confidence in you!
Great advice. I sat with a piece of paper and pen and consolidated my thoughts. It's so powerful.
Is it correct to say that React is a framework for developing the V of the MVC design pattern, a pre-built CMS provides the M and C in some cases?
I'm also going through the react tutorial again while taking my time.
Again, thanks for the advice, really got me thinking more clearly!
Yes, React is just a View library - see its API documentation
reactjs.org/docs/react-api.html . By itself, it has no opinion about how you structure your app. Everything else (flux, redux, babel and so on) is optional.
We're a place where coders share, stay up-to-date and grow their careers.
We strive for transparency and don't collect excess data.