當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

Introduction-to-React-JS -- 2 Helloworld

發(fā)布時間：2023/12/15 javascript 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 Introduction-to-React-JS -- 2 Helloworld 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

配置ReactJS到Helloworld

React 它本身并不能完成所有的事情，它只能解決一些視圖上的問題，你仍然需要一些東西去幫助它完成事情。

安裝 React JS

執(zhí)行命令
npm install react --save
沒啥好講的，接下來就可以在你的代碼中使用 React JS 了。

在代碼中使用 ReactJS

component.jsx

import React from 'react';export default class Hello extends React.Component {render() {return <h1>Hello world</h1>;} }

main.js

import React from 'react'; import Hello from './component';main();function main() {React.render(<Hello />, document.getElementById('app')); }

在頁面index.html中，使用了webpack。
build/index.html

<!DOCTYPE html> <html><head><meta charset="UTF-8"/></head><body><div id="app"></div><script src="http://localhost:8080/webpack-dev-server.js"></script><script src="bundle.js"></script></body> </html>

轉換 JSX

為了能夠使用 JSX 語法，你需要用 Webpack 來轉碼你的 JavaScript，這是加載器的工作，我們可以使用一個很好用也有很多功能的 Babel。

npm install babel-loader --save-dev

現(xiàn)在我們需要去配置 Webpack 來使用加載器。

webpack.config.js

Webpack 會在你的項目中測試所有路徑，如果我們項目中使用 ES6 模塊加載器語法，比如
import MyComponent from './Component.jsx';
這是會去匹配 ‘./Component.jsx’。

在命令行中運行 npm run dev，然后刷新頁面就可以看到修改。

優(yōu)化bundle處理

你可能注意到在引入 React JS 到你的項目之后，給你的應用重新合并會花費太多的時間。在開發(fā)環(huán)境中，最理想的是編譯最多 200 到 800 毫秒的速度，取決于你在開發(fā)的應用。

在開發(fā)環(huán)境中使用壓縮文件

為了不讓 Webpack 去遍歷 React JS 及其依賴，你可以在開發(fā)中重寫它的行為。

webpack.config.js

我們在配置中做了兩件事：

不管 “React” 是什么時候在代碼中引入的，它會去匹配壓縮后的 React JS 文件取代去 node_modules 中遍歷，這是第3行配置的路徑以及config內的配置。
不管 Webpack 什么時候試圖是解析minified文件，我們阻止它，告訴它那不是必須的。

可以到優(yōu)化開發(fā) 看到更多這方面的信息。

總結

以上是生活随笔為你收集整理的Introduction-to-React-JS -- 2 Helloworld的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇： docker daemon是什么意思(d
下一篇： navicat和sqlyog的区别