自己动手搭建React开发环境之一React和ReactDOM

导读:React作为近年来大红大紫的view层框架,以其高效、灵活性、强大的社区环境而受到广泛关注。但React也不是直接就能拿来使用的,它必须通过配置相应环境才能更好的开发项目。虽然你可以使用官方推荐的构建React环境方式Create React App ,但有时候也想知道到底它是怎么配置的,所以自己动手搭建React环境也是很必要的学习过程。本系列分为5章,翻译自codecademy关于React搭建的教程。本篇原文地址:React Setup, Part I: React and ReactDOM

Background

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

为了使你能够完成React的练习和运行代码,Codecademy对此提供了开发环境 。现在你已经学会了如何写React代码,那让我们进入下一个阶段:如何搭建开发环境以使得能开发自己的应用。

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 you:

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

我们写了一个关于整个过程的简单的指南。本篇文章也是这个系列的第一篇指南。本篇文章讲教给你以下内容:

  1. 怎么安装Node.js和npm
  2. npm和你之前用过的包管理工具有什么不同
  3. 如何创建package.json文件,及其含义
  4. 如何安装React和ReactDOM库

Installing Node and npm

Getting React up and running is not as simple as downloading one large piece of software. You will need to install many, smaller software packages.

让React运行起来并不像只是下载一个大型软件那么简单。你需要安装很多小软件包。

The first thing to install is a good installer! You need a way to download and install software packages easily, without having to worry about dependencies.

首先要安装的是一个安装器。你需要一种可以不用担心依赖的下载和安装软件包的方式。

In other words, you need a good package manager. We’ll be using a popular package manager named npm. npm is a great way to download, install, and keep track of JavaScript software.

换句话说,你需要一个优秀的包管理器。我们会用到一种流行的包管理器,它的名字叫做npm。npm是能很好地下载、安装和记录JavaScript软件。

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

  1. Ctrl-click here to navigate to the Node.js homepage in a new tab.
  2. You should see links to download Node.js. Click on the download link of your choice. Follow the subsequent instructions to install Node.js and npm. If you’ve already installed Node.js, that’s okay, do it anyway.

通过安装Node.js就能安装npm。Node.js是一种用来开发服务器端应用的环境。当你安装Nodejs时会自动安装npm。

  1. Ctrl+单击这里会在浏览器的新标签导航到Node.js。
  2. 你会看到下载Node.js的链接。按你的需要下载。按随后的说明安装Node.js和npm。如果你已经安装了Node.js,那就继续吧。

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

恭喜你,你现在已经安装了一些非常牛的软件。

How npm is Different

When you install software, you may be used to something like this: you install what you need, it sits there on your computer, and you can use it whenever you want.

当你安装软件时,你可能会习惯这样:安装需要的软件,它位于电脑中,你可以在需要的时候用它。

You can do that with npm! But there’s a different, better way: install what you need, over and over again, every time that you need it. Download and install React every time that you make a React app.

npm也能做到。但是却有个不一样但更好的方式:每次用到的时候都需要一次次安装所需的东西。每次在做React应用时都要重新下载安装React。

That sounds much worse! Here’s why it’s actually better:
First, npm makes installation extremely easy. Installing software over and over sounds like a headache, but it really isn’t. We’ll walk through how soon!
Second, npm modules (“modules” are another name for software that you download via npm) are usually small. There are countless modules for different specific purposes. Instead of starting your app with a giant framework that includes tons of code you don’t need, you can install only modules that you will actually use! This helps keep your code quick, easy to navigate, and not vulnerable to dependencies that you don’t understand.

那听起来似乎很糟糕。下面是为什么说这种方式好的原因:
第一,npm使安装过程极其简单。一次次安装听起来很头疼,但它事实上并不。我们很快就可以安装完成。
第二,npm模块(模块是你通过npm安装的软件的另一种叫法)通常很小。有数不尽的特定目的的模块。你只需安装你实际用到的模块,而不再需要通过加载一个包含大量的用不到的代码的框架来启动app。这会使你的代码简介,容易管理,免受你不懂的依赖的伤害。

