P1 用reactjs和bootstrap创建页面IDE

Posted 2022-02-13 Jozky86

文章目录

• • 页面IDE展示：
  • 要求：
  • 安装好Node.js
  • reactjs组件化开发

页面IDE展示：

要求：

希望能够达到eclipse辅助编程的功能
关键字提醒，高亮
1， 有类似C语言的语法结构
2， 支持变量绑定
3， 支持整形和布尔型数据类型
4， 支持算术表达式的解析
5， 一级类定义(first-class)和高阶函数(higher order functions)
6, 支持闭包，这点像javascript
7, 支持字符串数据类型
8，支持数组型数据类型
9， 支持哈希表型数据类型

安装好Node.js

nom install --global create-react-app

create-react-app是通过npm模块发布的一个安装包，通过该工具，我们能快速创建一个node.js项目

npm install --save react-bootstrap

用来安装试用于react框架的bootstrap UI控件库，将使用它来开发我没Monkey编程语言的IDE

create-react-app monkey_compiler

在本地目录创建一个名为monkey_compiler的目录，它是一个可以运行的reactjs项目，因此可以直接修改或者添加

cd monkey_compiler
npm start

命令会启动一个开发模式的服务器，同时会自动调用浏览器打开一个页面
另：构建React-app应用时create-react-app卡住超慢的解决办法
解决方法是换源：

npm config set registry https://registry.npm.taobao.org
-- 配置后可通过下面方式来验证是否成功
npm config get registry
-- 显示出上述地址的话就是更换成功

下的真够慢的。。

reactjs组件化开发

通过乐高式搭积木的方式，逐步开发一个功能丰富的页面IDE出来。通过react组件组成我们想要的东西
总项目目录：

node_modules安装各种组件，react-bootstrap就下载在里面
在monkey-compiler项目中，有一个目录叫src/,该目录用于存放项目的所有代码文件

打开其中的index.js

其中的app就是一个组件

public里面含有的index.html

对其进行修改，修改后为：

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')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
registerServiceWorker();

在MonekyCompilerIDE.js中填写代码：

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();

注：大多数浏览器不支持es6这种编程方式，之所以用类似于面向对象的方式来写的代码浏览器可以执行，是因为react这个框架下面有个小型编译器叫babel，会把es6的js代码编译成es5js代码，这样所有编译器就可以执行。
jsx(javascript extension),
实现与前端的交互

<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>

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

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