快速搭建React的环境步骤详解

前端之家收集整理的这篇文章主要介绍了快速搭建React的环境步骤详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

前端生态这几年可谓迎来了大发展,在这个生态圈内,不接受新事物学习新技能,等于堕入魔道。

本文尝试对前端开发利器React,以及构建项目过程中涉及的技术栈进行介绍,以期开启整个构建流程上的思考。

有必要指出的是,要弄明白一件事情的原理,首先要知道它的目的是什么。

1、Nodejs & NPM

为什么要提nodejs呢?

与其说nodejs提供了服务端开发的另一种可能,不如说它彻底改变了整个前端开发的生态。nodejs平台上衍生出了强大的npm、grunt、express等,几乎重新定义了前端的工作流程和开发方式。

这里有必要来讲一讲NPM(node package manager)这个包管理器。

npm是javascript包管理器,我们可以在npm上找到、分享和使用来自无数开发者贡献的代码包,而无需自己造轮子。

使用npm,需要安装node。新的版本的nodejs已经集成了npm,安装好nodejs,通过以下命令查看所安装的版本:

在项目目录内,当在命令行执行

它会识别一个叫package.json的文件,并尝试安装该文件内配置的依赖包。

2、React

React的组建化思想使得代码重用性高,易于测试、更容易分离关注点(separation of concerns)。

React还宣称Learn Once,Write Anywhere。既可运行在客户端浏览器,又能在服务端渲染,同时React Native还使得React开发原生app成为可能。

下面我们来写一个简单的React程序,让其能够运行起来:

项目目录:

第一步:

新建一个package.json文件,指定项目所需的依赖包。

这是npm包管理器的必要文件,定义了该项目的名称、版本、启动命令、生产环境依赖包(dependencies)和开发环境依赖包(devDependencies)。

第二步:

新建一个index.html文件

<Meta charset="utf-8"> yunmo <Meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>

猜你在找的JavaScript相关文章