tnblog
首页
视频
资源
登录

React前端开发环境搭建

6332人阅读 2020/4/5 14:18 总访问:123060 评论:0 收藏:0 手机
分类: 前端


(一) 安装Node.js,具体步骤如下


 首先,我们需要安装Node.js,直接搜索并在官网下载安装包


 Node.js 官网:https://nodejs.org/en/


 选择一个适合我们需要的版本下载下来,并进行安装,如下图所示


然后,根据安装提示安装Node.jsnpm包管理工具也会一同安装。

安装完成后,打开cmd命令行,输入 node -v npm -v 来查看版本号,如果显示则安装完成,如下图所示。

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

 在cmd命令中输入:npm install -g create-react-app

安装成功后,可以键入cnpm -v检查是否安装成功

我们也可以在安装路径中看到创建完的文件夹,打开后,内部如下所示:


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


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


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


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


   --json文件不能直接打开,需要用到文本编辑器


(二)创建我们的第一个react程序

  例如我们要提前在D盘创建first-react-demo这个文件夹,建好以后就可以在cmd命令中:

   输入:dir,查找一下first-react-demo,文件夹是否存在?存在的话,切换到first-react-demo

   输入:cd D:first-react-demo


安装 cnpm install -g create-react-app(这一步不一定要在workspace目录下,也可以在first-react-demo目录下


可能会报错,也可能不会,报错的话就需要执行:npm cache clean --force


在创建成功的基础上,我们在打开first-react-demo这个文件夹,在打开的cmd窗口中,键入npm start



出来工作后,才知道自己欠失的地方有太多,要学的东西太多太多.........






评价

react介绍

React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设I...

react 安装 create-react-app脚手架 搭建项目

安装脚手架 npm install -g create-react-app查看是否安装成功create-react-app -V创建项目create-react-app demo运行 npm ...

reactts项目配置@别名

在tsconfig.json中配置路径别名:打开项目根目录下的tsconfig.json文件。在compilerOptions字段下添加以下两个属性:"...

vue3 ts 方法传参any使用。vue3 ts reactive 使用类型,定义具体类型。vue3 ts实现分组 多字段作为key分组,二级分组,多级分组,子级分组

[TOC]vue3 ts 方法传参,any使用方法1: // 循环解析 dataListToAppend.forEach((element: any) => { state.tasks...

01-后端开发的-MVC-与前端开发-MVVM-之间的区别

现在网站开发一般都是前台页面与后台的数据交互相互分离的状态,两者之间可以使用 Ajax 远程发送和响应数据,[注意:当然也不...

前端---css

一,css的三大特性层叠性,继承性,优先级。1,层叠性:指多种css样式。如果样式冲突,会以css的书写顺序,将最后的样式为准...

vue前端)使用微信jsSDK

前端使用微信JSSDK 需绑定域名不能带有http、https开头前端使用时直接引入js 微信提供了两种js 在需要调用JS接...

前端、Cordova安卓、iOS开发,全自学 一个星期多时间累死我了,撑过来了

前言自学前端之路:不知不觉出来工作已经快一个月了,给你们分享一下状况正文最近公司用的项目是ionic框架开发不得不自学哇...

前端好用的导出excel插件,可自定义写导出样式等等

前端好用的导出excel插件,可自定义写导出样式等等github:https://github.com/exceljs/exceljs/blob/HEAD/README_zh.md

@postmapping参数接受_spring-boot如何去获取前端传递的参数

原文链接:https://blog.csdn.net/weixin_39875167/article/details/112091649url里的参数通过url里传过来的参数一般有三种...

前端容器启动时执行命令

dockerfile FROM nginx RUN rm /etc/nginx/conf.d/default.conf ADD ./default.conf /etc/nginx/conf.d COPY ./c...

vue布局模板,前端布局模板,flex布局应用

设计图效果: 代码: <!-- 学习活跃度 --> <template> <div class="learnActivityContainer&q...

前端jsts小写数字转大写

简单的处理就是用一个键值对来匹配写好对应的键值对: const state = reactive({ smallBigDic: { 1: "...

css弹性盒子,flex布局

css弹性盒子由于版本不同浏览器问题造成了一些不同的写法display:flexbox;在google浏览器中如果使用下面的写法就不行displa...

css图片和文字对齐问题

文字和图片写到一排经常会出现对不齐的问题 这样感觉图片会上来一点没有和文字对齐,如下图 但是如果修改下html结...
人之因此能,是坚信能
排名
26
文章
22
粉丝
12
评论
8
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术