web端三大框架react、vue和angular，下面是對react.js的一些總結。

一、環境搭建

1、npm搭建項目

推薦使用npm搭建項目環境，如果網速過慢，可是使用cnpm進行項目的搭建（cnpm是淘寶的npm鏡像，與npm有些差異，有些模塊無法下載或無法正常使用）。

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

• 1
• 2
• 3
• 4

打開瀏覽器，輸入http://localhost:3000可以看到系統默認生成的頁面了。?

2、推薦使用的項目結構

https://git.coding.net/yibingCoding/ReactLearn.git?
可以通過git clone方式下載項目結構。

二、目錄結構與各文件功能

1、目錄結構

?
1、index.html文件為項目的總入口，CDN引入的資源可以放在此文件中。?
2、package.json文件是模塊功能配置，使用npm install可生成node_modules文件夾，所有模塊功能所需要的資源都存儲在這個文件夾中。?
3、routes.js文件是路由配置文件，路由功能是三大前端框架的特色（具體用法下面會詳細說）。?
4、Home.js文件是項目結構初始化放上去的界面。

三、react.js的第一個dome

在Home.js中編寫代碼，代碼如下：

import React,{ Component } from 'react' import demo1Image from '../../image/demo1Image.jpg'; class Home extends Component { render() { return ( <div style={{backgroundColor:"#0ff",fontSize:"20px",color:"#00f"}}> 這是第一個demo <img src={demo1Image} style={{width:"300px",height:"300px"}} alt=""/> </div> ) } } export default Home

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13

效果如下：?

轉載于:https://www.cnblogs.com/xukun588/p/9458667.html

總結

以上是生活随笔為你收集整理的react.js从入门到精通（一）的全部內容，希望文章能夠幫你解決所遇到的問題。

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