Sign In Start Free Trial
Account

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying React.js Essentials
  • Table Of Contents Toc
  • Feedback & Rating feedback
React.js Essentials

React.js Essentials

By : Artemij Fedosejev
4 (32)
close
close
React.js Essentials

React.js Essentials

4 (32)
By: Artemij Fedosejev

Overview of this book

Building web applications with maintainable and performant user interfaces is a challenge that many have faced for more than a decade, but no one has risen to this challenge quite like React.js. Today React.js is used by Facebook, Instagram, Khan Academy, and Imperial College London, to name a few. Many new users recognize the benefits of React.js and adopt it in their own projects, forming a fast-growing community. The speed at which React.js has evolved promises a bright future for those who invest in learning it today. React.js Essentials will take you on a fast-paced journey through building your own maintainable React.js application. Begin by exploring how you can create single and multiple user interface elements. Create stateless and stateful components and make them reactive, learn to interact between your components and lifecycle methods and gauge how to effectively integrate your user interface components with other JavaScript libraries. Delve deep into the core elements of the Flux architecture and learn how to manage your application using stores. Finish by going that extra mile with the Jest test framework, running multiple tests on your application and find solutions to scale it further without complexity.
Table of Contents (12 chapters)
close
close
11
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.

Visually different images
CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
React.js Essentials
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist download Download options font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected

Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon