What Is the Best Way to Download React

Background

The Codecademy site provides you lot with a development environment already set for yous to complete exercises and run your lawmaking. Now that you've learned how to lawmaking in React, let's become through the process of setting up your development environment on your computer then that you can write your own applications.

We've written a brief guide for each major step of the installation process! This is the first guide in the series. This guide will teach y'all:

1. How to install Node.js and npm
2. How npm is different than what y'all may be used to.
3. How to create a packet.json file, and what that means.
4. How to install the React and ReactDOM libraries.

Installing Node and npm

Getting React up and running is not as elementary equally downloading ane big slice of software. You will demand to install many, smaller software packages.

The outset thing to install is a good installer! Yous need a way to download and install software packages easily, without having to worry almost dependencies.

In other words, yous need a good package manager. We'll be using a pop package managing director named npm. npm is a great way to download, install, and go along track of JavaScript software.

You can install npm by installing Node.js. Node.js is an environment for developing server-side applications. When yous install Node.js, npm will install automatically.

1. Ctrl-click hither to navigate to the Node.js homepage in a new tab.

2. You lot should see links to download Node.js. Click on the download link of your selection. Follow the subsequent instructions to install Node.js and npm. If y'all've already installed Node.js, that's okay, exercise it anyway.

Congratulations! You've just installed some incredibly powerful software!

How npm is Dissimilar

When yous install software, yous may exist used to something similar this: you install what you demand, it sits there on your estimator, and you can use it whenever yous want.

You can do that with npm! But in that location's a different, improve way: install what you lot need, over and again, every fourth dimension that you need information technology. Download and install React every time that you make a React app.

That sounds much worse! Here's why it's actually ameliorate:

Beginning, npm makes installation extremely easy. Installing software over and over sounds like a headache, but information technology really isn't. Nosotros'll walk through how presently!

2nd, npm modules ("modules" are another name for software that you download via npm) are normally small. There are countless modules for unlike specific purposes. Instead of starting your app with a giant framework that includes tons of lawmaking yous don't need, yous can install but modules that you lot volition actually use! This helps go on your code quick, easy to navigate, and not vulnerable to dependencies that y'all don't understand.

IN CONCLUSION: Starting now, every step in this article series will exist a pace that you have to accept every fourth dimension you lot make a new React app . You don't take to install Node.js and npm anymore, but yous should showtime from here for every new React project that you brand.

npm init

Alright, let's make a React app on your home computer! Where do y'all start?

To begin, decide where you desire to save your app, and what yous want to name it. In the terminal, cd to wherever you want to save your app. Use mkdir to make a new directory with your app'south name. cd into your new directory.

Once yous've done all that, type this control into your terminal:

You will get a lot of prompts! You lot can answer them, but it'southward also safe to just keep hit return and not worry about information technology.

One time the prompts are done, utilise your favorite text editor to open all of the files in your project'south root directory. Yous could do this with a terminal command such as cantlet . or subl .. You will see that a new file named package.json has been created!

What but happened?

The command npm init automatically creates a new file named package.json. package.json contains metadata about your new project.

Before long, yous will install more than npm modules. package.json keeps rails of the modules that yous install. Other developers can look at your bundle.json file, hands install the same modules that you've installed, and run their own local versions of your project! This is fantastic for collaborating.

Install React

Alright! You've made a project folder, navigated into information technology, and used npm init to create a parcel.json file. Now you're ready to install some modules!

To install a module using npm, you need to know that module'due south name. If you want to install a module and y'all aren't sure of its exact name, you lot tin search for information technology here. Our first module is named react.

To install the react module, type this command in the terminal:

install can be abbreviated every bit i, and --salve tin exist abbreviated equally -S, if you like to abbreviate:

You just installed React! Now you tin can admission it in your files with the lawmaking var React = crave('react').

Install ReactDOM

If you wait at package.json, you can see that there's an object named dependencies that now has react listed every bit a dependency. This indicates that your projection is "dependent" on having react installed. If someone tries to run your projection, it probably won't work unless they install react showtime.

You lot tin can also see something else new in your directory: a folder named node_modules.

node_modules is where npm modules are saved. If you open node_modules, you should run across a binder named react, which contains the code that makes React run.

The adjacent thing that you lot desire to install is react-dom. In one case yous install react-dom, yous volition be able access it in your files with the code var ReactDOM = require('react-dom').

To install react-dom, type one of these ii commands in the terminal:

Whenever you lot're ready, continue to our next article!

DOWNLOAD HERE

Posted by: kinlawhathapasse.blogspot.com

Share this post