鐢ㄨ繃React鐨勫悓瀛﹂兘鐭ラ亾锛孯eact浣滀负涓€涓鍥惧簱锛屽湪鍋歸eb寮€鍙戠殑鏃跺€欓渶瑕佸畨瑁呬袱涓ā鍧椼€俷pminstallreact--savenpminstallreact-dom--savereact妯″潡涓昏鎻愪緵缁勪欢鐢熷懡鍛ㄦ湡銆佽櫄鎷烡OMDiff銆丠ooks绛夎兘鍔涳紝浠ュ強灏咼SX杞负铏氭嫙DOM鐨刪鏂规硶銆傝€宺eact-dom涓昏鏆撮湶浜嗕竴涓猺ender鏂规硶锛屽皢铏氭嫙DOM杞寲涓虹湡瀹濪OM銆俰mportReactfrom'react'importReactDOMfrom'react-dom'/*importReactDOMfrom'react-dom/server'//鏈嶅姟娓叉煋*/classHelloextendsReact.component{render(){return
Hello,world!
,}}ReactDOM.render(
,document.getElementById('root'))濡傛灉鎴戜滑鐢╮eact-native鏇挎崲react-dom锛屾垜浠彲浠ュ皢铏氭嫙DOM杞崲涓篈ndroid鎴杋OS鍘熺敓缁勪欢銆傛垜鍦ㄤ箣鍓嶇殑鏂囩珷涓粙缁嶈繃锛岃櫄鎷烡OM鏈€澶х殑浼樺娍涓嶅湪浜庡畠鐨凞iff绠楁硶锛岃€屾槸灏咼SX杞寲涓虹粺涓€鐨凞SL锛岄€氳繃鍏舵娊璞¤兘鍔涘疄鐜拌法骞冲彴鑳藉姏銆傞櫎浜嗗畼鏂圭殑react-dom鍜宺eact-native锛屽畠鐢氳嚦鍙互娓叉煋鍒板懡浠よ锛岃繖涔熸槸鎴戜滑浠婂ぉ浠嬬粛鐨刬nk銆傪煍梟pmink锛歨ttps://www.npmjs.com/package...ink鍐呴儴浣跨敤浜唝oga锛岃繖鏄痜acebook鍩轰簬C++寮€鍙戠殑璺ㄥ钩鍙版覆鏌撳紩鎿庯紝鏀寔Flex甯冨眬锛岄潪甯稿己澶с€傛澶栵紝ReactNative鍦ㄥ唴閮ㄤ娇鐢ㄨ繖涓紩鎿庛€傚垵濮嬪寲杩欓噷鏄畼鏂规彁渚涚殑涓€涓剼鎵嬫灦锛屾垜浠彲浠ラ€氳繃瀹冪洿鎺ュ垱寤轰竴涓」鐩€?mkdirink-app$cdink-app$npxcreate-ink-app濡傛灉鎯充娇鐢═ypeScript缂栧啓椤圭洰锛屼篃鍙互浣跨敤濡備笅鍛戒护锛?npxcreate-ink-app--typescript鐢熸垚鐨勪唬鐮佷负濡備笅锛?/src/cli.js#!/usr/bin/envnodeconstink=require('ink')constmeow=require('meow')constReact=require('react')constimportJsx=require('import-jsx')constui=importJsx('./ui')constcli=meow(`鐢ㄦ硶$ink-cli閫夐」--name浣犵殑鍚嶅瓧`)ink.render(React.createElement(ui,cli.flags))//src/ui.jsconstApp=(props)=>(
浣犲ソ锛?Textcolor="green">{props.name||'UserName'})妯″潡銆傚嚭鍙?搴旂敤绋嬪簭锛涢櫎浜咺nk鍜孯eact锛岃剼鎵嬫灦椤圭洰杩樺紩鍏ヤ簡meow鍜宨mport-jsx涓や釜搴撱€俶eow鐨勪富瑕佷綔鐢ㄦ槸鍦ㄨ繍琛屽懡浠ゆ椂瑙ｆ瀽鍙傛暟锛屽苟灏嗚В鏋愬悗鐨勫弬鏁版斁鍏lags灞炴€т腑銆傚叾鍔熻兘涓巠args銆乧ommander鐩稿悓锛屾槸鏋勫缓CLI宸ュ叿鐨勫繀澶囧伐鍏枫€俢onstmeow=require('meow')//浼犲叆鐨勫瓧绗︿覆浣滀负甯姪淇℃伅銆俢onstcli=meow(`Options--nameYourname--ageYourage`)console.log('flags:',cli.flags)import-jsx鐨勫彟涓€涓富瑕佷綔鐢ㄦ槸灏唈sx瀛楃涓茶浆涓篶reateElement鏂规硶褰㈠紡.//ui.jsconstcomponent=(props)=>(
Hello,{props.name||'UserName'})//cli.jsconstimportJsx=require('import-jsx')constui=importJsx('./ui')console.log(ui.toString())//杈撳嚭杞崲缁撴灉//杞崲缁撴灉锛歱rops=>/*#__PURE__*/React.createElement(Text,null,"Hello,",/*#__PURE__*/React.createElement(Text,{color:"green"},props.name||'UserName'))杩欎竴姝ユ甯告槸鐢眀abel瀹屾垚銆傚鏋滄垜浠笉閫氳繃babel瀵筳sx杩涜杞箟锛屼娇鐢╥mport-jsx鐩稿綋浜庤繍琛屾椂杞箟锛屼細闄嶄綆鎬ц兘銆備絾鏄湪CLI椤圭洰涓紝瀵规€ц兘鐨勮姹傚苟娌℃湁閭ｄ箞楂樸€傝繖鏍峰彲浠ユ洿蹇湴鏋勫缓椤圭洰銆傚唴缃粍浠剁敱浜庢槸闈炴祻瑙堝櫒杩愯鐜锛宨nk鍜宺eact-native涓€鏍凤紝鎻愪緵浜嗕竴浜涘唴缃粍浠剁敤浜庢覆鏌撶粓绔腑鐨勭壒瀹氬厓绱犮€俓
缁勪欢鐢ㄤ簬鍦ㄧ粓绔覆鏌撴枃鏈紝鍙互涓烘枃鏈寚瀹氱壒瀹氱殑棰滆壊銆佺矖浣撱€佹枩浣撱€佷笅鍒掔嚎銆佸垹闄ょ嚎绛夈€侱EMO://ui.jsconstReact=require('react')const{Text}=require('ink')moudle.exports=()=>(<>鎴戞槸text鎴戞槸绮椾綋鎴戞槸鏂滀綋鎴戞槸涓嬪垝绾?/Text>鎴戞槸鍒犻櫎绾?/Text>鎴戞槸缁胯壊鐨?/Text>鎴戞槸鐏拌壊鐨勮摑鑹?/Text>/>)//cli.jsconstReact=require('react')constimportJsx=require('import-jsx')const{render}=require('ink')constui=importJsx('./ui')render(React.createElement(ui))涓昏浣滅敤鏄缃覆鏌撳埌鐨勬枃鏈牱寮弔erminal锛屾湁鐐圭被浼间簬HTML涓殑鏍囩銆傞櫎浜嗚繖涓父瑙佺殑涓嶩TML鐩稿叧鐨勬枃鏈睘鎬у锛屽畠杩樻敮鎸佷竴涓壒娈婄殑wrap灞炴€э紝鐢ㄤ簬鎴柇婧㈠嚭鐨勬枃鏈€傚綋闀挎枃鏈秴杩囩粓绔殑闀垮害鏃讹紝浼氶粯璁ゆ崲琛屻€?Text>loooooooooooooooooooooooooooooooooooooooongtext濡傛灉鍔犱笂wrap灞炴€э紝閭ｄ箞闀跨殑鏂囨湰浼氳鎴柇銆?Textwrap="truncate">loooooooooooooooooooooooooooooooooooooongtext闄や簡浠庢湯灏炬埅鏂枃鏈锛岃繕鏀寔浠庢枃鏈腑闂村拰寮€澶存埅鏂€?Textwrap="truncate">loooooooooooooooooooooooooooooooooooooongtextloooooooooooooooooooooooooooooooooooooongtextloooooooooooooooooooooooooooooooooooooongtext\缁勪欢鐢ㄤ簬甯冨眬銆傞櫎浜嗘敮鎸佺被浼糃SS鐨刴argin銆乸adding銆乥order灞炴€у锛岃繕鍙互鏀寔flex甯冨眬銆?Box>鍙互鐞嗚В涓篐TML涓缃簡flex甯冨眬鐨刣iv()銆傛帴涓嬫潵鎴戜滑鍏堣缃竴涓?Box>缁勪欢鐨勯珮搴︿负10锛岀劧鍚庝富杞存柟鍚戝榻愪袱绔殑鍏冪礌锛屾í杞存柟鍚戝榻愬簳閮ㄧ殑鍏冪礌銆傜劧鍚庝负鍐呴儴鐨勪袱涓?Box>缁勪欢璁剧疆涓嶅悓鏍峰紡鐨勫～鍏呭拰杈规銆俢onstApp=()=>浣犲ソWorld鏈€缁堟晥鏋滃涓嬶細special灞炴€ф槸杈规鐨勬牱寮忥細borderStyle锛屼笌CSS鎻愪緵鐨勮竟妗嗘牱寮忔湁鐐瑰尯鍒€?BoxborderStyle="single">鍗?/Text>鍙?/Text>roundboldsingleDoubledoubleSingleclassic鍏朵粬灞炴€у拰鍘熺敓鐨凜SS鍩烘湰鐩稿悓锛屽叿浣撳彲浠ュ弬鑰冨叾鏂囨。锛氿煍梚nk#Box:https://www.npmjs.com/package/ink#box\缁勪欢鐩稿綋浜庣洿鎺ユ坊鍔犵粓绔痭瀛楃涓殑涓€涓猏锛岀敤浜庢崲琛岋紙PS锛氬彧鏀寔鍏冪礌涔嬮棿锛夛紱constApp=()=>(<>HelloWorld/>)constApp=()=>(<>Hello<鎹㈣/>涓栫晫</>)\缁勪欢鐢ㄤ簬鍒嗛殧涓や釜鍏冪礌銆備娇鐢ㄥ悗锛岄棿闅旂殑涓や釜鍏冪礌灏嗛棿闅斿埌缁堢鐨勪袱渚с€傛晥鏋滄湁鐐圭被浼间簬flex甯冨眬涓ょ瀵归綈(justify-content:space-between;)constApp1=()=>Left瀵?/Text>;constApp2=()=>LeftRight;涓婇潰涓ゆ浠ｇ爜鐨勮〃鐜板舰寮忔槸涓€鏍风殑锛氬唴缃殑Hooksink鎻愪緵浜嗕竴浜涘竷灞€缁勪欢锛屼篃鎻愪緵浜嗕竴浜汬ooksuseInput锛屽彲浠ョ敤鏉ョ洃鍚敤鎴风殑杈撳叆銆倁seInput鎺ュ彈鍥炶皟鍑芥暟銆傜敤鎴锋瘡娆℃寜涓嬮敭鐩樻寜閿紝閮戒細璋冪敤useInput浼犲叆鐨勫洖璋冿紝浼犲叆涓や釜鍙傛暟銆倁seInput((input:string,key:Object)=>void)绗竴涓弬鏁帮細input锛岃〃绀哄搴斾簬鎸変笅鐨勬寜閽殑瀛楃銆傜浜屼釜鍙傛暟锛歬ey锛屾槸瀵瑰簲鎸変笅鐨勪竴浜涘姛鑳介敭鐨勫璞°€傚鏋滀綘鎸変笅鍥炶溅锛宬ey.return=true;濡傛灉浣犳寜涓嬪垹闄ら敭锛宬ey.delete=true;濡傛灉浣犳寜涓媏sc閿紝key.escape=true;鍏蜂綋鏀寔鐨勫姛鑳介敭鍙互鍙傝€冨畼鏂规枃妗ｏ細馃敆ink#useInput:https://www.npmjs.com/package/ink#useinputinputhandler-options涓嬮潰鐢ㄤ竴涓狣EMO鏉ュ睍绀哄畠鐨勫叿浣撶敤娉曪紝璁板綍涓嬫墍鏈夌敤鎴峰湪缁堢涓婄殑杈撳嚭銆傚鏋滄寜涓嬪垹闄ら敭锛屽垯浼氬垹闄ゆ渶杩戣褰曠殑涓€涓瓧绗︺€俢onstReact=require('react')const{useInput,Text}=require('ink')const{useState}=Reactmodule.exports=()=>{const[char,setChar]=useState('')useInput((input,key)=>{if(key.delete){//鎸夊垹闄ら敭鍒犻櫎涓€涓瓧绗etChar(char.slice(0,-1))return}//杩藉姞鏈€鍚庢寜涓嬬殑瀛楃setChar(char+input)})returninputchar:{char}}useApp鍏紑浜嗕竴涓€€鍑烘柟娉曟潵閫€鍑虹粓绔€俢onstReact=require('react')const{useApp}=require('ink')const{useEffect}=ReactconstApp=()=>{const{exit}=useApp()//3绉掑悗閫€鍑虹粓绔痷seEffect(()=>{setTimeout(()=>{exit();},3000);},[]);return3s鍚庨€€鍑虹粓绔?..}useStdin鐢ㄤ簬鑾峰彇鍛戒护琛岀殑杈撳叆娴併€備笅闈㈡槸涓€涓ā鎷熺敤鎴风櫥褰曠殑绠€鍗曟渚嬨€俢onstReact=require('react')const{useStdin}=require('ink')const{useState,useEffect}=Reactmodule.exports=()=>{const[pwd,setPwd]=useState('')const{stdin}=useStdin()useEffect(()=>{//璁剧疆瀵嗙爜鍚庯紝鍋滄杈撳叆if(pwd)stdin.pause()},[pwd])stdin.on('data',(data)=>{//鎻愬彇鏁版嵁骞跺皢鍏惰缃负pwd鍙橀噺constvalue=data.toString().trim()setPwd(value)})//褰損wd涓虹┖鏃讹紝鎻愮ず鐢ㄦ埛杈撳叆瀵嗙爜if(!pwd){return瀵嗙爜锛?/Text>}returnpwd==='hk01810'?鐧诲綍鎴愬姛:鏈夊唴骞曪紝缁堟浜ゆ槗}useStdout鐢ㄤ簬鑾峰彇鍛戒护琛岀殑杈撳嚭娴併€傚畠灏嗘毚闇瞫tdout鐨勫啓娴侊紝鍚屾椂鏆撮湶缁堢杈撳叆鐨剋rite鏂规硶銆俢onstReact=require('react')const{useStdout}=require('ink')const{useEffect}=Reactmodule.exports=()=>{const{write}=useStdout()useEffect(()=>{//鍐欏叆缁堢write('HellofromInktostdout')},[])returnnull}绗笁鏂圭粍浠堕櫎浜嗚繖浜涘唴缃殑缁勪欢鍜孒ooks锛岃繕鏈変赴瀵岀殑绗笁鏂圭敓鎬併€備緥濡傦細鍔犺浇缁勪欢銆佽秴閾炬帴缁勪欢銆佽〃鏍肩粍浠躲€侀珮浜粍浠躲€佸閫夌粍浠躲€佸浘鐗囩粍浠垛€︹€︷煍梚nk#绗笁鏂圭粍浠讹細https://www.npmjs.com/package/ink#useful-componentsink-spinnerink-linkink-tableink-syntax-highlightink-muti-select璋冭瘯宸ュ叿ink灞炰簬React鐢熸€侊紝澶╃劧鏀寔React瀹樻柟鎻愪緵鐨勮皟璇曞伐鍏稲eactDevtools銆?npminstallreact-devtools#瀹夎璋冭瘯宸ュ叿$npxreact-devtools#鍚姩璋冭瘯宸ュ叿鐒跺悗鍦ㄥ惎鍔ㄥ簲鐢ㄧ殑鏃跺€欙紝璁剧疆鍓嶉潰鐨凞EV鍏ㄥ眬鍙橀噺銆傝繍琛孌EV=truenodesrc/cli鍚庣殑鏁堟灉濡備笅锛氱患涓婃墍杩帮紝React纭疄鏄鍥惧紑鍙戠殑鍒╁櫒锛屽啀鍔犱笂Hooks鐨勫姞鎸侊紝鍏舵娊璞¤兘鍔涜繘涓€姝ユ彁鍗囷紝缁熶竴DSL鍔犺櫄鎷烡OM锛岄『鐞嗘垚绔犱篃灏辨槸璇达紝瀹冨彲浠ュ湪浠讳綍骞冲彴涓婂憟鐜般€傜敋鑷筹紝寰蒋瀹樻柟缁橶indows寮€鍙戜簡涓€涓猂eactNative锛屽叧閿槸杩欎釜涓滆タ涓嶄粎鍙互寮€鍙慦indows妗岄潰杞欢锛岃繕鍙互寮€鍙慚ac妗岄潰杞欢銆傛湁鐐硅窇棰樹簡锛屼絾鏄洖鍒癷nk锛屽ぇ瀹剁啛鐭ョ殑Gatsby鍛戒护琛屽伐鍏蜂篃鏄€氳繃ink寮€鍙戠殑銆傚鏋滀互鍚庢湁鏈湴鐨凜LI宸ュ叿鍙互瀹炵幇鐨勮瘽锛屽彲浠ヨ€冭檻杩欎釜宸ュ叿锛岃嚦灏戜笉鐢ㄦ媴蹇冨懡浠よ鎬庝箞瀵归綈鏂囨湰銆?/p>
