Master de II. ULL. 1er cuatrimestre. 2020/2021
This page describes a few popular React toolchains (like create-react-app, gatsby) which help with tasks like:
Why?: I like task automation with npm but the usual way to run multiple commands concurrently is
npm run watch-js & npm run watch-css. That’s fine but it’s hard to keep on track of different outputs. Also if one process fails, others still keep running and you won’t even notice the difference. Another option would be to just run all commands in separate terminals. I got tired of opening terminals and made concurrently.
The majority of websites aren’t, and don’t need to be, single-page apps. With a few lines of code and no build tooling, try React in a small part of your website. You can then either gradually expand its presence, or keep it contained to a few dynamic widgets.
In the past, there have been various React Component Types, but with the introduction of React Hooks it’s possible to write your entire application with just functions as React components.
This in-depth guide shows you everything about React Function Components – which are basically just JavaScript Functions being React Components which return JSX (React’s Syntax) – so that after you have read this tutorial you should be well prepared to implement modern React applications with them.
The biggest difference of Single Page Apps (SPA) with traditional multi-page apps is that navigating a single-page app doesn’t involve going to an entirely new page. Instead, your pages (commonly known as views in this context) typically load inline within the same page itself.
When you are loading content inline, things get a little challenging. The hard part is not loading the content itself. That is relatively easy. The hard part is making sure that single-page apps behave in a way that is consistent with what your users are used to. More specifically, when users navigate your app, they expect that:
With multi-page apps, these three things come for free. There is nothing extra you have to do for any of it. With single-page apps, because you aren’t navigating to an entirely new page, you have to do real work to deal with these three things that your users expect to just work.
To deal with all of this, you have a bucket full of techniques commonly known as routing.
See Creating a Single-Page App in React: using React Router by kirupa