Reactjs+BootStrap开发自制编程语言Monkey的编译器:创建简易的页面IDE

本文主要是介绍Reactjs+BootStrap开发自制编程语言Monkey的编译器:创建简易的页面IDE,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

为了尽快上手React,我们先通过一个实际例子,增加你的感性认识。我们将使用React先构建一个简单的Monkey代码编译器,没有感性认识的知识讲解都是bullshit,就像你没摸过水就跟你讲解游泳理论一样。即使你对Reactjs的运用一无所知,通过亲手把代码敲一遍,并看到实践的效果,你内心也自动会对Reactjs有了较为深刻的认知。

首先你需要自行安装好node.js,React本身并不需要Node.js,但开发中需要的很多工具和模块需要Node.js的支持,特别是我们需要NodeJS的npm 模块安装工具。安装好NodeJS后,先运行以下命令:

npm install --global create-react-app

create-react-app 是通过npm模块发布的一个安装包,通过该工具,我们能快速创建一个reactjs项目。接着执行以下命令:

npm install --save react-bootstrap

上面的命令用来安装试用与react框架的boostrap UI控件库,我们将使用它来开发我们Monkey编程语言的IDE。完成上面的安装后,我们就可以创建第一个Reactjs项目了,运行以下命令:

create-react-app monkey_compiler

这个命令会在本地目录创建一个名为monkey_compiler的目录,它已经是一个可运行的reactjs项目,我们在此基础上通过修改或添加若干文件,就可以完成相应的React应用开发,避免大量繁琐的配置工作。接着我们执行:

cd monkey_compiler
npm start

上述命令执行后,命令会启动一个开发模式的服务器,同时会自动调用浏览器打开一个页面,页面指向本地地址http://localhost:3000, 基本情况如下图:

这里写图片描述

接下来,我们将进入MonKey语言IDE的开发,我们将利用reactjs组件化开发的特点,通过乐高式搭积木的方式,逐步开发出一个功能丰富的页面IDE出来,我们先为项目增加一个新的react组件。你可以把react组件想象成一块砖头,整个react最终项目想象成一座大楼,我们通过砖头间的排列组合就可以搭建出我们想象中的大楼,更重要的是,这些砖头可以重用,你可以在这里搭建‘央视大裤衩’,也可以用相应的砖头搭建‘悉尼歌剧院’,由此可见react框架通过组件化的方式构建项目的模式是相当灵活且强大的。

在生成的monkey-compiler项目中,有一个目录叫src/,该目录用于存放项目的所有代码文件,在开发过程中,我们只要关注src目录中的内容,打开其中的index.js,可见内容如下:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

其中的App 就是一个组件,它被加载后,效果就是我们前面看到的那样。我们稍作修改,定义一个新组件,修改后代码如下:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import MonkeyCompilerIDE from './MonkeyCompilerIDE';
import registerServiceWorker from './registerServiceWorker';ReactDOM.render(<MonkeyCompilerIDE />, document.getElementById('root'));
registerServiceWorker();

我们把App换成了MonkeyCompilerIDE,我们先把代码的具体含义放一放,先看看如何增加一个React组件,在src目录下创建一个新的代码文件叫MonkeyCompilerIDE.js,并在里面添加如下代码:

import React , {Component} from 'react'
import * as bootstrap from 'react-bootstrap'class MonkeyCompilerIDE extends Component {constructor(props) {super(props)}render () {let textAreaStyle = {height: 480};return (<bootstrap.Panel header="Monkey Compiler" bsStyle="success"><bootstrap.FormGroup><bootstrap.FormControl componentClass = "textarea" style={textAreaStyle}placeholder="Enter your code" /></bootstrap.FormGroup><bootstrap.Button bsStyle="danger">Lexing</bootstrap.Button></bootstrap.Panel>);}
}export default MonkeyCompilerIDE

由于我们使用到了boostrap控件库,因此需要从外部引用相关的css样式文件,回到根目录,进入public目录,打开index.html,在其头部添加如下代码:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

代码解析一会再说,完成上面代码后,先通过命令npm start看看运行效果:

这里写图片描述

这就是我们想要的Monkey编程语言开发所用的IDE,相当于Visual Studio或Eclipse,当然现在看起来它太简陋,我们后续会慢慢增强其功能。在文本框中键入Monkey 代码,点击下面按钮,我们就可以开始编译原理算法中的第一步:词法解析,这是我们后续章节要详细讲解的内容。回过头来,我们先解析一下刚完成的组件代码。

