---
title: 代码编辑器
order: 1
---

<!-- prettier-ignore -->
````jsx

import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import ScriptEditor, { LANGUAGES } from '@riil-frontend/component-script-editor';
import { Select } from '@alifd/next';

const ds = LANGUAGES.map((item) => ({ value: item.id, label: item.id }));
const defaultValue = ['function helloWorld() {', '   console.log("Hello world!");', '}'].join('\n');

function App() {
	const [lang, setlang] = useState('javascript');
	const onSelectChange = (value) => {
		console.log('切换语言为', value);
		setlang(value);
	};
	const onChange = (value) => {
		console.log('当前文本为', value);
	};
	return (
		<div style={{ height: '70vh', width: '70vw' }}>
			<div style={{ height: 40 }}>
				<Select dataSource={ds} onChange={onSelectChange} value={lang} />
			</div>
			<div style={{ height: 'calc(100% - 40px)' }}>
				<ScriptEditor language={lang} prevValue={defaultValue} onChange={onChange} />
			</div>
		</div>
	);
}

ReactDOM.render(<App />, mountNode);

````
