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


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


1- إضافة الأخبار ل component index.js

فل component index.js غادي نزيد array سميتها data فيها مجموعة من الاخبار على شكل json objects من بعد كنرسلهم ل component news كيف شفنا قبل.

الكود لي زدنا هو :

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

class  App extends Component {
    state = {
        data : [
            {
                'title': 'lorem ipsum',
                'body': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla risus elit, vel semper enim auctor sed. Nunc consequat arcu vel lectus tempor feugiat. Aliquam ut hendrerit urna, vel placerat sapien. Suspendisse fringilla est sit amet mi laoreet, vitae dictum turpis lacinia. Sed sagittis cursus est, sit amet porttitor nisi.'
            },
            {
                'title': 'vitae dictum turpis lacinia',
                'body': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla risus elit, vel semper enim auctor sed. Nunc consequat arcu vel lectus tempor feugiat. Aliquam ut hendrerit urna, vel placerat sapien. Suspendisse fringilla est sit amet mi laoreet, vitae dictum turpis lacinia. Sed sagittis cursus est, sit amet porttitor nisi.'
            },
            {
                'title': 'consectetur adipiscing',
                'body': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla risus elit, vel semper enim auctor sed. Nunc consequat arcu vel lectus tempor feugiat. Aliquam ut hendrerit urna, vel placerat sapien. Suspendisse fringilla est sit amet mi laoreet, vitae dictum turpis lacinia. Sed sagittis cursus est, sit amet porttitor nisi.'
            },
            {
                'title': 'Duis fringilla risus elit',
                'body': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla risus elit, vel semper enim auctor sed. Nunc consequat arcu vel lectus tempor feugiat. Aliquam ut hendrerit urna, vel placerat sapien. Suspendisse fringilla est sit amet mi laoreet, vitae dictum turpis lacinia. Sed sagittis cursus est, sit amet porttitor nisi.'
            }
        ],
    };
    render(){
        return(
            <div className="container">
                <News data={this.state.data}/>
            </div>
        )
    }
};

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

2- استقبال data فل COMPONENT NEWS

فل component news كنسترجع data من ل props كيف شفنا فالجزء السابق الفرق هنا هو انني كنرسلها ل component سميناه news_item ولي غادي نزيدوه من بعد هو لي كيتكلف بالعرض ديالها وزدنا ايضا table لي غادي نعرضوا فيها المعلومات.

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

                                //
import React from 'react';
import NewsItem from './news_item';

const News = (props) => {
    return(
        <table className="table table-hover">
            <thead>
                <tr>
                    <th>Titre</th>
                    <th>Description</th>
                </tr>
            </thead>
            <NewsItem news={props.data}/>
        </table>
    );
};

export default News;
                            

3- عرض data فل COMPONENT NEWS_ITEM

ف dossier components غادي نزيد ملف جديد سميه news_item  فيه كنستقبل news لي جاتني من news.js منبعد كنزيد fonction showData لي كتاخد news وكتخدم بل map لي شفنا فالمقدمة ديال الدورة وكتعرض كل معلومة فالجدول لي زدنا.
فيلا مشيتي للمتصفح غادي تلقى :



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

                                //
import React from 'react';


const NewsItem = (props) =>{
    const showData = () =>{
        return  props.news.map((item)=>{
            return(
                <tr key={item.title}>
                    <td>{item.title}</td>
                    <td>{item.body}</td>
                </tr>
            );
        });
    }
    return(
       <tbody>
           {showData()}
       </tbody>
    );              
};

export default NewsItem;
                            

4- إضافة bootstrap ل application ديالنا

باش نزيدو bootstrap ل application ديالنا كيكفي باش نمشي ل dossier public ف index.html فل head غادي نزيد هاد السطر : 

                                    //
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">