IN CONCLUSION: Starting now, every step in this article series will be a step that you have to take every time you make a new React app. You don’t have to install Node.js and npm anymore, but you should start from here for every new React project that you make.

最后:从现在开始,之后的每个步骤都是为创建一个React app的必要步骤。你不必再安装Node和npm了,但你应该从这开始学习创建React项目。

npm init

Alright, let’s make a React app on your home computer! Where do you start?

To begin, decide where you want to save your app, and what you 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’s name. cd into your new directory.

好了,现在让我们开始再本地电脑上创建React app。从哪开始呢?
首先,你要决定在哪保存app和给它起个名字。在终端,cd到你想要保存app的地方,用mkdir和app的名字来创建一个新的文件夹。cd到新文件夹。

Once you’ve done all that, type this command into your terminal:
做完之后,在终端键入以下命令:

这里写图片描述
You will get a lot of prompts! You can answer them, but it’s also safe to just keep hitting return and not worry about it.

你会得到很多提示!你要回答它们,就算碰到一些返回的提示也不用担心。

Once the prompts are done, use your favorite text editor to open all of the files in your project’s root directory. You could do this with a terminal command such as atom . or subl .. You will see that a new file named package.json has been created!

一旦做完所有的提示,用你最喜欢的文本编辑工具打开在你项目根目录下的文件。你也可以采用一些终端命令行,想atom .subl ..你将看到一个叫做package.json的文件被创建了。

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

刚才发生了什么?
npm init命令会自动创建一个叫做package.json的文件,该文件包含了关于你项目的信息。

Soon, you will install more npm modules. package.json keeps track of the modules that you install. Other developers can look at your package.json file, easily install the same modules that you’ve installed, and run their own local versions of your project! This is fantastic for collaborating.

不久,你就会安装更多的npm模块,package.json会保持记录你安装的模块,一些开发者看到你的package.json文件,会容易地安装你安装的那些模块,然后运行你的项目的他们的本地版本!多么愉快的合作!

Install React

Alright! You’ve made a project folder, navigated into it, and used npm init to create a package.json file. Now you’re ready to install some modules!

好的,你已经建了一个项目文件夹,并进该目录,用npm init
创建了一个package.json文件。现在你可以准备安装模块了。

To install a module using npm, you need to know that module’s name. If you want to install a module and you aren’t sure of its exact name, you can search for it here. Our first module is named react.

要用npm安装模块,你需要知道模块名,要是你不知道想要安装的模块的名字,你可以在这里搜索。我们要安装的第一个模块是react。

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

为安装react模块,在终端键入以下命令:

这里写图片描述

install can be abbreviated as i, and --save can be abbreviated as -S, if you like to abbreviate:

如果你喜欢简写的话,install可被简写为 i, --save可被简写为 -S

这里写图片描述

You just installed React! Now you can access it in your files with the code var React = require('react').

你已经安装好了React!现在可以在文件中通过var React = require('react')导入react。

Install ReactDOM

If you look at package.json, you can see that there’s an object named dependencies that now has react listed as a dependency. This indicates that your project is “dependent” on having react installed. If someone tries to run your project, it probably won’t work unless they install react first.

看一下package.json,你会看到有个对象叫做dependencies,“react”被列举到dependencies中。这标志着你的项目要依赖安装的react。如果有人运行你的项目,只有安装了react,你的项目才会正常工作。

You 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 see a folder named react, which contains the code that makes React run.

你会看到在你的目录下有一个叫做node_modules的文件夹。node_modules保存npm包。如果你打开node_modules,你会看到react文件夹,里面包含使React运行的代码。

The next thing that you want to install is react-dom. Once you install react-dom, you will be able access it in your files with the code var ReactDOM = require('react-dom').

接下来要安装的是react-dom。一旦你安装好react-dom,你就可以在文件中输入代码var ReactDOM = require('react-dom')来导入react-dom

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

要安装react-dom,在终端键入以下命令中的任意一个:

这里写图片描述

这里写图片描述

Whenever you’re ready, continue to our next article!

准备好的话,继续下一篇文章

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章