早在六年前,前端开发已经实现了模块化、工程化开发，既然是模块化工程化开发那就少不了包管理工具，所以我们的第一步就是先从安装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开发环境的更多相关文章

  1. Webpack笔记（二）——搭建React开发环境

    前几天一直在学习webpack,总算比之前学习的时候有了点收获,所以在昨天发布了一篇webpack入门笔记,今天继续使用webpack练了练手,搭建了一个React开发环境,如果还不熟悉的童鞋可以看一 ...

  2. 初探webpack之从零搭建Vue开发环境

    初探webpack之搭建Vue开发环境 平时我们可以用vue-cli很方便地搭建Vue的开发环境,vue-cli确实是个好东西,让我们不需要关心webpack等一些繁杂的配置,然后直接开始写业务代码, ...

  3. 使用webpack搭建react开发环境

    安装和使用webpack 1.初始化项目 mkdir react-redux && cd react-redux npm init -y 2.安装webpack npm i webpa ...

  4. 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 执行命令 ...

  5. 从零搭建Vue开发环境

    参考: 1.node安装和环境配置:https://www.cnblogs.com/zhouyu2017/p/6485265.html: 2.babel的安装:https://www.cnblogs. ...

  6. 从零搭建Golang开发环境--go修仙序章

    1. 什么是go语言 Go(又称 Golang)是 Google 的 Robert Griesemer,Rob Pike 及 Ken Thompson 开发的一种静态 .强类型.编译型语言 .Go 语 ...

  7. 用webpack搭建react开发环境

    安装插件: npm install react react-dom babel-loader babel-core babel-preset-react babel-preset-es2015 配置w ...

  8. 在 NodeJs 上搭建 React 开发环境

    步骤: 1. 安装 nodejs :根据你的 Windows 类型(x86或x64)下载相应的安装包进行安装.安装完成后,可以在任一目录下打开 cmd 窗口并运行 node -v 命令,如果显示 no ...

  9. win10下通过npm成功搭建react开发环境

    1.安装node-v12.13.1-x64(LTS) 2.安装creatre-react-app: npm install -g create-react-app 3.通过create-react-a ...

随机推荐

  1. awk讲义-1-快速入门

    awk讲义-1-快速入门 一.目标问题: 1.统计各个省份中城市的数量(一维数组) 2.统计城市中区县数量,要求输出格式:省份 城市 区县数量(二维数组) 3.求两个文件的交集 4.省市和市区两个文件 ...

  2. java多线程中常用指令

    ------------恢复内容开始------------ 一.写在前面 好久没写博客了,这不快毕业了,应该会重新开始更新博客了.这次主要介绍查看线程状态等一系列常见指令,包括有jps.vmstat ...

  3. DBScan聚类，打破形状的限制，使用密度聚类

    如何用花盆摆放成国庆字,并且包围这两个字. 在DBSCAN中衡量密度主要使用的指标:半径.最少样本量 算法原理 *直接密度可达 如果一个点在核心对象的半径区域内,那么这个点和核心对象称为直接密度可达, ...

  4. 怎么做好企业IT运维工作

    维的工作层次来分,又分为硬件运维.桌面运维.系统运维.数据库运维和应用运维.他们运维的设备,小的从个人电脑,大的到数以亿计的高精尖计算设备(比如 大型机 ). 根据公司 IT 系统规模的不同,运维团队 ...

  5. github：git clone下载加速以及vim-plug下载插件加速

    git clone 下载加速 1. 先在github将仓库地址复制下来 2. git clone时将https://github.com/* 改为https://gitclone.com/github ...

  6. Qt记事本，美化版

    主体代码实现 #include "mainwindow.h" #include "ui_mainwindow.h" #include<QMenu> ...

  7. [源码解析] TensorFlow 分布式环境(3)--- Worker 静态逻辑

    [源码解析] TensorFlow 分布式环境(3)--- Worker 静态逻辑 目录 [源码解析] TensorFlow 分布式环境(3)--- Worker 静态逻辑 1. 继承关系 1.1 角 ...

  8. Java常见的垃圾收集器有哪些？

    守拙者_6a98关注 2020.04.11 22:06:31字数 2,135阅读 394 实际上,垃圾收集器( GC , Garbage Collector )是和具体 JVM 实现紧密相关的,不同厂 ...

  9. consumer 是推还是拉？

    Kafka 最初考虑的问题是,customer 应该从 brokes 拉取消息还是 brokers 将消 息推送到 consumer,也就是 pull 还 push.在这方面,Kafka 遵循了一种大 ...

  10. Oracle入门基础（五）一一多表查询

    SQL> --等值连接 SQL> --查询员工信息:员工号 姓名 月薪 部门名称 SQL> set linesize 80 SQL> desc dept 名称 是否为空? 类型 ...