MUSIC APP REACT JS & DEEZER API الجزء الثاني

imadbelasri Reactjs
RS

فهاد الجزء الثاني من MUSIC APP REACT JS & DEEZER API غادي نكملوا ل app ديالنا ونزيدو ل header ول footer ومنبعد غادي نزيدو الحقل ديال البحث لي غادي يمكنا من البحث عن مغنين وعرض الألبومات ديالهم.


نظرة سريعة بالفيديو


1- إضافة ل Header

ف components زيد dossier جديد سميه widgets فيه زيد dossier جديد سميه header لي فيه كنزيد fichier جديد سميه Header.js فيه غادي تكون عندي القائمة ديال التصفح الخاصة بل app ديالنا.

الكود ديال الملف هو :

                                                    
                                                        //components/widgets/header/Header.js

import React from 'react';
import {Link} from 'react-router-dom';

const Header = () =>{
    return(
        <nav className="navbar navbar-dark bg-danger mb-4">
            <Link className="navbar-brand" to="/">Music App</Link>
            <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                <span className="navbar-toggler-icon"></span>
            </button>
            <div className="collapse navbar-collapse" id="navbarText">
                <ul className="navbar-nav mr-auto">
                    <li className="nav-item active">
                        <Link className="nav-link" to="/"><i className="fas fa-home"></i> Accueil <span className="sr-only">(current)</span></Link>
                    </li>
                    <li className="nav-item">
                        <Link className="nav-link" to="/favorites"><i className="fas fa-star"></i> Favoris</Link>
                    </li>
                </ul>
            </div>
        </nav>
    )
}

export default Header;
                                                    
                                                

2- إضافة ل Footer

ف widgets زيد dossier جديد سميه footer لي فيه كنزيد fichier جديد سميه Footer.js فيه عندي ل footer لي ممكن تزيد فيه أي حاجة بغيتي.

الكود ديال الملف هو :

                                                        
                                                            //components/widgets/footer/Footer.js

import React from 'react';
import {Link} from 'react-router-dom';

const Footer = () =>{
    return(
        <nav className="navbar navbar-dark bg-danger mb-4">
            <Link className="navbar-brand mx-auto" to="https://www.darija-coding.com">DCoding&copy;2019</Link>
        </nav>
    )
}

export default Footer;
                                                        
                                                    

3- إضافة حقل البحث

ف widgets زيد dossier جديد سميه searchField لي فيه كنزيد fichier جديد سميه Search.js فيه عندي الحقل ديال البحث.

فاش كندخل شي قيمة كنسترجعها بل fonction handleInputChange لي كتعطيها ل variable term من بعد فاش كنرسل الفورم كتنفذ ل fonction submitSearch لي كترسل لقيمة ل fonction searchAlbums لي عندي ف Home.js ولي بها كنسترجع الألبومات الخاصين بالمغني لي كنبحث عليه.

الكود ديال الملف هو :

                                                        
                                                            //components/widgets/searchField /Search.js


import React,{Component} from 'react'

class Search extends Component{

    state = {
        term : ''
    }

    handleInputChange = (event) => {
        this.setState({term : event.target.value})
    }

    submitSearch = (event) =>{
        event.preventDefault();
        let {term} = this.state;
        this.props.searchAlbums(term);
    }

    render(){
        return(
            <div className="search mb-2">
                <form onSubmit={(event) => this.submitSearch(event)}>
                    <div className="row">
                        <div className="col-md-10">
                            <div className="form-group">
                                <input 
                                    value={this.state.term}
                                    onChange={(event) => this.handleInputChange(event)}
                                    type="text"
                                    className="form-control p-4" 
                                    placeholder="Recherche"/>
                            </div>
                        </div>
                        <div className="col-md-2">
                            <div className="form-group">
                                <button className="btn btn-danger"><i className="fas fa-search"></i></button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        )
    }
}

export default Search;
                                                        
                                                    

4- إضافة bootstrap & fontawesome لل app

باش نزيد bootstrap  و fontawesome  icons ل app ديالي كنمشي ل public فالملف index.html كنزيد هاد السطرين داخل ل head :

                                                        
                                                            //bootstrap & fontawesome

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">