react的初始專案搭建

2022-08-28 14:15:33 字數 1817 閱讀 9366

使用腳手架初始化專案

進入到專案根目錄 使用 npm start

介紹與使用

特性適用場景

快速上手

使用import from 'antd-mobile';

// 匯入樣式 在index.js 中匯入元件樣式

import 'antd-mobile/dist/antd-mobile.css'; // or 'antd-mobile/dist/antd-mobile.less'

reactdom.render(start, mountnode);

使用步驟拷貝tabbar元件結構

修改tabbar元件樣式

...

}

selectedicon=

...>

}selectedicon=

...>

}selectedicon=

...>

}selectedicon={}

...>

調整tabbar的位置,固定在最底部

去掉tabbar的徽章

tabbar配合路由實現

);

this.props.history.push('/home/index')

}}>

); this.props.history.push('/home/list')

}}>

); this.props.history.push('/home/news')

}}>

); this.props.history.push('/home/profile')

}}>

state =

);

this.props.history.push('/home/index')

}}...

>

);this.props.history.push('/home/list')

}}...

>

);this.props.history.push('/home/news')

}}...

>

);this.props.history.push('/home/profile')

}}...

>

tabbar**的重構

宣告一下資料來源

const tabitems = [,,,

]

封裝乙個函式來遍歷渲染

rendertabbaritem() 

selectedicon=

selected=

onpress=);

this.props.history.push(item.path)

}}>)})

}

在render方法中呼叫即可

render() 

)}

}>

搭建簡單的React專案

react學習介紹 學習了幾個星期的react,想稍微整合一下知識,所以寫了這篇博文,以搭建乙個基礎的react的專案為線索整合學到的知識,具體很多的細節不深究。以及由於還是小白乙個,可能我所提供的步驟不是最好的解決方案,甚至繁瑣,但一步步操作是能夠建立乙個簡單react專案的。對於初窺react比...

如何搭建react專案

搭建react環境 跳轉到專案目錄下 執行專案 npm start專案的一些執行方式等。npm start 啟動開發伺服器。starts the development server.啟動開發伺服器。npm run build 專案打包 npm test npm試驗 starts the test ...

1 搭建React專案

檢查版本 node v 安裝cnpm npm install g cnpm registry 檢查cnpm cnpm v 安裝yarn cnpm install g yarn 或者 npm install g yarn 檢查yarn yarn v node v 首先找到專案要建立的目錄,建立專案 c...