Book Image

React.js Essentials

By : Artemij Fedosejev
Book Image

React.js Essentials

By: Artemij Fedosejev

Overview of this book

Table of Contents (18 chapters)
React.js Essentials
Credits
Foreword
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Creating package.json


Have you ever heard of DRY before? It stands for Don't Repeat Yourself, and it promotes one of the core principles in software development—code reuse. The best code is the one that you don't need to write. In fact, one of our goals in this project is to write as little code as possible. You might not realize this just yet, but React helps us achieve this goal. Not only does it save us time, but if we also decide to maintain and improve our project in future, it will save us even more time in the long run.

When it comes to not writing code, we can apply the following strategies:

  • Writing our code in a declarative programming style

  • Reusing the code written by someone else

In this project, we'll be using both these techniques. The first one is covered by React itself. React leaves us no choice but to write our JavaScript code in a declarative style. This means that instead of telling our web browser how to do what we want (like we do in jQuery), we just tell it what we want it to do and the how part is explained by React. That's a win for us.

Node.js and npm cover the second technique. I've mentioned earlier in this chapter that there are a hundred thousand different Node.js applications available for us to use. This means that most likely someone has already implemented the functionality that our application depends on.

The question is how do you know from where to get all these Node.js applications that we want to reuse. We can install them via the npm install <package-name> command. In the npm context, a Node.js application is called a package, and each npm package has a package.json file that describes the metadata associated with that package. You can learn more about what fields are stored in package.json at https://docs.npmjs.com/files/package.json.

Before we install our dependency packages, we will initialize a package for our own project. Normally, package.json is only required when you want to submit your package to the npm registry so that others can reuse your Node.js application. We're not going to build a Node.js application, and we're not going to submit our project to npm. Remember that package.json is technically only a metadata file that the npm command understands, and as such, we can use it to store a list of dependencies that our application requires. Once we store a list of dependencies in package.json, we can easily install them anytime with the npm install command; npm will figure out from where to get them automatically.

How do we create the package.json file for our own application? Luckily, npm comes with an interactive tool that asks us a bunch of questions and then, based on our answers, creates package.json for our project.

Make sure that you're located in the ~/snapterest/ directory. On the Terminal/Command Prompt run the following command:

npm init

The first question it will ask you is your package name. It will suggest a default name that is the directory name you're located in. It should suggest name: (snapterest) in our case. Press Enter to accept the proposed default name (snapterest). The next question is the version of your package, that is, version: (1.0.0). Press Enter. These two would be the most important fields if we were planning to submit our package to npm for others to reuse. Because we're not going to submit it to npm, we can confidently accept defaults for all the questions that we are asked. Keep pressing Enter until npm init completes its execution and exits. Then, if you go to your ~/snapterest/ directory, you will find a new file there, package.json.

Now we're ready to install other Node.js applications that we're going to reuse. An application that is built of multiple individual applications is called modular, whereas individual applications are called modules. This is what we'll call our Node.js dependencies from now on—Node.js modules.