6/24/2023 0 Comments Mern stack tutorial 2018![]() Try to fix the mess by adding pre-rendering which optimizes for largest content paint on the cost of first input delay and making built time so slow that it feels like developing a monolithic Java application. ![]() Many single page applications turn out to be "slow pace applications" built with a back-end development mindset that fails to care about usability, accessibility, and page speed / web performance. I will elaborate my possibly controversial stance in another article, so we can leave this topic for now. Thanks to my friend Andy Weisner (Retinafunk) for convincing me that Utility CSS can be nice and useful even (or especially) for experienced web developers. But on the other hand, trying to write proper CSS in complex projects often resulted in messy and unmaintanable style sheets in the past, so maybe there is still another solution. While styled components are one possible way of modularization, I still do not like the fact that useful core CSS features - classes, cascade and inheritance are rather avoided than used properly. ![]() "I don't care what AirBnB is doing and neither should you," because arbitrary syntax rules like AirBnB's version of ES6, bloated syntax horror like ReactPropTypes or styled components are just some of the things that made me "hate React" in projects of the past. Like Stephen Hay said at Beyond Tellerrand conference in 2019: Trying to use Tailwind, TypeScript, and React in a proper way, or at least in a way that fits my experience and requirements seems a good way to make up my own mind about technology that seems to elicit a lot of controversy in the web developer community. Time that I already invested when researching and building my side project. and save me some time in future projectsīesides learning, experience, and hopefully some fun, the result should be an actual project to show, plus a scaffold that might save me some time in future projects. So many technologies and buzzwords, so much apparent over-complexity.įueled by my stress, I find the energy not to simply reproduce some outdated tutorials from 2018, but to try and build only what is actually reasonable now. When I am free to decide everything on my own (thus having to do so) I swing back and forth between joy of discovery and getting stressed out. It might have been easy to go back to the classic LAMP stack using PHP and SQL, and base my app on the Symfony framework.īut as many other developers pointed out, there is more than one way to do things, especially when it comes to React, and I wanted to keep an open mind and be able to work with different web development tech stacks.įinding out: learning, experience, and hopefully some fun. In the past, I had worked with legacy code or did not take the time for proper research, which even made me suspect I did not like React or even JavaScript single page applications at all. I finally took some time for proper research (and some lazy trial and error based on tutorials and example code) to set up a proper full-stack application.īeginning with a general example / starter setup useful for several projects, forking the actual side project ( bookstack-reading-list-app) once things get more specific. Going full-stack: setting up a monorepo.Front-end performance, accessibility and search engine optimization.I will add a link to a live demo in the last part of the article series once (if ever) I have released a working draft. You can see the full code and commit messages on GitHub. I will only highlight a few code examples and helpful links in this article. ![]() I do try and explain everything as I go so it is possible to follow without React/Node experience but it is recommended that you know at least the basics first.This is a work in progress, updated on 1st July 2021. It is a practical hands on course for building an app using the incredible MERN stack. This is NOT an "Intro to React" or "Intro to Node" course. Testing with the Redux Chrome extensionĬreating a build script, securing our keys and deploy to Heroku using Git.Creating many container components that integrate with Redux.Creating reducers and actions for our resources.Building our frontend to work with the API.Integrating React with our backend in an elegant way, creating a great workflow.Protecting routes/endpoints with JWT (JSON Web Tokens). ![]() Building an extensive backend API with Node.js & Express.We will start with a bank text editor and end with a deployed full stack application. In this course we will build an in depth full stack social network application using Node.js, Express, React, Redux and MongoDB along with ES6+. ![]()
0 Comments
Leave a Reply. |