从零搭建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 ...
随机推荐
- mysql5.7开启二进制日制中间遇害到的坑
centos7下经过多次试验最终开启进这制日志成功. 最终用以下这个方法在mysql5.7下开启日志成功 下面这两个参数注意是下划线不是"-" log_bin=mysql-bin ...
- WPF关于绑定与更新修改
看到一些资料与教程视频,在这里记录一下, 首先 我们先做好一个公共的INotifyPropertyChanged事件,也就是通知更新 public class ViewModelBase : INot ...
- 35 异常机制 异常处理机制 异常处理五个关键字 try、catch、finally、throw、thorws 代码
异常处理机制 概念 抛出异常 捕获异常 异常处理五个关键字 try.catch.finally.throw.thorws 代码 // main { int a = 1; int b = 0; // 假 ...
- spring——整合Mybatis
一.Mybatis整合spring 步骤: 导入相关jar包 junit mybatis mysql数据库 spring-webmvc aop织入 mybatis-spring spring-jdbc ...
- 74CMS 3.0 SQL注入漏洞后台
代码审计工具:seay CMS:74CMS3.0 一. 启动环境 1.双击运行桌面phpstudy.exe软件 2.点击启动按钮,启动服务器环境 二.代码审计 1.双击启动桌面Seay源代码审计系统软 ...
- docker学习笔记（4）- 应用数据管理（容器外）
简介 docker storage driver支持了image分层存储和容器可写层的存储管理,使用挂载主机目录的方式可以将数据存储在主机的文件系统上或内存中. 之前学习过镜像的分层存储,以Docke ...
- netcore后台任务注意事项
开局一张图,故事慢慢编!这是一个后台任务打印时间的德莫,代码如下: using BackGroundTask; var builder = WebApplication.CreateBuilder() ...
- dfs:10元素取5个元素的组合数
#include "iostream.h" #include "string.h" #include "stdlib.h" int sele ...
- Kafka学习（一）
作者:普适极客链接:https://www.zhihu.com/question/53331259/answer/1321992772来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载 ...
- JSP和Servlet有哪些相同点和不同点？
JSP是Servlet技术的扩展,本质上是Servlet的简易方式,更强调应用的外表表达.JSP编译后是"类servlet". Servlet和JSP最主要的不同点在于,Servl ...