网站改版原因,广州市城乡住房建设厅网站,上海培训机构整顿,免费logo在线生成器文章目录页面IDE展示#xff1a;要求#xff1a;安装好Node.jsreactjs组件化开发页面IDE展示#xff1a; 要求#xff1a;
希望能够达到eclipse辅助编程的功能 关键字提醒#xff0c;高亮 1#xff0c; 有类似C语言的语法结构 2#xff0c; 支持变量绑定 3#xff0c;…
文章目录页面IDE展示要求安装好Node.jsreactjs组件化开发页面IDE展示 要求
希望能够达到eclipse辅助编程的功能 关键字提醒高亮 1 有类似C语言的语法结构 2 支持变量绑定 3 支持整形和布尔型数据类型 4 支持算术表达式的解析 5 一级类定义(first-class)和高阶函数(higher order functions) 6, 支持闭包这点像javascript 7, 支持字符串数据类型 8支持数组型数据类型 9 支持哈希表型数据类型
安装好Node.js
npm install --global create-react-appcreate-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 headerMonkey Compiler bsStylesuccessbootstrap.FormGroupbootstrap.FormControl componentClass textarea style{textAreaStyle}placeholderEnter your code //bootstrap.FormGroupbootstrap.Button bsStyledangerLexing/bootstrap.Button
/bootstrap.Panel由于我们使用到了boostrap控件库因此需要从外部引用相关的css样式文件回到根目录进入public目录打开index.html,在其头部添加如下代码
link relstylesheet hrefhttps://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css
