1. 程式人生 > >Getting Started With Parcel JS and React

Getting Started With Parcel JS and React

[Step 4 — Auto Install Modules Through Parcel]

Okay, so here’s the cool part about Parcel! If possible I’d like you to have your terminal open (the Server Running At view shown in the image above) so you can see these changes in real time.

With React, we need both the React and React-DOM packages. To get these, let’s navigate to our App.js

file and at the very top write the following (while keeping an eye on your terminal):

import React from "react";

Parcel will now go out, fetch the appropriate package, install it, and rebuild for you. All it takes is a simple line of code!

Here’s a quick screenshot of what the process should look like:

A Screenshot (with Visual Studio Code in the background) Demonstrating How Parcel will Automatically go out and Fetch/Install the Appropriate Packages Based on your Code.

Your package.json file should also be updated will the new React package.

Now that we are aware that Parcel handles installation for us, let’s go ahead and add the following lines of code at the top of app.js

:

import { render } from "react-dom";
import { Guitar } from "./Guitar";

The second line is simply for including the subcomponent and has nothing to do with installing packages.

Last of all, let’s go in to our Guitar.js file and add the following line of code at the top:

import React from "react";

Now launch your web browser and visit localhost:1234 to view the results which should look similar to:

Image of What Your React App Should Look Like