你或许可以感觉到,我们用来开发组件的代码不像是前端开发常用的javascript,组件通过class关键字来定义,而且用constructor函数作为类的初始化函数,这些代码看起来似乎与常用的java语言很相像了。这些代码遵循的标准叫ES6,是最新版的js代码语法格式,实际上当前主流浏览器并不支持这种格式代码的解析和执行,但为何他们仍然能运行在各大浏览器中呢?这是因为在Reactjs框架中内嵌了一个小型编译器叫Babel,它会把上面代码编译成浏览器能够解析并执行的常用E5标准的javascript代码,由此可见,掌握编译原理的重要性可见一般了吧!

在index.js中,我们使用import将新组件导入,以便替代原有的App组件。在MonkeyCompilerIDE.js中,第一行我们从react库中引入React和Component两个组件:

import React , {Component} from 'react'
import * as bootstrap from 'react-bootstrap'

第二行我们把react-bootstrap组件库中所有组件全部加载进来,并给予一个统称叫bootstrap,如果我想使用其中的一个组件例如Button,(上面左下角的红色按钮就是由Button组件创建的),那么我们可以通过bootstrap.Button来引用,这跟我们很类似与从一个类中引用它的公有成员变量。

Component组件是所以组件的基类,如果你熟悉java的话,该组件相当于java所有类的父类Object。因此MonKeyCompilerIDE组件的父组件就是Component。在React出现之处,组件的创建方法是通过调用React.createClass来创建组件,现在网上或一些书籍对React的讲解还是基于这种办法,我们必须意识到,这种办法是过时的办法。这两种方式的差异显示出React框架在开发方法论上的显著进化,我们现在使用的是类似于java那样面向对象的开发方式,而React.createClass这种创建组件的方式其实是类似于C语言那样的,面向过程的开发方式。

在上面的代码中我们导入了Component类有被使用到,但导入的React组件却没有被使用到,你可以尝试把第一行中的React给删除然后再加载页面,你就可以看到错误信息:’React’ must be in scope when using JSX。

这里的JSX是一个比较抽象的概念,React的初学者很容易被这个概念搞得糊里糊涂,就像C语言的初学者总会被‘指针’搞得二和尚摸不在头脑一样。什么是JSX呢,在render()函数中,我们通过return返回了一堆类似HTML代码似的东西:

<bootstrap.Panel header="Monkey Compiler" bsStyle="success"><bootstrap.FormGroup><bootstrap.FormControl componentClass = "textarea" style={textAreaStyle}placeholder="Enter your code" /></bootstrap.FormGroup><bootstrap.Button bsStyle="danger">Lexing</bootstrap.Button>
</bootstrap.Panel>

是的!上面这坨看似与HTML代码非常类似的代码块就叫JSX.它们格式跟HTML很像,但他们不是HTML, 因为它其中包含了HTML规范没有的标签,例如bootstrap.Panel, 其实<>这对尖括号中包含的东西都叫组件而不是标签,由于JSX的形式与HTML实在太像了,所以初学者对它很容易感觉迷茫和困惑。

所谓JSX,它本质是javascript语法的扩展,也就是javascript extension。JSX中,JS代表javascript, X代表 eXtension. 上面那一坨看似HTML的代码其实是以HTML标签化形式来编写的javascript代码,首先要注意上面那坨代码中,有很多元素是HTML规范中没有的。

在React创建之初,人们对这种把javascript代码以HTML标签似来写的方式非常反感。因为这实在太容易引起认知混乱了。但是经过一段时间后,业界发现这种办法很实用。因为原来前端开发的基本思路是,用HTML来表示内容,用CSS来表示样式,用Javascript来定义交互行为,这是三种不同的语言,三种不同的设计逻辑,并且它们往往分布在不同的文件里,这就使得设计逻辑分成了多个不同的部分和层次,因此会带来项目理解和管理上的很多麻烦。

一个组件实际上是一个逻辑上有高度耦合性的独立性个体。如果按照原有方式,那意味着需要把一个原则上不可分的个体分成了三部分(HTML,CSS,Javascript)。既然是一个像原子一样不可再分的单元,那么设计上就应该把所有逻辑整合在一起。我们看到,在render函数中,我们还定义了一个textAreaStyle的对象,不难看出,它实际上承担了原来CSS的作用,也就是说,在JSX中,我们可以统一用javascript语言来代替原来需要用HTML和CSS来实现的功能,于是这样,原来分开三部分的设计逻辑在这里就统一起来了。

JSX是reactjs前端开发的核心功能所在,对初学者而言,它不好理解,但只要随着我们项目的深入,练习多了后,你慢慢的会掌握和消化它。下一节我们将在本节的基础上,进入代码编译的第一步:词法解析。

