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

2、推薦使用的專案結構

二、目錄結構與各檔案功能

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

效果如下：