从零搭建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 ...
随机推荐
- eval()计算某个字符串,js和jquery都可以使用
实例 执行JavaScript代码或表达式: <script>eval("x=10;y=20;document.write(x*y)");document.write( ...
- vue轻量进度条
**### vue------ mode 好玩东西+1: 轻量级进度条: 1.引入 import NProgress from 'nprogress'; // progress bar import ...
- 理解并手写 bind() 函数
有了对call().apply()的前提分析,相信bind()我们也可以手到擒来. 参考前两篇:'对call()函数的分析' 和 '对apply()函数的分析',我们可以先得到以下代码: Functi ...
- pandas常用操作详解(复制别人的)——数据透视表操作：pivot_table()
原文链接:https://www.cnblogs.com/Yanjy-OnlyOne/p/11195621.html 一文看懂pandas的透视表pivot_table 一.概述 1.1 什么是透视表 ...
- Lua中如何实现类似gdb的断点调试—09支持动态添加和删除断点
前面已经支持了几种不同的方式添加断点,但是必须事先在代码中添加断点,在使用上不是那么灵活方便.本文将支持动态增删断点,只需要开一开始引入调试库即可,后续可以在调试过程中动态的添加和删除断点.事不宜迟, ...
- Django基础五之Ajax
Django基础五之Ajax 目录 Django基础五之Ajax 1. Ajax介绍 2. Ajax前后端传值 2.1 方法一HttpResponse直接返回 2.2 方法二使用Json格式返回 2. ...
- 拉普拉斯特征映射（Laplacian Eigenmaps）
1 介绍 拉普拉斯特征映射(Laplacian Eigenmaps)是一种不太常见的降维算法,它看问题的角度和常见的降维算法不太相同,是从局部的角度去构建数据之间的关系.也许这样讲有些抽象,具体来讲, ...
- Django APIView源码解析
APIView使用:luffy项目中关于APIView的使用 在Django之 CBV和FBV中,我们是分析的from django.views import View下的执行流程,以下是代码 fro ...
- 虚拟机Centos安装配置
开始吧~ 新建一个虚拟机 完成后编辑虚拟机 配置内存 处理器: 映像文件: 点击确定完成配置: 开启虚拟机,对操作系统进行配置 输入红线上内容,为计算机选择默认网卡 选择安装时的语言,可选择中文: 设 ...
- SQLMap参数命令
SQLMap参数命令 --method=<http方法> 指定使用的http方法 --data=<post数据> 提交post数据并对post数据进行测试 --param- ...