最近在学习React，为了在学习的同时巩固一下所学内容，决定仿一个《快看漫画》的网页；由于学习进度及时间问题，我只实现了网站的部分功能：登录与退出、对应漫画关注/取关、关键词搜索等。

项目写了一个星期，写的时候觉着自己写了好多呀；写完之后就发现怎么才这么点。。。但是就这么一点点我也厚着脸皮写文章了，希望能给新手起到参考作用；同时虚心向各路大佬请教。

——by不会写文章的前端小白

1.  技术栈与组件库

2.  目录列表

├── ...                                     
├── ...                                     
├── ...                                         
├── public                                  
│   ├── api                         // 模拟数据存放目录
├── src                             // 开发目录
│   ├── common                      // 公共组件
│   ├── pages                       // 页面
│   │   ├── detail                  // 详情页   
│   │   ├── home                    // 首页
│   │   ├── login                   // 登录页
│   ├── statics                     // 静态图片资源  
│   ├── store                       // 总存储仓库目录            
├──  App.js         
├──  index.js
├──  style.js                       // 样式文件
├── ...
├── ...
├── ...
3.  功能介绍
'登录/退出' 功能:
       通过设置登录状态(true or false)来判断是否登录，同时通过ref属性取到用户名，传给User组件将用户名渲染到页面。
'关注/取消关注' 功能：
       点击关注时获取相应漫画id并集合成数组；点击取消关注时获取当前项漫画id，通过indexOf找到对应id后dispatch出漫画信息，再将对应漫画项移除。
部分代码：
    对应漫画'关注/取消关注'按钮显示：

    //this.followItem获取当前已关注列表，this.list.id为当前项漫画id
    isLogin && this.checkFollowed(this.followItem, this.list.id) ? 
    <Follow 
        className="btn other" 
        onClick={() => cancleFollowed(this.list.id, this.followItem)}
    </Follow> :
    <Follow 
        className="btn other"
        onClick={() => followCartoon(this.props.list, this.list.id, isLogin)}
    </Follow>
    ----------------------------------------------------------------------
checkFollowed(newList, id)  {
    const arr = [];
    for(let i = 0; i < newList.length; i ++) {
        // 集合已关注漫画项id
        arr.push(newList[i].id)
    // 若当前项漫画id存在于id集合中  返回true 显示'取消关注'
    if(arr.indexOf(id) >= 0) return true;
 点击'取消关注'移除对应漫画项：
// 派发action，传入当前项漫画id及'已关注'漫画数组
cancleFollowed(id, list) {
    dispatch(actionCreators.cancleFollowed(id, list));
-----------------------------------------------------------------------------
export const cancleFollowed = (id, list) => {
    return dispatch => {
        const arr = [];
        for (let i = 0; i < list.length;  i++) {
        // 判断当前项漫画是否存在于'已关注'列表
        // 若有则移除当前项并将新列表数组派发给reducer
        // reducer接受新列表数组并更新state，完成漫画取关
            if (list[i].id !== id) {
                arr.push(list[i]);
        dispatch(searchFollowed(arr));
关键词搜索功能：
       可以通过漫画名及作者来搜索相应漫画（当然都是假数据），页面上显示的漫画我都做了其他的我就没做了哈。
       这部分逻辑与'关注/取关'相似，也是通过获取input的value值，用indexOf()方法判断是否存在于关键词列表里(事先写好的假数据，包括作品名和作者)；再dispatch出对应项id，根据id集合对应漫画项信息，然后就可以渲染到界面上。
       写这篇文章的目的就是记录一下我的学习情况，鼓励自己继续往下学，还想要整理一下我的思路（其实挺乱的吧），对这个项目感兴趣的小伙伴可以去查看我的项目地址（贴在下面啦）。
       本人前端新手，希望各位小(da)伙(lao)伴多给我一点意见，感谢！


欢迎交流٩(๑❛ᴗ❛๑)۶
       微信：LYX0_0TXRY
       QQ：295510545
附上我的项目地址：Lesta

  
分类：
 前端
 
标签：
 
React.js前端Reduxaxios
 
  
 

      安装掘金浏览器插件
     
多内容聚合浏览、多引擎快捷搜索、多工具便捷提效、多模式随心畅享，你想要的，这里都有！
 前往安装
     
 

    Lesta