日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

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

编程问答

react入门--------安装react

發布時間：2024/4/15 编程问答 29 豆豆
生活随笔 收集整理的這篇文章主要介紹了 react入门--------安装react 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

創建一個單頁面應用

Create React App是開始構建新的React單頁應用程序的最佳方式。 它可以幫助您快速集成您的開發環境，以便您可以使用最新的JavaScript功能，它提供了一個很好的開發體驗，并可以有效優化您的應用程序,提升開發效率。

$ npm install -g create-react-app $ create-react-app hello-world $ cd hello-world $ npm run start
上面只是創建了一個React應用，不需要關心也需要不處理后端邏輯或數據庫;?
它只是一個React的前端環境集成工具,負責創建前端的開發環境，所以你可以使用它與你想要的任何后端進行交互。 它內部使用了webpack，Babel和ESLint，你可以單獨配置它們，來達到定制化的效果。

在已經開發的項目中使用React

您不需要重新編寫應用程序即可開始使用React。
我們建議將React添加到應用程序的一小部分，例如單個小部件，以便您可以看到它是否適合您的用例。
雖然React可以在沒有構建工具的情況下使用，但我們建議使用并設置它，以便提高生產力。 現代構建工具通常包括：

    • 一個包管理器，例如npm

    • 一個打包工具，例如webpack

    • 一個編譯工具，例如Babel

    • 安裝React

      建議使用Yarn或npm來管理React前端模塊的依賴。

      通過Yarn安裝：

      yarn add react react-dom

      通過npm安裝：

      npm install --save react react-dom

    • 使用ES6和JSX

      建議您使用Babel中的React配置讓您在JavaScript代碼中可以使用ES6和JSX。 ES6是一組現代JavaScript特性，使開發更容易，JSX是對React非常有效的JavaScript語言的擴展。

      具體請百度Babel如何在許多不同的構建環境中配置Babel。首先 確保你安裝了babel-preset-react和babel-preset-es2015，并已經在.babelrc配置中啟用它們。

      使用ES6和JSX寫一個HelloWorld的例子

      建議使用像webpack或Browserify這樣的打包工具，以便您可以編寫模塊化代碼，它們可以將不同的代碼模塊打包捆綁到一起，用來優化的代碼加載時間。

      一個簡單的React示例如下所示：

      這里我使用的是bower來安裝react和react-dom。

      mkdir hello-world & cd hello-world bower install react babel --save touch index.html

      然后在index.html中寫入以下內容：

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="bower_components/react/react.js"></script> <script src="bower_components/react/react-dom.js"></script> <script src="bower_components/babel/browser.js"></script> <script type="text/babel"> var doc = document; ReactDOM.render( <h1>你好，react</h1>, doc.getElementById('app') ) </script> <title>ReactDOM.render</title> </head> <body> <div id="app"></div> </body> </html>

      最后在瀏覽器中打開這個頁面，就可以看到最終效果。

?

轉載于:https://www.cnblogs.com/songdongdong/p/7273371.html

總結

以上是生活随笔為你收集整理的react入门--------安装react的全部內容，希望文章能夠幫你解決所遇到的問題。

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