Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Save more on your purchases! discount-offer-chevron-icon
Savings automatically calculated. No voucher code required.
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Newsletter Hub
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
React.js Essentials

You're reading from   React.js Essentials A fast-paced guide to designing and building scalable and maintainable web apps with React.js

Arrow left icon
Product type Paperback
Published in Aug 2015
Publisher Packt
ISBN-13 9781783551620
Length 208 pages
Edition 1st Edition
Languages
Tools
Arrow right icon
Author (1):
Arrow left icon
Artemij Fedosejev Artemij Fedosejev
Author Profile Icon Artemij Fedosejev
Artemij Fedosejev
Arrow right icon
View More author details
Toc

Table of Contents (12) Chapters Close

Preface 1. Installing Powerful Tools for Your Project 2. Create Your First React Element FREE CHAPTER 3. Create Your First React Component 4. Make Your React Components Reactive 5. Use Your React Components with Another Library 6. Update Your React Components 7. Build Complex React Components 8. Test Your React Application with Jest 9. Supercharge Your React Architecture with Flux 10. Prepare Your React Application for Painless Maintenance with Flux Index

Reusing Node.js modules

As I mentioned earlier, there will be a step in our development process called building. During this step, our build script will take our source files and all our Node.js dependency packages, and transform them into a single file that web browsers can successfully execute. The most important part of this building process is called packaging. But what do we need to package and why? Let's think about it. I briefly mentioned earlier that we're not creating a Node.js application, but yet we're talking about reusing Node.js modules. Does this mean that we'll be reusing Node.js modules in a non-Node.js application? Is that even possible? Turns out, there is a way of doing that.

Browserify is a tool used for bundling all your dependency files together in such a way that you can reuse Node.js modules in client-side JavaScript applications. You can learn more about Browserify at http://browserify.org. To install Browserify, run the following command from inside the ~/snapterest/ directory:

npm install --save-dev browserify

Notice the --save-dev flag. It tells npm to add Browserify to our package.json as a development dependency. Adding a module name to our package.json file as a dependency allows us to record what dependencies we're using, and we can easily install them later with the npm install command, if needed. There is a distinction between dependencies that are required to run your application and the ones that are required to develop your application. Browserify is used at build time, and not at runtime, so it's a development dependency. Hence the use of the --save-dev flag. If you check the content of your package.json file now, you'll see this:

"devDependencies": {
  "browserify": "^11.0.1"
}

Notice that npm created a new folder in your ~/snapterest/ directory called node_modules. This is the place where it puts all your local dependency modules.

Congrats on installing your first Node.js module! Browserify will allow us to use Node.js modules in our client-side JavaScript applications. It will be a part of our build process. Speaking of which, I think it's a good time to introduce you to our build tools.

lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime
Banner background image