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

相关文章

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

Hadoop企业开发案例调优场景

需求 (1)需求:从1G数据中,统计每个单词出现次数。服务器3台,每台配置4G内存,4核CPU,4线程。 (2)需求分析: 1G / 128m = 8个MapTask;1个ReduceTask;1个mrAppMaster 平均每个节点运行10个 / 3台 ≈ 3个任务(4    3    3) HDFS参数调优 (1)修改:hadoop-env.sh export HDFS_NAMENOD

嵌入式QT开发:构建高效智能的嵌入式系统

摘要: 本文深入探讨了嵌入式 QT 相关的各个方面。从 QT 框架的基础架构和核心概念出发,详细阐述了其在嵌入式环境中的优势与特点。文中分析了嵌入式 QT 的开发环境搭建过程,包括交叉编译工具链的配置等关键步骤。进一步探讨了嵌入式 QT 的界面设计与开发,涵盖了从基本控件的使用到复杂界面布局的构建。同时也深入研究了信号与槽机制在嵌入式系统中的应用,以及嵌入式 QT 与硬件设备的交互,包括输入输出设

OpenHarmony鸿蒙开发( Beta5.0)无感配网详解

1、简介 无感配网是指在设备联网过程中无需输入热点相关账号信息,即可快速实现设备配网,是一种兼顾高效性、可靠性和安全性的配网方式。 2、配网原理 2.1 通信原理 手机和智能设备之间的信息传递,利用特有的NAN协议实现。利用手机和智能设备之间的WiFi 感知订阅、发布能力,实现了数字管家应用和设备之间的发现。在完成设备间的认证和响应后,即可发送相关配网数据。同时还支持与常规Sof

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件: 2.调用utility bar api的方式有两种: 方法一,通过lwc调用: import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca

活用c4d官方开发文档查询代码

当你问AI助手比如豆包,如何用python禁止掉xpresso标签时候,它会提示到 这时候要用到两个东西。https://developers.maxon.net/论坛搜索和开发文档 比如这里我就在官方找到正确的id描述 然后我就把参数标签换过来

【Python编程】Linux创建虚拟环境并配置与notebook相连接

1.创建 使用 venv 创建虚拟环境。例如,在当前目录下创建一个名为 myenv 的虚拟环境: python3 -m venv myenv 2.激活 激活虚拟环境使其成为当前终端会话的活动环境。运行: source myenv/bin/activate 3.与notebook连接 在虚拟环境中,使用 pip 安装 Jupyter 和 ipykernel: pip instal

在cscode中通过maven创建java项目

在cscode中创建java项目 可以通过博客完成maven的导入 建立maven项目 使用快捷键 Ctrl + Shift + P 建立一个 Maven 项目 1 Ctrl + Shift + P 打开输入框2 输入 "> java create"3 选择 maven4 选择 No Archetype5 输入 域名6 输入项目名称7 建立一个文件目录存放项目,文件名一般为项目名8 确定

Java 创建图形用户界面(GUI)入门指南(Swing库 JFrame 类)概述

概述 基本概念 Java Swing 的架构 Java Swing 是一个为 Java 设计的 GUI 工具包,是 JAVA 基础类的一部分,基于 Java AWT 构建,提供了一系列轻量级、可定制的图形用户界面(GUI)组件。 与 AWT 相比,Swing 提供了许多比 AWT 更好的屏幕显示元素,更加灵活和可定制,具有更好的跨平台性能。 组件和容器 Java Swing 提供了许多

Linux_kernel驱动开发11

一、改回nfs方式挂载根文件系统         在产品将要上线之前,需要制作不同类型格式的根文件系统         在产品研发阶段,我们还是需要使用nfs的方式挂载根文件系统         优点:可以直接在上位机中修改文件系统内容,延长EMMC的寿命         【1】重启上位机nfs服务         sudo service nfs-kernel-server resta