Name: Installing Third-Party Libraries from npm with React Native
Uploaded: 2016-11-06T09:30:36-06:00
Description: Learn how to install JavaScript modules from npm for use in your React Native project. We'll install and import the lodash library, then demonstrate how to use it from our React component. We'll also see what happens when you try to use a third-party library, such as jQuery, that attempts to access the browser window and is therefore not compatible with React Native.

Learn how to install JavaScript modules from npm for use in your React Native project. We'll install and import the lodash library, then demonstrate how to use it from our React component. We'll also see what happens when you try to use a third-party library, such as jQuery, that attempts to access the browser window and is therefore not compatible with React Native.

https://app.egghead.io/api/v1/lessons/react-installing-third-party-libraries-from-npm-with-react-native/subtitles

Installing Third-Party Libraries from npm with React Native

[00:00] I hear a lot of questions from people about how to install third-party JavaScript modules with React Native. The good news is it's very straightforward. It's basically identical to how you would do it in any other project. We can go ahead and do npm install -- save whenever we want to add a new module. Of course, if you're using Yarn, you can use Yarn as well.

[00:18] As an example today, we're going to install Lodash and use it in our project. I'm going to run npm install --save Lodash. As you can see, this will kick off the usual install process. Now Lodash is installed. If I look at my package.json, you can see that Lodash has been added to my list of dependencies.

[00:41] I'm going to go ahead and commit that change, "add lodash to dependencies." Let's go ahead and use this third-party module that we just installed. We'll pop over into our code. I'm going to import _ from 'lodash'. Let's actually use this. We're going to say "Your lucky number is." Then we're going to open some curly braces and call Lodash with_.random. We'll ask for one of 100 lucky numbers.

[01:15] Now I've saved this file and hit refresh. As you can see, Lodash is now being loaded. We're successfully calling our third-party module. Not all third-party JavaScript modules will work with React Native. Specifically, anything that relies on an actual browser window is going to fail because we don't have polyfills for everything.

[01:34] For example, let's install jQuery, so npm install --save jQuery. Now we've installed jQuery. Let's go back into our code. We're going to import $ from 'jquery'. I'm going to save that. I've turned on live reload in my simulator, so that's going to refresh. You'll notice that it will take a minute for the React Native Packager to reload every time you import a new module.

[02:06] Now let's go into our render method. Let's say that we want to get all of the divs in the windows using jQuery's selector API. I'm going to say var divs = $. I'm going to ask for all divs. I'm going to save this. As you can see, we get this wonderful red error screen -- jQuery requires a window with a document.

[02:28] Because this is React Native, we're running on iOS. There's no actual browser window. Any third-party module that requires a window is going to fail. Other than that, any pure JavaScript module which doesn't rely on the browser is fair game to use in React Native, so feel free to try importing basically almost all of the third-party dependencies that you would want.

[02:50] If you're working with mobile, you're not going to be wanting to interact with the browser window APIs anyway. Just about all of them should work out of the box, just like Lodash did. Now if we go back, we can see that everything is working again.

Installing Third-Party Libraries from npm with React Native

Share this video with your friends