React学习(1)—— 基础项目搭建以及环境配置
首先,我们需要安装node.js,直接搜索并在官网下载安装包。
node.js官网:https://nodejs.org/en/
现在我们成功安装了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路由,以后会用到)
npm获取有些耗时间,这里建议大家使用淘宝团队的cnpm,安装方法请另行搜索。以后会用cnpm代替npm,效果一样。
然后就可以通过 npm start 来启动项目,自动弹出localhost:3000的网页窗口。
想关闭项目的话,直接关闭CMD窗口就可以,或者使用 Ctrl+C ,输入Y后退出
React学习(1)—— 基础项目搭建以及环境配置的更多相关文章
- Ant学习-001-ant 基础知识及windows环境配置
一.Ant 概要基础知识 Apache Ant 是一个将软件编译.测试.部署等步骤联系在一起加以自动化的一个工具,大多用于Java环境中的软件开发,用以构建应用,或结合其他开源测试工具例如 git.T ...
- vue学习(1) vue-cli 项目搭建
vue学习(1) vue-cli 项目搭建 一.windows环境 1. 下载node.js安装包 官网:https://nodejs.org/en/download/ 选择LTS下载 2. 安装 ...
- [eShopOnContainers 学习系列] - 02 - vs 2017 开发环境配置
[eShopOnContainers 学习系列] - 02 - vs 2017 开发环境配置 https://github.com/dotnet-architecture/eShopOnContain ...
- 《Asp.Net Core3 + Vue3入坑教程》-Net Core项目搭建与Swagger配置步骤
简介 <Asp.Net Core3 + Vue3入坑教程> 此教程仅适合新手入门或者前后端分离尝试者.可以根据图文一步一步进操作编码也可以选择直接查看源码.每一篇文章都有对应的源码 教程后 ...
- mac上搭建mysql环境配置和Navicat连接mysql
mac上搭建mysql环境配置 1.下载mysql for mac: https://downloads.mysql.com/archives/community/ 注意:mysql版本要和你的MAC ...
- 从 Vue 的视角学 React(一)—— 项目搭建
虽然 Vue 在国内一家独大,但在全球范围内,React 依然是最流行的前端框架 最近和一些朋友聊天,发现很多项目都选择了 React 技术栈,而且公司的新项目也决定使用 React 我一直以来都是走 ...
- 烂泥:学习ubuntu之快速搭建LNMP环境
本文由秀依林枫提供友情赞助,首发于烂泥行天下 现在公司使用的都是ubuntu系统,这几天由于个别项目需要,需要搭建一个LNMP环境.为了快速搭建这个环境,我使用是apt-get方式进行安装.具体的操作 ...
- springboot基础项目搭建(十五篇)
springboot系列一.springboot产生背景及介绍 springboot系列二.springboot项目搭建 springboot系列三.springboot 单元测试.配置访问路径.多个 ...
- Linux Ubuntu从零开始部署web环境及项目-----搭建ssh环境(一)
linux搭建ssh环境 1,用户登录 成功输入用户名和密码后 进入Ubuntu界面 2,配置网络 参考:http://blog.csdn.net/liu782726344/article/deta ...
随机推荐
- css 条纹背景
先介绍文章用到的二个知识点 background-size 属性 语法 background-size: length|percentage|cover|contain; css线性渐变 linear ...
- 如何设置树莓派的VNC开机时启动
转载:http://www.linuxidc.com/Linux/2016-12/138793.htm 下面正式开始配置 首先 sudo nano /etc/init.d/vncserver 然后 复 ...
- HQL(Hibernate Query Language)
1. NativeSQL > HQL > EJB QL(JP QL 1.0) > QBC(Query By Criteria) > QBE(Query By Example)2 ...
- python闭包&装饰器&偏函数
什么是闭包? 首先还得从基本概念说起,什么是闭包呢?来看下维基上的解释: 在计算机科学中,闭包(Closure)是词法闭包(Lexical Closure)的简称,是引用了自由变量的函数.这个被引用的 ...
- ubuntu 火狐浏览器中常规方法安装flashplayer的问题
之前在网上看到很多朋友介绍了许多如何在ubuntu安装flashplayer 的方法!但是我的操作系统不知怎么的就是不能成功的安装!使我十分的苦恼!但是在我纲要邪气的时候再网上又看到一位朋友的解决方案 ...
- 第二次Surm冲刺
一.小组完成情况: 因为技术原因,小组部分代码还没有完成,现在已经可以实现简单的借书与还书操作. 二.个人情况 我对代码进行了测试,与大家进相关的讨论. 三.总结 这次实验的团队合作真的很重要,有许多 ...
- Docker入门系列之一:在一个Docker容器里运行指定的web应用
实现题目描述的这个需求有很多种办法,作为入门,让我们从最简单的办法开始. 首先使用命令docker ps确保当前没有正在运行的Docker实例. 运行命令docker run -it nginx: 然 ...
- Django Request 与Response对象
Django使用请求和响应对象在系统中传递状态.当请求页面时,Django创建一个HttpRequest对象,该对象包含关于请求的元数据. 然后Django加载适当的视图,将HttpRequest作为 ...
- 设计模式——工厂模式(Factory Method)
工厂方法模式,定义一个用于创建对象的接口,让子类决定实例化哪个类.工厂方法使一个类的实例化延迟到其子类. UML图: 运算基类: package com.cnblog.clarck; /** * 数据 ...
- 每天一个linux命令(22):tar命令
通过SSH访问服务器,难免会要用到压缩,解压缩,打包,解包等,这时候tar命令就是是必不可少的一个功能强大的工具.linux中最流行的tar是麻雀虽小,五脏俱全,功能强大. tar命令可以为linux ...