Set up the environment for React Development

Rect Developer Tools

The React Developer Tools will support your work on React Project.
Once you install the dev tools,you’ll be able to inspect the React component tree.
They are usefull when debugging and when learning about how React is used in other projects.

Chrome extension
Link: oreil.ly/Or3pH

Firefox extension
Link: oreil.ly/uw3uv
![[00-01.png]]

once installed, you’ll be able to see which sites are using React.
![[00-03.png]]

When you open developer tools, there’ll be new tabs visible called Components and Profiler.

Installing Node.js

Node.js is a JavaScript runtime enviroment used to build full-stack applications.

Open a Terminal or Command Prompt windows and type:

node -v

When you run this command, you should see a node version number returned to you.
If you see an error message that says “Command not found”, Node.js is not installed.
This is easily fixed by installig Node.js from the Node.js website.
After installing ,type in the node -v command again, you’ll see the version number.

NPM

When you installed Node.js ,you also installed npm.
NPM is short for Node Package Manager.
We’ll use npm to install a variety of packages.
If you run npm install in the folder that contains the package.json file, npm will install all the packages listed in the project.
Package.json : Describes the project and all its dependencies.

Start your own project from scratch and want to include dependencies, run the command:

npm init -y

To install a package:

npm install package-name

To remove a package with npm , run:

npm remove package-name

YARM

An alternative to npm is Yarn.
If you ever find a project that contains a yarn.lock file,the project uses yarm.
If you’re familiar with the npm workflow, getting up to speed with Yarn is fairly simple.

To install Yarn globally with npm:

npm install -g yarn

When installing dependencies from package.json,in place of npm install , you can run yarn.

To install a specific package with yarn,run:

yarn add package-name

To remove a dependency,run:

yarn remove package-name

本作品采用《CC 协议》，转载必须注明作者和本文链接