So CRA is no more and it probably was about time. The React docs suggest Next, Remix or Gatsby...but you're not ready yet for a full-blown React Meta-Framework and really just want pure React. Any alternatives? In this talk, I'm going to explore exactly that. We've got 7 minutes, so no slides, just code where we're going to set up a new React standalone application using Nx.
This talk has been presented at React Summit 2023, check out the latest edition of this React Conference.
Alternative tools suggested for React app development include using production-grade frameworks such as Remix, Next.js, Gatsby, or simpler setups like Vite or Parcel.
For setting up a simple React application without using a full framework, tools like Vite or Parcel can be utilized. These are more generic bundlers that provide a straightforward templating setup.
Nx is a tool that supports building standalone applications, similar to what Create React App does but with modern features. It can be used to create a new workspace and facilitate modularization of applications, even in a non-monorepo setup.
Nx allows developers to create libraries representing different units or business contexts, which helps in organizing code and managing dependencies efficiently. It also supports setting up boundary Lint rules to control imports.
Yes, Nx supports automated migration from an existing Create React App setup to an Nx-based setup using tools like Vite for bundling. This allows for modernizing and modularizing an existing React application.
Using a monorepo with Nx allows for better scalability and organization of applications and libraries within a single repository. It facilitates sharing of dependencies and can streamline development processes across multiple projects.
Integrating modern frameworks like Next.js into an Nx workspace involves using plugins like the NxNext plugin. This plugin helps in setting up and managing Next.js applications within the Nx environment.
React docs suggest using production-grade frameworks like Remix, Next.js, or Gatsby. But if you want to start with a simple pure React app, you can use Vite or Parcel as generic bundlers.
So, yeah, no create React app. So what do we do now, right? And if you look at the React docs, and you're probably familiar with, they suggest now for proper applications to go with some production-grade framework, right? And these are great choices, right? There's Remix, there's Next.js, Gatsby. But what if you're not ready to go full framework just yet? You just want to explore, get started with a simple React app, pure React app? They have some choices, actually, down here. So there's kind of a bit hidden. But you can use, for instance, Vite or Parcel to set it up. And again, Vite, for instance, has a really great templating setup that can get you started. But they are kind of a generic bundler, right? That's the kind of main topic there.
I want to show how you could do something similar with Nx. Nx has facilities built in that can help you set up something close to what Create React app did, but with modern features. You can create a new workspace with different bundling mechanisms. By leveraging nx generators, you can set up new libraries and modularize your applications.
I want to show how, for instance, you could do something similar with Nx. And you might know Nx maybe from a mono-repo thing. Maybe some of you have been here yesterday. So not going to talk about mono-repos, but actually about a similar thing that we did, which is what we call standalone applications.
So Nx has facilities built in that is not just useful for a mono-repo setup, but can even help you set up something that is very close to what Create React app did, but with some modern features. So you can create a new workspace like this one here. And this will boot you up. You can already see you have different choices in terms of bundling mechanisms, like V-to-APK or RSPEC.
And I did this already, so we save some time installing stuff. But basically this is what you will get out of such a workspace. So you can already see it's pretty similar to what a Create React app might look like. So you have a source folder at the root, one app only. There's a couple of other things in here. And you can just literally do an npm start, right, and it would boot up your application in develop mode. Now here's its Vite, and it serves it up in your browser. Now, why would you choose this? Like, you're getting a step further. Because we've, for instance, like coming a bit from the monorepo scenario, we suggest people to modularize their applications.
So instead of sticking everything into this source folder, what you can do actually is leverage some of the nx generators and, let's say, set up a new library in here. So I can say the nx react plugin provides your library generator. And let me create some products library. And as a directory, I'm going to use modules. You can choose whatever you want, really. So what test run do you want to use? Do you want to use VTEST as fast as one? Don't need a bundle right now. And so what will happen here, you can see I created such a library which allows me to represent that unit or business context for developing products. You can see here, there's a clear entry point which allows me also to think about private and public APIs. And I can expand it like this. If you don't know these commands, these generators by heart, which is totally understandable, we also have an extension for vscode and WebStorm. And so what you could do here, for instance, go here, say generate library react. Let's say I want an orders library as well. Choose a bunch of stuff and then run just a generator.
We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career
JSNation Live 2021
React Advanced Conference 2022
React Summit Remote Edition 2021
React Advanced Conference 2023
React Advanced Conference 2022
React Summit 2022
React Summit 2023React Advanced Conference 2021React Summit Remote Edition 2021React Advanced Conference 2021React Advanced Conference 2021React Summit 2023
Comments