React初级篇————基础项目搭建以及环境配置

今日起，开始学习web前端的三大框架之最看好的主流框架React。React用于搭建响应式的前端页面，一切皆为js的思想，具有最高的自由度。这里不作太多介绍，首先先来搭建配置相应的环境。

安装的方式方法很多，我采用的是最为常见的，Nodejs的npm搭建：

1）首先，我们需要安装node.js，直接搜索并在官网下载安装包或是通过菜鸟教程安装。

node.js官网：https://nodejs.org/en/

菜鸟教程：http://www.runoob.com/react/react-install.html

2）选择适合的版本后下载下来，并打开安装程序，等安装完成后，将安装的文件所在路径复制在本地配置环境变量的路径中。

此电脑=>高级系统设置=>系统属性=>path;

3）检查是否安装成功，可以通过查看刚才装的版本号来检查。

打开cmd命令行，输入node -v 和npm -v查看。

4）现在我们成功安装了node和npm，然后我们来用npm创建新的项目，首先用npm 安装 create-react-app工具，其可以自动地在本地目录中创建react项目。

在cmd命令行中输入：

   npm install -g create-react-app

等待其安装，意思是全局安装create-react-app脚手架工具，然后就可以使用命令创建新的react项目。

在cmd中输入：

create-react-app my-new-app

其中：（默认安装在用户目录下，想更换目录可以参照如下命令）

d: （选择D盘）

cd '文件夹路径' （进入D盘中的指定文件夹）

然后再输入 create-react-app my-new-app 则可安装在特定目录下

接下来需要等待较长时间，然后我们就可以在安装路径中看到创建完的文件夹，打开后，内部如下所示

其中，node_modules用于存放项目的依赖包，也就是构建这个React项目可能会用到的工具，

--public文件夹中是 index.html存放目录，也就是React根页面的所在地

--src中用于存放js文件，也就是项目开发中的主要区域

--package.json用于记录项目信息，以及外部依赖包的导入信息等

--json文件不能直接打开，需要用到文本编辑器，本人用的是VScode

然后，在命令行中“ cd ”该目录,输入如下命令,部署npm，以及导入react-dom依赖包.

cmd中输入：

       npm init   （然后一路回车）npm install --save react react-dom  ( 在该目录下导入react和react-dom）npm install --save  react-router-dom   （react路由，以后会用到）

React初级篇————基础项目搭建以及环境配置相关推荐

React项目搭建及环境配置
React 脚手架 create-react-app 为了快速地进行构建使用 React 的项目,FaceBook 官方发布了一个无需配置的.用于快速构建开发环境的脚手架工具 create-react ...
vue项目搭建以及环境配置
一.环境要求:node 1. 下载链接:https://nodejs.org/en/ 2.检查是否安装成功:如果输出版本号,说明我们安装node环境成功(node-v) 3.配置镜像 : npm i ...
react：react + dva + router + roadhog 基础项目搭建
一.脚手架安装第一步:全局安装 dva,这里有个条件,node 版本要 >= 6.5 且 dva-cli 版本要在 0.7x. npm install dva-cli -g 第二步:查看版本号 ...
短信系统后台基础版本搭建服务器环境和功能说明
短信系统基础版本数据库搭建和后台功能介绍短信系统后台基础版本搭建服务器环境和功能此版本为短信系统基础版本一:服务器环境篇 1.1:服务器操作系统使用windows2016 或者是windows ...
Web基础配置篇（一）: Java环境配置
Web基础配置篇(一): Java环境配置一.概述讲web,首先讲java. java环境配置很简单,这里就当做个记录,同时讲下常见的问题和配置的几种方式. 项目地址: 品茗IT-同步发布品茗I ...
React多页面应用5(webpack生产环境配置,包括压缩js代码,图片转码等)
本教程总共7篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1.React多页面应用1(webpack开发环境搭建,包括Babel.热更新等) ----2017 ...
github上的优秀项目和开发环境配置【转http://www.cnblogs.com/2018/archive/2012/11/09/2763119.html】...
github上的优秀项目和开发环境配置国外的几个公司开放的资源 https://github.com/google https://github.com/facebook https://git ...
第一篇Mac上fluter开发环境配置
第一篇Mac上fluter开发环境配置一.安装Xcode 二.安装Android studio 1.下载并安装[下载android studio](https://developer.android ...
mac mysql 链接_mac上搭建mysql环境配置和Navicat连接mysql
mac上搭建mysql环境配置注意:mysql版本要和你的MAC版本保持一致 2.一路傻瓜式点击下一步此处选择"Use Legacy Password Encryption", ...

React初级篇————基础项目搭建以及环境配置

React初级篇————基础项目搭建以及环境配置相关推荐

最新文章

热门文章