當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

单文件快速体验使用react输出hello_world

發布時間：2023/11/29 编程问答 37 豆豆

生活随笔收集整理的這篇文章主要介紹了单文件快速体验使用react输出hello_world 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

看了下react官方的hello world教程, 感覺對新手很不友好.codepen雖然好用, 但是封裝太多東西, 看起來
太抽象. 還是喜歡像學習jQuery那樣, 直接在單文件中引入必要的js文件, 然后直接運行的那種感覺.

如果使用VS Code, 建議安裝Sublime Babel, 來提供對react語法的代碼高亮.

基礎hello-world

直接復制以下代碼, 粘貼自己的編輯器里, 打開即可運行.

<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>Hello World</title><script src="https://unpkg.com/react@15.6.1/dist/react.min.js"></script><script src="https://unpkg.com/react-dom@15.6.1/dist/react-dom.min.js"></script><script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script> </head><body> <div id="root"></div> <script type="text/babel"> // 注意這里 text/babel 不可省ReactDOM.render(<h1>Hello, world!</h1>, // 這是JSX語法document.getElementById('root') // 獲取到root元素);</script> </body> </html>

利用組件帶參數輸出hello-world

react中1個class定義1個組件, 每個組件都有1個render()方法來渲染頁面.

<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>利用組件輸出hello-world</title><script src="https://unpkg.com/react@15.6.1/dist/react.min.js"></script><script src="https://unpkg.com/react-dom@15.6.1/dist/react-dom.min.js"></script><script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"></script> </head><body> <div id="root"></div> <script type="text/babel">class HelloMessage extends React.Component {render() {return <div>Hello {this.props.name}</div>;} }ReactDOM.render(<HelloMessage name="minecraft" />, document.getElementById('root') );</script> </body> </html>

轉載于:https://www.cnblogs.com/asheng2016/p/7481987.html

總結

以上是生活随笔為你收集整理的单文件快速体验使用react输出hello_world的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。