Upcoming Series: React Tools
After a bit of hiatus, I am back to write about different Front-End development tools. First, I will spend the next couple of weeks on React tools more specifically. So for today, let’s focus on the surface of a couple of them, and in the upcoming weeks, I will dive into them with more examples.
Let’s start with Gatsby, a very efficient tool that focuses a lot on performance compared to the good ol’ create-react-app (side-note, I believe this is the first time I used “good ol’ “). Nonetheless, Gatsby is very efficient, and it has quite a large amount of plug-ins that can help you load and transform data, like GraphSQL and WordPress.
First step:
Initiate a new gatsby with:
$ npx gatsby new my-app
and instead of npm start, we will use:
[check if you are in the correct directory]
$ npm run develop
Gatsby will have a neat structure. Inside the <src> folder, you will have other three folders as the following <components>, <images>, and <pages>. About the last component <pages>, each page has its own React component and here comes the beauty of it, you don’t have to create routes, Gatsby will automatically manage them for you. Another side-note, this means that it will be faster and efficient, as I will explain more.
Once you run $npm build to generate your production build, it will generate two files for each page. The first will be a small JS file just big enough to create the page (much smaller than the usual create-react-app file). The second will be an HTML file with statically material of the given page, but it also contains the .tsx file (typescript) to which it loads the JS at the bottom of the page, which makes the content of this page dynamic.
In summary, the last two paragraphs meant that Gatsby would load the static material first, then add the dynamic content.
Go to www.gatsbyjs.com and check the documentation, plug-ins, start templates, and the very informative cheat sheet provided.
Thank you for following along, the next post, we will dive into more detail with Gatsby.
