React - Introduction
A JavaScript library for building user interfaces. React 在 MVC 分類上屬於 View，也就是主要用來開發前端。比起直接使用 npx create-react-app，我這裡想紀錄一些較簡單且原始的 React Sample Code。- 原本既有的程式碼
<!-- Some HTML --> <div id="mydiv"></div> <!-- Some HTML --> - 導入 React library
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script> - React Code
<script type="text/javascript"> class HelloWorld extends React.Component { render() { return React.createElement('h1', {}, 'Hello React'); } } const domContainer = document.querySelector('#mydiv'); ReactDOM.render(React.createElement(HelloWorld), domContainer); </script> - Result
<div id="mydiv"> <h1>Hello React</h1> </div>
React - JSX ver
現今 React 大多都會用 JSX 語法，較為便捷直觀。這裡附上上面純 React 跟 React ＆ JSX 的 Sample Code。 <!DOCTYPE html>
<html>
<!--這兩個 script 讓我們可以在 JavaScripts 寫 React Code -->
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<!--這個 script 讓我們可以使用 JSX 和 ES6，即使瀏覽器較舊 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<body>
<div id="mydiv"></div>
<div id="mydiv_JSX_ver"></div>
<!-- 純 React ( 不用 JSX ) -->
<script type="text/javascript">
class HelloWorld extends React.Component {
render() {
return React.createElement('h1', {}, 'Hello React');
}
}
const domContainer = document.querySelector('#mydiv');
ReactDOM.render(React.createElement(HelloWorld), domContainer);
</script>
<!-- JSX 版本 -->
<script type="text/babel">
class Hello extends React.Component {
render() {
return <h1>Hello React with JSX!</h1>
}
}
ReactDOM.render(<Hello />, document.querySelector('#mydiv_JSX_ver'))
</script>
</body>
</html>參考資料 :
1. React 官網
0 意見:
張貼留言