更详细的讲解和代码调试演示过程,请点击链接,如果点击页面没有发现相应视频,那说明视频还在审批中,敬请期待。

更多技术信息,包括操作系统,编译器,面试算法,机器学习,人工智能,请关照我的公众号:
这里写图片描述

这篇关于Reactjs+BootStrap开发自制编程语言Monkey的编译器:创建简易的页面IDE的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/756770

相关文章

使用Python和Pyecharts创建交互式地图

《使用Python和Pyecharts创建交互式地图》在数据可视化领域,创建交互式地图是一种强大的方式,可以使受众能够以引人入胜且信息丰富的方式探索地理数据,下面我们看看如何使用Python和Pyec... 目录简介Pyecharts 简介创建上海地图代码说明运行结果总结简介在数据可视化领域,创建交互式地

Go语言开发实现查询IP信息的MCP服务器

《Go语言开发实现查询IP信息的MCP服务器》随着MCP的快速普及和广泛应用,MCP服务器也层出不穷,本文将详细介绍如何在Go语言中使用go-mcp库来开发一个查询IP信息的MCP... 目录前言mcp-ip-geo 服务器目录结构说明查询 IP 信息功能实现工具实现工具管理查询单个 IP 信息工具的实现服

使用Python开发一个带EPUB转换功能的Markdown编辑器

《使用Python开发一个带EPUB转换功能的Markdown编辑器》Markdown因其简单易用和强大的格式支持,成为了写作者、开发者及内容创作者的首选格式,本文将通过Python开发一个Markd... 目录应用概览代码结构与核心组件1. 初始化与布局 (__init__)2. 工具栏 (setup_t

Spring Shell 命令行实现交互式Shell应用开发

《SpringShell命令行实现交互式Shell应用开发》本文主要介绍了SpringShell命令行实现交互式Shell应用开发,能够帮助开发者快速构建功能丰富的命令行应用程序,具有一定的参考价... 目录引言一、Spring Shell概述二、创建命令类三、命令参数处理四、命令分组与帮助系统五、自定义S

Python通过模块化开发优化代码的技巧分享

《Python通过模块化开发优化代码的技巧分享》模块化开发就是把代码拆成一个个“零件”,该封装封装,该拆分拆分,下面小编就来和大家简单聊聊python如何用模块化开发进行代码优化吧... 目录什么是模块化开发如何拆分代码改进版:拆分成模块让模块更强大:使用 __init__.py你一定会遇到的问题模www.

Spring Security基于数据库的ABAC属性权限模型实战开发教程

《SpringSecurity基于数据库的ABAC属性权限模型实战开发教程》:本文主要介绍SpringSecurity基于数据库的ABAC属性权限模型实战开发教程,本文给大家介绍的非常详细,对大... 目录1. 前言2. 权限决策依据RBACABAC综合对比3. 数据库表结构说明4. 实战开始5. MyBA

使用Python开发一个简单的本地图片服务器

《使用Python开发一个简单的本地图片服务器》本文介绍了如何结合wxPython构建的图形用户界面GUI和Python内建的Web服务器功能,在本地网络中搭建一个私人的,即开即用的网页相册,文中的示... 目录项目目标核心技术栈代码深度解析完整代码工作流程主要功能与优势潜在改进与思考运行结果总结你是否曾经

Spring Boot + MyBatis Plus 高效开发实战从入门到进阶优化(推荐)

《SpringBoot+MyBatisPlus高效开发实战从入门到进阶优化(推荐)》本文将详细介绍SpringBoot+MyBatisPlus的完整开发流程,并深入剖析分页查询、批量操作、动... 目录Spring Boot + MyBATis Plus 高效开发实战:从入门到进阶优化1. MyBatis

Python基于wxPython和FFmpeg开发一个视频标签工具

《Python基于wxPython和FFmpeg开发一个视频标签工具》在当今数字媒体时代,视频内容的管理和标记变得越来越重要,无论是研究人员需要对实验视频进行时间点标记,还是个人用户希望对家庭视频进行... 目录引言1. 应用概述2. 技术栈分析2.1 核心库和模块2.2 wxpython作为GUI选择的优

idea中创建新类时自动添加注释的实现

《idea中创建新类时自动添加注释的实现》在每次使用idea创建一个新类时,过了一段时间发现看不懂这个类是用来干嘛的,为了解决这个问题,我们可以设置在创建一个新类时自动添加注释,帮助我们理解这个类的用... 目录前言:详细操作:步骤一:点击上方的 文件(File),点击&nbmyHIgsp;设置(Setti