當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

七十五、React环境搭建，目录文件分析和JSX

發(fā)布時(shí)間：2024/10/8 javascript 25 豆豆

生活随笔收集整理的這篇文章主要介紹了七十五、React环境搭建，目录文件分析和JSX 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

2020/11/18、周三、今天又是奮斗的一天。

@Author：Runsen

React

React是Facebook 2013年推出的函數(shù)式編程開源前端框架，和Vue就是兩個(gè)巨頭。我得趕緊搞定React。

React環(huán)境搭建

引用js

可以通過引入.js文件來使用React，下面是React中的HelloWorld代碼。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title>  <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>  <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>  <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script> </head> <body><div id="example"></div> <script type="text/babel"> ReactDOM.render(<h1>Hello, world!</h1>,document.getElementById('example') ); </script></body> </html>

除了引用.js文件，還可以通過npm下載

// 下載方式：react核心包： npm i react --save // react-dom: npm i react-dom --save // babel: npm i babel-standalone --save

腳手架工具搭建

但更多的時(shí)候通過腳手架工具來搭建—Create-react-app。

前提node和npm安裝好。

$ cnpm install -g create-react-app $ create-react-app my-app $ cd my-app/ $ npm start

訪問3000端口，即可看見畫面，Vue的是8080端口。

目錄結(jié)構(gòu)

node_modules：這里面包含了react項(xiàng)目中會(huì)用到的一些組件。
src：里面包含了一些我們自己使用的js文件，css文件，img文件等等
manifest.json：清單配置文件，聲明了項(xiàng)目的名稱圖標(biāo)以及入口
package.json: 包的清單文件，這里面聲明的包會(huì)通過npm下載到node_modules中

React 使用 JSX 來替代常規(guī)的 JavaScript。Jsx全稱: javascript and XML

Jsx定義: 可拓展(自定義)標(biāo)記性語言,基于javascript,融入了XML,我們可以在js中書寫xml,使用JSX可以很好的描述UI在頁面中應(yīng)該呈現(xiàn)它應(yīng)有的交互形式

請(qǐng)一鍵三連！！！！！

與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的七十五、React环境搭建，目录文件分析和JSX的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：芒果钱包怎么解绑卡号
下一篇：七十六、React中的TodoList和