从零搭建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 ...
随机推荐
- 前端工程化：使用 shelljs 生成 yapi 接口文件
之前的文章介绍了使用 yapi-to-typescript (下文简称 ytt)生成接口类型定义文件,方便我们直接使用接口的请求和响应类型,能减少很多写接口类型的时间. 使用 yapi-to-type ...
- php 23种设计模型 - 中介者模式
中介者模式 中介者模式(Mediator Pattern)是用来降低多个对象和类之间的通信复杂性.这种模式提供了一个中介类,该类通常处理不同类之间的通信,并支持松耦合,使代码易于维护.中介者模式属于行 ...
- netty系列之:netty中各不同种类的channel详解
目录 简介 ServerChannel和它的类型 Epoll和Kqueue AbstractServerChannel ServerSocketChannel ServerDomainSocketCh ...
- 在基于ABP框架的前端项目Vue&Element项目中采用电子签名的处理
在前面随笔介绍了<在基于ABP框架的前端项目Vue&Element项目中采用电子签章处理文件和打印处理>的处理,有的时候,我们在流程中或者一些文件签署的时候,需要签上自己的大名,一 ...
- Android 12(S) 图形显示系统 - BufferQueue的工作流程（十）
题外话 疫情隔离在家,周末还在努力学习的我 ..... 一.前言 上一篇文章中,有基本讲清楚Producer一端的处理逻辑,最后也留下了一个疑问: Consumer是什么时候来消费数据的?他是自己主 ...
- 提升Spring Boot项目中API接口并发能力的一个注解，效果明显
异步调用几乎是处理高并发Web应用性能问题的万金油,那么什么是"异步调用"?"异步调用"对应的是"同步调用",同步调用指程序按照定义顺序依次 ...
- AQS 详解之共享锁模式
概括 AQS框架数据结构是一个先进先出的双向队列,当多个线程进行竞争资源时,那些竞争失败的线程会加入到队列中.他向上层提供了很多接口,其中一个是acquireShared获取共享模式的接口.本文将会根 ...
- web自动化之svg标签定位
今天在定位元素的时候,发现页面有一个svg标签需要进行定位. 于是便使用常规的xpath定位方法试了一下,很明显结果是不行的,哈哈哈... 错误定位方法://div[@class="oper ...
- python练习册 每天一个小程序 第0009题
1 ''' 2 题目描述: 3 找出一个html文件中所有的url 4 5 思路 : 6 利用正则表达式进行匹配 7 8 ''' 9 10 11 import re 12 13 14 with ope ...
- Python 中 PyQt5 库语法（一）
目录 PyQt5库(一) 一. 简介 1. 什么是 Qt 2. 什么是PyQt 3. 环境搭建 二. 基本结构 1. 第一个程序 2. 控件操作 3. 快速生成代码 4. 面向对象 三. 基类控件 1 ...