从零搭建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跑起来了,搭建开发环境往往对于刚开始学习的小白来说很困难,但是一旦把环境搭建好了,那基本后面的学习和开发就很快了

posted @ 2018-04-21 11:46  名分开就是姓名  阅读(569)  评论(0编辑  收藏  举报