A Short Background Story
I've been making websites since the late 1990's. I took a break between 2007 and 2014 and the web development ecosystem has changed a lot to say the least. I've always used a workflow that to me has been rather clear and has served my purposes.
What I'm Used to:
- HTML
- JavaScript (for effects and interaction)
- CSS
- I added SASS to this in 2014/2015
- A php driven CMS (Craft/Perch lately) and PhPMyAdmin to manage my SQL
- A shared hosting solution (1and1) that I can point domains to and store data on
With those technologies I would make templates that rendered the content from the CMS. My clients have been happy with this approach and I can deliver solutions using that workflow. However, I started paying attention to the React/GraphQL movement in the last year. As of late I've been zeroing in on Gatsby.
What I've Done To Understand and Learn
I've gone through the React tutorial on their site, same with the GraphQL tutorial, have read and understood the granular topics of what these technologies are. I've familiarized myself with package managers.
Through my formal CS education I have written a text editor in Assembly, written and IPC in C, but I'm more confused and frustrated building a portfolio site with react (focusing on Gatsby as my stack) and have nothing to show dozens of hours into the process. I constantly feel lost in dozens of topics that are partially explained without connection to the other related topics. I feel like I'm drowning in sales pitches of competing framework developers who all want me to try their awesome new technology that all do the same thing - the same thing? WHAT IS IT? I want to make awesome web sites. I want to go from design to a public facing website that I created with this technology.
I don't like being this cynical. I prefer to be productive and optimistic. I feel drained, frustrated and used.
Looking Within Myself
I'm rational enough to understand that if industry leaders are using these new web development technologies to their benefit, I must be approaching this wrong. I'm not thinking about it right. I've exhausted my own resources as an independent learner. Halp!
Breaking Down And Asking For Help
At this point I'm breaking down and asking for help. I've tried finding a block diagram of flow chart of a high-level overview how to use react and various technologies that are dependent on it (whatever those are at any given moment in time) and haven't found anything.
Core Questions I have
- Hosting (public facing)? I can't install packages onto my shared hosting plan on the fly. I can't ssh into it. No root access. What do I use instead? Do I run a server here at my house?
- Is the core React library alone not powerful enough? Do I need to install a CMS or other packages for react to be useful, much how php on it's own doesn't provide all the abstractions needed for task x, y and z?
- The most important: What (preferably free) tutorials/learning resources do you recommend? Maybe my searches haven't returned the best results.
Thanks for listening to my vent post. I'm reaching out for mentorship and help. Anything help/guidance would be appreciated.
If you enjoyed this content and want to support a poor freelancing student so I can eat and produce more content in the future, I accept donations via PayPal
Top comments (19)
I would think of React as just the user interface level. So, instead of using HTML/Vanilla JS you are using React. Normally you'll create an API for your backend and pull from that API into your React app. I normally prefer to completely decouple my front and backends so that this process is streamlined. In which case, I use static site hosting for my frontend (like Netlify) and whatever for my backend.
Gatsby is awesome for generating static sites using React, especially if you want them to be super performant and/or progressive web apps. Definitely not needed, and React can totally stand alone if needed. I'm not at all familiar with the PHP ecosystem, so I can't help much there. @lkopacz has experience working with React and PHP and can maybe give a better picture there?
@ben posted my React tutorial, and I'm also here for questions!
Thank you for the response. I'm taking some time to sort it all out. I think went a bit too fast and got myself all tangled up in too much too soon and cried out in desperation haha.
Oh no! You got this.
I think you're coming into this expecting React to be something comparable to Rails, but it's much, much narrower in scope. React is a library that encourages you to model UI as a function of state. The premise is that you have 2 ways of tracking data: "props", or properties, which are values passed in that can't be directly changed, and "state", which is internal to a component and can be changed.
There's a whole ecosystem that's built up around it, because the ideas of React and the specifics of its API have struck a chord with a lot of developers as being an extremely effective abstraction over the DOM (or, indeed, anything that can be thought of as a "UI", hence React native and other alternative renderers).
Thing React has no opinion on:
Tools like Webpack, Babel, and Netlify have sprung up as common defaults to include when writing a React app, and create-react-app has canonicalized a set of extremely developer-friendly tools to lower the barriers to entry, but none of them are strictly required to write code that uses React. It's entirely possible to create an
index.htmlfile, pull in a link to a CDN-hosted copy of React and begin writing JS within your<script>tags.Gatsby is a powerful framework for authoring websites, and it takes much more of a kitchen-sink approach. I suspect the problems you're encountering may be related to seeing Gatsby and thinking it's React. Gatsby provides a lot of powerful tools, but it's only one part of the ecosystem. In the 4 years that I've been working with React professionally, I haven't used it.
I'm a moderator of Reactiflux, the largest community of React devs. If you have more questions you want to ask, I'd encourage you to ask in there! It's an extremely friendly and helpful community, if I do say so myself. The website is reactiflux.com/, and a direct link to join is join.reactiflux.com/ (incidentally, the site is built with Gatsby! If you want to poke around its source, it's available on GitHub)
Thank you. Joined the Discord server. Discord is great for me since I used it frequently.
If I understand what you're asking, I'm pretty sure you'd want to "build" react locally and then run include it as a JavaScript file on your site. The host shouldn't need to know about packages.
You do not need to install a CMS or anything else. React is nothing more than a view library for declaratively rendering complicated client states. Tie-ins with other frameworks are a separate thing, but often blended together for convenience, like Gatsby. You can run a React client on any backend, like PHP. You could load the data into, say, a blob of JSON on the client as a
dataattribute and have React play with it however you like.This comes to mind:
A Complete Beginner's Guide to React
Ali Spittel
Not sure what else is out there in the React ecosystem at the moment, but perhaps others will chime in.
You've identified what I think is the core difficulty in React today: There's a lot of tooling and interesting things you can do with React that it's hard to figure out the basics or get beyond what's been abstracted away with tools like Gatsby.
I haven't been super involved in React lately but I adopted it really early on and it was much easier to wrap my head around it before the ecosystem got so complex. Your background in PHP might give you a different type of coupling you're not used to here.
Let me know if I've misinterpreted any of your issues.
Happy coding!
Could you break that down even further maybe? I totally get why OP is puzzled and frustrated. I've done React tutorials and succeeded in all the assignments and still don't 100% get it.
What is it that we need React for which we couldn't do with jQuery, for instance?
When I look up React on Wikipedia it's described as a Javascript Library.
When I look at the history of React I get this weird back-story:
Which strongly implies that React was invented for iOS native interfaces, not regular HTML websites.
There's nothing you couldn't do with jQuery, but React makes keeping track of the "state" of a page about 10000000x easier. It's also generally more performant in complicated UI situations because it does minimal DOM manipulation and does most of its work in memory via what it calls the "virtual DOM".
React lets you code as if you were throwing away the whole page each time something happens and rendering from scratch based on the new situation. If you have an add to cart button and a cart icon displaying the number of items in a cart, with jQuery it's possible for things to get complicated quickly as different actions affect different things. React makes complicated UI pretty simple.
jQuery is much simpler for just dropping in and working with, but React eliminates complexity if you lean in to it.
React Native definitely helped React gain traction and commitment from Facebook. It was a big reason people finally started paying attention, but its true origins are pretty inherent to the problem of generating complex UI. Angular at the time truly sucked, and so did lots of stuff that was pretty popular. React really changed things.
React took good established declarative programming ideas that were already popular in game dev (I don't know this first hand, but I've heard it described this way and it makes sense). Games are an incredibly complex state management problem and they'd solved a lot of these problems before UI development needed to.
About game-dev: Games often use immediate-mode-GUI, which has some overlap with how React works.
medium.com/@Huxpro/is-reactjs-imgu...
Thank you for the insight, and I'm about to sit and read the article.
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:
Operating System
Database
Front End
Content
Content Management System
Cache or CDN
Web Server
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.
@ben and @aspittel have great answers here and I don't have anything to add to them, but if you are looking for continuous help, I'd be more than happy to connect and chat about React an how it fits in the ecosystem of the web. Feel free to add me on Twitter or here and ask any questions!
Hey! Thanks for reaching out. I greatly appreciate it. Nice to have support, for the last few years my developer experience has been very lonely and I'm a social person who likes working on things and learning with others.
If you're looking for a full blown framework you could always try Angular, it's got a steep learning curve though, once you get past that you can do amazing things. I use the Angular framework and firebase (which provides free hosting to test your websites) don't shoot me down if you don't like Angular, it's just a suggestion :P
youtube.com/playlist?list=PL0vfts4...
The technology stack you want is: npm nodejs webpack sass or less. Check out ssr solutions with react. Html doesn't exist in react as a separate thing it's sort of part of react. For data management you can use react redux package. For styling separate out less structure using webpack. And that's about it. SSR offers react usage on both server and client. The full package is independent of is so run locally as you run on server. You can start of with dB as files containing content and eventually add any dB you want as react has any libs to support any dB like MySQL mongodb ir any other