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


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


1- إضافة component ف react js

فباش نزيدو component غادي نزيدو dossier جديد ف src نسميوه components وفيه غادي نزيد ملف جديد نسميه news.js الكود لي فيه هو نفس الكود لي شفنا فالأول الإضافة الجديدة هو كنزيد واحد السطر لي هو :

export default News 

ف News هو إسم ل component ول export default كتعني بلي غادي نردوه ممكن اننا نديرولو ل import من ملفات أخرى.

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

                                //
import React from 'react'


const News = ()=>{
    return(
        <div>
            News
        </div>
    )
}

export default News;
                            

2- استرجاع ل component ف index.js

فباش نسترجع ل component لي زدت ف dossier components كنخدم ب import ولي كنعطيها اسم ل component لي هو News من بعد باش نعرضوا كيكفي باش نزيدو وسط return بهاد الطريقة :


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

                                //
import React from 'react';
import ReactDOM from 'react-dom';
import News from './components/news';

const App = () => {
    return(
        <div>
            <News/>
        </div>
    )
};

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

3-إضافة css ل component ف react js

فباش نزيد css ل component كيكفي باش نخدم ب ل attribut style فكنزيدها ل div وكنعطي style على شكل objet فالمثال لي عندنا زدنا style css ل div عطيناها background حمر وطول ديال 200px فيلا مشيتي للمتصفح غادي تلقى هاد النتيجة :



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

                                //

import React from 'react';
import ReactDOM from 'react-dom';
import News from './components/news';

const App = () => {
    return(
        <div style={
            {
                background : 'red',
                height : '200px'
            }
        }>
            <News/>
        </div>
    )
};

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