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


فهاد الدرس الجديد من دورة react js للمبتدئين غادي نشوفوا كيفاش نخدموا بل api لي سبق خدمنا بها ف Blog ب react js وغادي نشوفوا كيفاش نسترجعوا صور من ل api وعرضها ف slider لي زدنا فالجزء السابق عوض ما نعرضوا فقط texte. 


1- استرجاع الصور من api

فكيف قلنا غادي نسترجعوا الصور من ل api ف index.js كندير تغيير أول حاجة كنزيد state لي غادي تكون فيها array images لي غادي تاخد الصور من بعد قبل مكتشارجا الصفحة الرئيسية كنفذ fonction getImages لي غادي تمكني من استرجاع الصور باستعمال axios.

فكنسترجع الصور وكنزيدهم فل array images منبعد كنرسلهم ل component مع les paramétres هاد ل component غادي يكون فيه slider ولي غادي يمكن من عرضهم ولي غادي نزيدوه من بعد.

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


                                //
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';
import SliderTemplate from './slider';
import './index.css';


class App extends Component{
    constructor(props){
        super(props);
        this.state = {
            images : []
        }
    }
    componentWillMount(){
        this.getImages();
    }
    getImages = () =>{
        axios.get('https://jsonplaceholder.typicode.com/photos?_start=0&_end=3')
            .then(response => {
                console.log(response.data);
                this.setState({
                    images : response.data
                })
            });
    }
    render(){
        var settings = {
            dots : true,
            infinite : true,
            speed : 500,
            slideToShow : 1,
            slideToScroll : 1
        }
        return(
            <div className="container">
                <SliderTemplate settings={settings} images={this.state.images}/>
            </div>
        )
    }
}

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

2- عرض slider فالصفحة الرئيسية

فكيف قلنا غادي نزيد component لي غادي يتكلف بعرض slider ف src كنزيد ملف سميه slider.js فكنسترجع الصور لي جاوني من index.js وكنخدم بل méthode map لي سبق وشفنا وكنعرض الصور والعناوين ديالهم.
من بعد ف return كنعطي ل Slider settings لي جاوني حتى هما من index.js مع ل variable template لي فيها div الخاصة بعرض الصور.

فيلا مشيتي للمتصفح غادي تلقى هاد النتيجة :



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

                                //
import React from 'react';
import Slider from 'react-slick';
import './index.css';


const SliderTemplate = (props) => {
    let template = null;
    template = props.images.map((image,i)=>{
        return(
            <div className="image_box" key={i}>
                <div className="image_item">
                    <img src={image.url} alt=""/>
                </div>
                <div className="image_title">
                    <h3>{image.title}</h3>
                </div>
            </div>
        );
    });
    return(
        <Slider {...props.settings}>
            {template}
        </Slider>
    )
};

export default SliderTemplate;
                            

3- إضافة STYLE CSS ل SLIDER.JS

فغادي تزيد الكود css ف index.css لي هو  :


                                //
body{
    background: #d4d4d4;
}
.container{
    padding-right: 15px;
    padding-left: 15px;
    margin-left : auto;
    margin-right: auto;
} 
img{
    width : 100%;
}