Contacts App ب React js الجزء الأول


فهاد ل projet الجديد من سلسلة react js غادي نشوفوا كيفاش نقادو واحد ل contacts app لي غادي نستعملوا فيها واحد ل api سميتها random user generator لي كتمكنا من عرض des contacts لي عشوائيين فالمهم هنا هو نعرف كيفاش نتعامل مع ل api.

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

1- إضافة PROJET جديد ب REACT JS

فأول حاجة زيد projet جديد ب create-react-app منبعد غادي تفتحوا ف cmd وتزيد المكتبات لي غادي نحتاجوا بهاد les commandes :

- npm install --save axios

- npm install --save   react-router-dom

منبعد ما يتزادوا غادي تمسح داكشي لي ف src وتزيد fichier جديد سميه routes.js فيه غادي يكونوا les routes ديالنا فهادشي راه سبق شفناه فدروس سابقة.

فالكود ديال routes.js هو :

                                import React from 'react';
import {Switch} from 'react-router-dom';
import {Route} from 'react-router-dom';
import Home from './components/home';
import ContactDetails from './components/ContactDetails';


const Routes = () =>{
    return(
        <Switch>
            <Route path="/" exact component={Home}/>
            <Route path="/details" exact component={ContactDetails}/>
        </Switch>
    )
}


export default Routes;
                            

2- تعديل الملف الرئيسي

فالملف index.js كندير تعديل أول حاجة كنسترجع les routes من الملف routes.js وكنخدم بل BrowserRouter لي سبق شفناه قبل ولي كيمكني باش نتنقل بين الصفحات ديالي.

فالكود لي زدنا ف index.js هو :

                                //
import React from 'react';
import ReactDOM from 'react-dom';
import Routes from './routes';
import {BrowserRouter} from 'react-router-dom';

const App = () =>{
    return(
        <BrowserRouter>
            <Routes/>
        </BrowserRouter>
    )
}


ReactDOM.render(
    <App/>
,document.getElementById('root'));
                            

3- إضافة الصفحة الرئيسية وعرض LES CONTACTS

باش نعرض les contacts من ل api كاملين كنزيد dossier ف src سميه components فيه زيد fichier سميه home.js فيه لكود لي كنسترجع به les contacts من ل api فاش كيتشارجا ل fichier وكنخزنهم ف variable contacts لي هي array زدتها ف state.

منبعد عندي ل fonction removeContact لي كتحذف contact بل index ديالو من ل array contacts وكنرسلهم ل component ListContacts لي غادي نزيدوه من بعد.

الكود ديال home.js هو :

                                //
import React,{Component} from 'react';
import ListContacts from './ListContacts';
import axios from 'axios';

class Home extends Component{
    constructor(props){
        super(props);
        this.state = {
            contacts : []
        }
    }
    componentDidMount(){
        axios.get('https://randomuser.me/api/?results=10')
            .then(response => this.setState({contacts : response.data.results}))
            .catch(error => console.log(error));
    }
    removeContact = (index) =>{
        const oldState = this.state.contacts;
        oldState.splice(index,1);
        this.setState({
            contacts : oldState
        })
    }
    render(){
        return(
            <ListContacts 
                removeContact={this.removeContact}
                contacts={this.state.contacts}
            />
        )
    }
}


export default Home;
                            

4- عرض LES CONTACTS

ف dossier components زيد fichier جديد سميه ListContacts.js فيه كنعرض les contacts لي جاوني من الملف home.js فعندي الحقل ديال البحث لي كنبحث به على ل contact لي دخل المستخدم الإسم ديالو فالحقل هادشي سبق وشفناه قبل.

منبعد عندي fonction storeContact لي فاش كنكليكي على voir كنخزن المعلومات الخاصة بل contact لي ضغطت عليه ف localStorage لي هو ديال المتصفح ديالنا هاد المعلومات غادي نعرضها من بعد.

الكود ديال ListContacts.js هو : 

                                    //
import React,{Component} from 'react';
import './ListContacts.css';
import {Link} from 'react-router-dom';

class ListContacts extends Component {
    state = {
        searchTerm : ''
    }
    getData = (event) => {
        this.setState({
            searchTerm : event.target.value
        })
    }
    clearAll = () =>{
        this.setState({
            searchTerm : ''
        })
    }
    storeContact = (contact) =>{
        localStorage.setItem('contact',JSON.stringify(contact));
    }   
    render(){
        const searchTerm = this.state.searchTerm;
        let contacts = this.props.contacts;

        const showContacts = searchTerm === ''
            ? 
        contacts 
            :
        contacts.filter((contact) => {
            return contact.name.first.toLowerCase().includes(searchTerm.toLocaleLowerCase()) || contact.name.last.toLowerCase().includes(searchTerm.toLocaleLowerCase());
        })
        return(
            <div>
                <div className="searchbar">
                    <input 
                        placeholder="Recherche"
                        value={this.state.searchTerm}
                        onChange={this.getData}
                    />
                </div>
                {
                    showContacts.length !== contacts.length  ? 
                        <div className="show-results">
                            <span>
                                Résultat {showContacts.length} de {contacts.length}
                            </span>
                            <button className="showAll"
                                onClick={() => this.clearAll()}
                            >
                                Tous les résultats
                            </button>
                        </div>
                    :
                    null
                }
                <ol className="contact-list">
                    {
                        showContacts.map((contact,index) => (
                            <li key={contact.location.postcode}>
                                <div className="contact-image"
                                    style={{
                                        backgroundImage : `url(${contact.picture.large})`,
                                        width:'100px',
                                        height:'100px',
                                        borderRadius:'100px'
                                    }}
                                >
                                </div>
                                <div className="contact-details">
                                    <p>{contact.name.first} {contact.name.last}</p>
                                    <p>@{contact.email}</p>
                                </div>
                                <div className="buttonRemove">
                                    <button 
                                    onClick={() => this.props.removeContact(index)}
                                    className="remove">X</button>
                                </div>
                                <Link className="show-details" onClick={() => this.storeContact(contact)} to={`details`}>
                                    <i className="fas fa-eye show"></i>
                                </Link>
                            </li>
                        ))
                    }
                </ol>
            </div>
        )
    }    
}

export default ListContacts;
                                


إشترك في قناتنا على اليوتيوب

بحث في الموقع


إشترك للتوصل بالجديد