This week in the curious case of React - #2
🌏 Navigating the React World (#1)
Hey!
The React ecosystem has really matured (React is in version 17.0.1 😅 ) and there are endless tools that you could potentially need to use (Redux, Mobx might sound familiar).
So I decided to break down the absolute essentials (in four-part series) that you will need to understand to get started immediately with React development, this being the first.
Package Management
React requires node to run on your machine. While node is sufficient to run a Javascript project but more often than not a web project requires a bunch of external libraries that you might need to do anything useful in your application. For example, you might need the React library itself to start working with it or you might need the axios library to make HTTP calls to your backend.
Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. Think of it like the Chrome’s JS interpreter along with a set of custom libraries added to give it server-side capabilities.
For this purpose, we usually need a tool to manage all these libraries for us so that we may install, upgrade, or remove them from our projects when we need to. That is what a package manager essentially does.
The JS world has the two most popular package managers npm (Stands for - Node package manager) and yarn. While there are minor differences between the two you could just pick one and learn the specific commands for it and you should be good. Just pick npm for your project if you are confused about which one to learn.
Both of these tools use a package.json file that maintains the list of all packages a project uses. The package-lock.json file is generated by the package manager to keep track of the versions of each library you use (yarn.lock is generated in case you are using yarn).
This is an example of package.json that a React project might use.
Follow the instructions here to get the latest node & npm versions. Once you have that in your system you can create a React project simply by executing the following commands in your terminal.
npx create-react-app my-app
cd my-app
npm start
This will create a React project that you can tinker with and modify to create your own more complex ones. For the curious, have look at the sample projects created here and see what packages they used or the project structure they followed.
If you followed me till here, congrats!
You have your first React project developed! 🎉
P.S - Npx is a package runner so it installs a package locally and then runs it in one command instead of npm install <package_name> followed by npm run <package_name>.
Thanks for reading!. If you liked what you read let me know! Better yet share it with a pal would find this series useful. Next, I will talk about the architecture of React (which is the reason for its popularity) and why you should care.
Follow me on Twitter for anything related to tech, startups, and building products.
These are great to read. I'm migrating a large AngularJS application to React. It's good to read things from and for all skill levels. Thanks for the series!