从零搭建react开发环境
早在六年前,前端开发已经实现了模块化、工程化开发，既然是模块化工程化开发那就少不了包管理工具，所以我们的第一步就是先从安装nodejs开始（安装nodejs携带JavaScript的包管理工具npm）
第一步：在网址https://nodejs.org 下载跟操作系统对应的nodejs，并且安装，安装过程简单只需要下一步下一步就好了。
第二步：安装编辑器（编辑代码使用，如果有编辑器使用经验的请忽略这一步骤），访问网址https://code.visualstudio.com/下载vscode并且安装完成（可能需要重启电脑，后期使用命令行做准备）。
第三步：在安装好nodejs的前提下，新建一个项目的文件夹（文件夹名称尽量是英文并且全部小写），按住shift键不放在这个文件夹空白部分鼠标右键，点击打开“在此处打开PowerShell窗口”，然后会出现命令行工具，在里面输入node -v 然后回车，如果出现nodejs的版本那么说明我们的nodejs搭建完成，然后输入npm init -y初始化项目的包管理配置文件（姑且先这么叫把），然后文件下会出现一个名为package.json的文件，输入"code ."(不需要引号)，会自动打开vscode。
第四步：安装需要的包，打包工具我们选择parcel-bundler（打包工具使用介绍地址：https://parceljs.org/）,在命令行串口PowerShell输入npm install parcel-bundler -g，然后回车全局安装parcel-bundler，代码编译工具babel，输入npm install -D babel-preset-es2015 babel-preset-react，然后回车安装好代码编译工具，接下来是react相关包，在命令行输入npm install react react-dom --save，然后回车等待下载好，
第五步： 新建一个index.html文件，在里面写入一个简单的html，里面写入如下代码
<!doctype html>
<html lang="en">
<head>
<title>ReactDemo</title>
</head>
<body>
<div id='root'></div>
<script src='./main.js'></script>
</body>
</html>
新建一个main.js文件，里面写入如下代码
import React from 'react'
import ReactDom from 'react-dom'
function Index(){
return (<h1>hello,world!</h1>)
}
ReactDom .render(,document.getElementById('root'))
最后一步启动我们的react项目，回到命令行输入parcel ./index.html; 在浏览器打开http://localhost:1234就可以看到我们的react跑起来了，搭建开发环境往往对于刚开始学习的小白来说很困难，但是一旦把环境搭建好了，那基本后面的学习和开发就很快了
从零搭建react开发环境的更多相关文章
- Webpack笔记（二）——搭建React开发环境
前几天一直在学习webpack,总算比之前学习的时候有了点收获,所以在昨天发布了一篇webpack入门笔记,今天继续使用webpack练了练手,搭建了一个React开发环境,如果还不熟悉的童鞋可以看一 ...
- 初探webpack之从零搭建Vue开发环境
初探webpack之搭建Vue开发环境 平时我们可以用vue-cli很方便地搭建Vue的开发环境,vue-cli确实是个好东西,让我们不需要关心webpack等一些繁杂的配置,然后直接开始写业务代码, ...
- 使用webpack搭建react开发环境
安装和使用webpack 1.初始化项目 mkdir react-redux && cd react-redux npm init -y 2.安装webpack npm i webpa ...
- react实战项目开发(1) 搭建react开发环境初始化项目（Create-react-app）
前言 Create React App npm install -g create-react-app create-react-app my-app cd my-app npm start 执行命令 ...
- 从零搭建Vue开发环境
参考: 1.node安装和环境配置:https://www.cnblogs.com/zhouyu2017/p/6485265.html: 2.babel的安装:https://www.cnblogs. ...
- 从零搭建Golang开发环境--go修仙序章
1. 什么是go语言 Go(又称 Golang)是 Google 的 Robert Griesemer,Rob Pike 及 Ken Thompson 开发的一种静态 .强类型.编译型语言 .Go 语 ...
- 用webpack搭建react开发环境
安装插件: npm install react react-dom babel-loader babel-core babel-preset-react babel-preset-es2015 配置w ...
- 在 NodeJs 上搭建 React 开发环境
步骤: 1. 安装 nodejs :根据你的 Windows 类型(x86或x64)下载相应的安装包进行安装.安装完成后,可以在任一目录下打开 cmd 窗口并运行 node -v 命令,如果显示 no ...
- win10下通过npm成功搭建react开发环境
1.安装node-v12.13.1-x64(LTS) 2.安装creatre-react-app: npm install -g create-react-app 3.通过create-react-a ...
随机推荐
- nginx反向代理配置（conf文件中的nginx）
########### 每个指令必须有分号结束.##################user administrator administrators; #配置用户或者组,默认为nobody nob ...
- SQLMAP-Tamper之较为通用的双写绕过
前言 21年省决赛的SQLITE注入就是用的双写绕过,当时是手搓代码打的,这几天想起来了,寻思着写个tamper试试. 一开始以为很简单,后来才发现有很多要注意的点,折磨了挺久. 等弄完才明白为什么s ...
- LGP6011题解
昨天考试考到了这道题,那就来补一下题解吧. 题意简单不再阐述. 首先删除之后还要向左移动,很容易想到 ODT 平衡树,这个过于一眼,不再阐述. 重点说第二种方法. 向左平移的这个操作,我们是否可以用别 ...
- 通信原理：基于MATLAB的AM调幅分析
目的: 通过matlab仿真AM调制,通过图像分析来更好的了解AM调制的过程 1.为什么基带信号要加上一个直流分量. 2.所加直流分量为什么要大于基带信号的最大值. 3.时域中调制信号与载波和基带信号 ...
- JavaScript基础之模块化默认导出:default
在使用 export 导出后,import 导入时需要使用花括号对应模块.使用 export default 后,可以省略花括号.且一个js模块只能有一个默认导出,因此在导入的时候可以随意命名. 但是 ...
- 二维码生成工具——QRCode
下载QRCode的源代码:https://github.com/davidshimjs/qrcodejs 引入项目中:<script type="text/javascript&quo ...
- prometheus虚拟化安装脚本
在线安装下载链接:https://files.cnblogs.com/files/blogs/705493/online_prometheus.sh 离线安装下载链接:https://files.cn ...
- PLSQL导出Oracle表结构
tools->export tables 是导出表结构还有数据 tools->export user objects是导出表结构 可以用tools->export tables ...
- MySQL二进制binlog日志说明以及利用binlog日志恢复数据
MySQL的binlog日志对于mysql数据库来说是十分重要的.在数据丢失的紧急情况下,我们往往会想到用binlog日志功能进行数据恢复(定时全量备份+binlog日志恢复增量数据部分). 一.关于 ...
- 6月11日 python复习 mysql
01. 列举常见的关系型数据库和非关系型都有那些? 1.关系型数据库通过外键关联来建立表与表之间的关系,---------常见的有:SQLite.Oracle.mysql 2.非关系型数据库通常指数据 ...