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


فهاد الدرس الحادي عشر من دورة 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');
}