从零搭建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 ...
随机推荐
- 表格的td行利用css显示...
默认超过指定长度以...显示, 鼠标放到文本上显示全 代码如下 .fh{ max-width:220px; word-wrap:break-word; text-overflow:ellipsis ...
- Adobe photoshop CS6 + 破解补丁
软件位置: 链接:https://pan.baidu.com/s/1KeKRS0yIMfeEbOJQ-ilo0g 破解流程 首先断开网络连接 (如果不断网安装过程中会要求登陆)打开Photoshop ...
- 禁用 Windows 共享服务，释放 445 端口
禁用 Windows 共享服务,释放 445 端口 转载自:https://blog.csdn.net/liu857279611/article/details/71786068 在 Window ...
- 高级IO模型之kqueue和epoll
目录 简介 block IO和nonblocking IO IO多路复用和select poll epoll kqueue epoll和kqueue的优势 简介 任何一个程序都离不开IO,有些是很明显 ...
- Java基础——抽象类
一.概述: 在Java中,一个没有方法体的方法应定义为抽象方法在public 修饰符后加 abstract修饰符,而类中如果有抽象方法,该类必须定义为抽象类在public 修饰符后加 abstract ...
- 模块 序列化模块：json pickle
模块:一个模块就是一个包含了Python定义和声明的文件,文件名就是模块名字加上.py的后缀 模块的形象: 内置模块:安装Python解释器的时候一起安装上的 第三方模块(扩展模块):需要自己安装 自 ...
- 74CMS 3.0任意文件写入漏洞
一. 启动环境 1.双击运行桌面phpstudy.exe软件 2.点击启动按钮,启动服务器环境 二.代码审计 1．双击启动桌面Seay源代码审计系统软件 2．因为74CMS3.0源代码编辑使用GBK编 ...
- Git-rebase使用原理
使用 Git 已经好几年了,却始终只是熟悉一些常用的操作.对于 Git Rebase 却很少用到,直到这一次,不得不用. 一.起因 上线构建的过程中扫了一眼代码变更,突然发现,commit 提交竟然多 ...
- web测试知识点整理
web是如何测试的? 1. 通用功能测试和可用性测试 2. 性能测试和安全性测试 3. 兼容性测试 4. 数据库和稳定性测试等 web功能测试怎么测? 从一下几个方面来进行WEB测试: 1. 链接测试 ...
- 【ASP.NET Core】MVC模型绑定：非规范正文内容的处理
本篇老周就和老伙伴们分享一下,对于客户端提交的不规范 Body 如何做模型绑定.不必多说,这种情况下,只能自定义 ModelBinder 了.而且最佳方案是不要注册为全局 Binder--毕竟这种特殊 ...