دورة react js للمبتدئين الدرس الحادي عشر

منذ 5 سنوات imadbelasri Reactjs
RS

فهاد الدرس الحادي عشر من دورة react js للمبتدئين غادي نشوفوا كيفاش نستعملوا axios باش نسترجعوا les articles من واحد ل api عوض ما نزيدهم داخل array وايضا غادي نشوفوا cycle de vie ديال react وكيفاش نتعاملوا معاه.


1- ل méthode componentWillMount

ل méthode componentWillMount كتنفذ  قبل ما DOM يتشارجا يعني الصفحة الرئيسية تبان فهنا غادي نسترجعوا حنا les articles من ل api ولكن قبل خص ن installer axios لي غادي يمكني من هادشي فدير ل commande :

npm install --save axios

منبعد مايتزاد أول حاجة كندير import ل axios 
من بعد ف ل méthode componentWillMount كندير لكود لي كيمكن من اللإسترجاع ديال les articles فكنخدم ب get لي هي méthode ديال axios لي كتاخد ل url لي غادي تسترجع منو المعلومات فهنا خدمنا بواحد ل json api لي هي مجانية.
فهنا حنا فقط غادي نعرضوا المعلومات المسترجعة فل console فيلا مشيتي لل console غادي تلقى هاد النتيجة :



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

                                                    
                                                        //
import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import News from './components/news';
import Search from './components/search';
import axios from 'axios';

class  App extends Component {
    state = {
        data : [],
        filtred : []
    };
    componentWillMount(){
        axios.get('https://jsonplaceholder.typicode.com/posts')
        .then(response =>{
            console.log(response.data);
        });
    }
    onInputChange = (event)=>{
        let search = event.target.value;
        const filtred = this.state.data.filter((item)=>{
            return item.title.indexOf(search) > -1;
        });
        this.setState({
            filtred 
        });
    }
    removeItem = (index) => {
        let oldData = [...this.state.data];
        oldData.splice(index, 1);
        this.setState({data: oldData});
    }
    render(){
        return(
            <div className="container">
                <Search search={this.onInputChange}/>
                <News removeItem={this.removeItem} data={this.state.filtred.length > 0 ? this.state.filtred : this.state.data}/>
            </div>
        )
    }
};

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

2- عرض les articles من ل api

فباش نعرض les articles كيكفي باش ندير تعديل على state ونرسلها لمعلومات لي استرجعت من response فغادي نمشي للصفحة الرئيسية غادي نلقى المحتوى تغير وغادي تبقى إمكانية الحذف والبحث كيف ما كانت قبل.

فالتغيير لي درنا ف index.js هو :

                                                        
                                                            //
import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import News from './components/news';
import Search from './components/search';
import axios from 'axios';

class  App extends Component {
    state = {
        data : [],
        filtred : []
    };
    componentWillMount(){
        axios.get('https://jsonplaceholder.typicode.com/posts')
        .then(response =>{
            this.setState({
                data : response.data 
            });
        });
    }
    onInputChange = (event)=>{
        let search = event.target.value;
        const filtred = this.state.data.filter((item)=>{
            return item.title.indexOf(search) > -1;
        });
        this.setState({
            filtred 
        });
    }
    removeItem = (index) => {
        let oldData = [...this.state.data];
        oldData.splice(index, 1);
        this.setState({data: oldData});
    }
    render(){
        return(
            <div className="container">
                <Search search={this.onInputChange}/>
                <News removeItem={this.removeItem} data={this.state.filtred.length > 0 ? this.state.filtred : this.state.data}/>
            </div>
        )
    }
};

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

3- ل méthode componentDidMount

فل méthode componentDidMount كتنفذ من بعد مكيتشارجا DOM أو ملي الصفحة الرئيسية ديالنا كتبان فهنا فقط كنعرض رسالة فل console وربما فدرس قادم نشوفوا شي مثال حي.

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

                                                        
                                                            //
componentDidMount(){
    console.log('mounted');
}
                                                        
                                                    

دروس ذات صلة

RS

دورة react js للمبتدئين الدرس الأول

فهاد الدرس الأول من دورة react js للمبتدئين غادي نشوفوا مقدمة على ES6 لي هي javascript 2016 ولي جابت...


RS

دورة react js للمبتدئين الدرس الثاني

فهاد الدرس الثاني من دورة react js غادي نكملوا هاد المقدمة على ES6 ولي بديناها بمجموعة من les foncti...


RS

دورة react js للمبتدئين الدرس الثالت

فهاد الدرس الثالت من دورة react js للمبتدئين غادي نكملو الدورة بالتطرق للمزيد من العناصر الجديدة ف E...


RS

دورة react js للمبتدئين الدرس الرابع

فهاد الدرس الرابع من دورة react js للمبتدئين غادي نبداو ف react فغادي نشوفوا كيفاش نزيدو أول projet...


RS

دورة react js للمبتدئين الدرس الخامس

فهاد الدرس الخامس من دورة react js غادي نشوفوا كيفاش نزيدو component آخر ومنبعد غادي نشوفوا كيفاش نع...


RS

دورة react js للمبتدئين الدرس السادس

فهاد الدرس السادس من دورة react js للمبتدئين غادي نكملوا الدورة ديالنا و نشوفوا كيفاش نرسلو معلومات...


RS

دورة REACT JS للمبتدئين الدرس السابع

فهاد الدرس السابع من دورة react js للمبتدئين غادي نشوفوا كيفاش نزيدو مجموعة ديال الاخبار ف state ومن...


RS

دورة react js للمبتدئين الدرس العاشر

فهاد الدرس العاشر من دورة react js للمبتدئين غادي نشوفوا ل event onClick من بعد ماشفنا onChange فالد...


RS

دورة REACT JS للمبتدئين الدرس الثاني عشر

فهاد الدرس الثاني عشر من دورة  react js للمبتدئين غادي نشوفوا حاجة مهمة ف react js هي routes لي كيمك...


RS

دورة react js للمبتدئين الدرس الثالت عشر

فهاد الدرس الجديد من دورة react js للمبتدئين غادي نشوفوا كيفاش نتعاملو مع les formulaires ف react js...