[Day18] - 在 React 中引用现成的 Web Component

当我们拿到一个现有的 Web Component 时 , 如何在 React 专案中引用呢 ?

利用 [create]-react-app](https://github.com/facebook/create-react-app) 建立一个新专案

$ npx create-react-app my-app

在 src/index.jsx 中引入要使用的 Web Component ( word-count.js )

// src/index.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

+ // 只需要做全域 import , 之後你就可以使用定义的 custom element  
+ import './word-count.js';

ReactDOM.render(
  <React.StrictMode>
    <App/>
  </React.StrictMode>,
  document.getElementById('root')
);

在专案中使用 custom element <word-count>

// src/App.jsx
import './App.css';

function App() {
  return (
    <div className="container">
      <word-count limit="100">
        <h3>个人自介</h3>
        <textarea className="needcount" rows="10" placeholder="请输入您的个人描述...">
    </textarea>
      </word-count>
    </div>
  );
}

export default App;

利用 npm run start 查看引入成果

$ npm run build

成果

参考资料

• youtube - Live Character Counter using CSS & Javascript | Mini Project
• React 官方文件 - Web Components