Eve takes a closer look at the JSON loader to take some JSON data and load it into a different file. webpack works with loaders, and we opt in to use whichever loaders are useful for our projects. When you import some JSON data, it will be added to the bundle.js file that you can use in production. We will install json-loader from npm.
- [Female] Next we're going to load our react dependencies as well as some JSON data using webpack. With this video, we'll get comfortable importing files as modules. First, let's npm install dash dash save react and react dom So, we're going to install these with npm instead of using those script links that are in our index file. Now that we have these installed we can go ahead and remove them from our index file.
There we go. Next, we're going to create a new file inside the source folder called "lib". So this new file will be called "lib.js", so we'll save as lib.js. We're also going to create another new file and this one is going to be called "titles.json". So inside of our titles.json file, all we're going to do here is create a simple, little json objects.
So we'll say "hello" is "bonjour" and "goodbye" is "au revoir." Perfect. So, my pronunciation is not perfect, but this is perfect. We have a little json object with hello and goodbye. Now, over in our lib file, we're going to import this data and we're going to display it in a couple new components.
So let's do this, we're going to first import react from react we're going to import text from titles.json And then we're going to export a couple different modules here. So we're going to say "export const hello" and here we're going to export an element, it's going to be an h1 so from h1 to h1.
Our h1 is going to have an id of title and then it's going to have a class name of "header" looks pretty familiar, get rid of that comma. And then we're going to use a style and the style here is going to be background color purple and color yellow. Awesome. So now inside of our h1 the thing that should be displayed here is "txt.hello" Perfect! Now, let's do the same thing but the opposite.
So we're going to export const goodbye we're going to pretty much export the same stuff, but we're going to change a few of the properties. So id title again className header style and then we'll do the opposite so backgroundColor is yellow and color is purple and finally our display text is going to be "text.goodbye" Excellent.
So now what we're going to do is this, over in our index file, let's make a few adjustments so that we're rendering something slightly different. So we'll get rid of this entire h1 here, and we're going to create a div and this div is going to have within it hello and goodbye. Now this is where things get really interesting, we need to import a few things at the top of our document here.
We're going to import react from react. Remember the render function comes from react on, so we're going to import render from react dom And then finally, our lib file has hello and goodbye So we need to import those too. So we'll say "import hello" and "goodbye from ./ lib" Excellent.
Now the final little step I need to take here, is I need to adjust our webpack config file. Now, we've used the babel loader so far, we need to add another one of these loaders that's going to help us process this json data. So here inside of loaders, let's add another object to this array and we're going to use our test command which is going to find those files that end in ".json" We also want to exclude, once again, our node modules.
And let's wrap that with parens. And finally, we'll specify our loader which is just the json loader. And just as we had to do with our babel loader, after cleaning up our punctuation here, is we had to npm install that loader. So let's go ahead and do that npm install save dev json loader. Excellent! So now let's run npm start and this is going to take care of running our webpack dev server.
And it looks like we have a lot of little error here, so let's go back to our sublime text. We're going to go to the lib file, and let's actually change line two to look for titles json, we need the ./ in front of that. Sweet! So now we have "Bonjour!" "Au Revoir" and we're displaying two different h1's using the json loader. We're pulling some data from this file and we're serving it up inside of these h1's.
- Refactoring elements with JSX
- Transpiling with Babel
- Creating components
- Adding component properties and methods
- Displaying child components
- Working with props and state
- Setting up routes
- Nesting routes
- Creating forms
- Understanding the component life cycle