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


فهاد الدرس السادس من دورة react js للمبتدئين غادي نكملوا الدورة ديالنا و نشوفوا كيفاش نرسلو معلومات من component ل component آخر ونعرضوها وغادي نشوفوا كيفاش نحولو component من fonction ل class.


1- تحويل ل component من fonction ل class

فمنين كتكون عندي معلومات لي غادي تخزن فواحد ل component فضروري من حولو ل class لي فيها كاين واحد ل objet state لي فيه كنخزن هاد المعلومات.
ف state بحال data ف vue js  فأول حاجة كندير ل import ل Component لي هي ل classe لي فيها state.

فكنرد ل App ي hériter من Component ب extends منبعد  كنزيد state.

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

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

class  App extends Component {
    state = {
        
    };
    render(){
        return(
            <div>
                <News/>
            </div>
        )
    }
};

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

2- إضافة المعلومات فل objet state وإرسالها ل component news

داخل state غادي نزيد propriété لي سميتها data وزدت فيها واحد الجملة لي باش نرسلها ل component news كنزيد attribut داخل ل component سميتها data ولي كتاخد كقيمة القيمة لي كاينة ف   data لي زدنا ف state.

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

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

class  App extends Component {
    state = {
        data : 'la vie est belle'
    };
    render(){
        return(
            <div>
                <News data={this.state.data}/>
            </div>
        )
    }
};

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

3- عرض المعلومات فل component news

فباش نعرض القيمة لي جاتني ف data فكل component لي عبارة على fonction عندو props لي هما القيم لي كيستقبل فيكفي باش نستعمل ل props باش نسترجع data ونعرض القيمة لي فيها ف return فيلا مشيتي للمتصفح كتحصل على هاد النتيجة :



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

                                //
import React from 'react';


const News = (props) => {
    return(
        <div>
            {props.data}
        </div>
    )
};

export default News;