Blog App ب react js الجزء الأول

imadbelasri Reactjs
RS

فهاد ل projet الجديد لي غادي يبقى مفتوح على تحديث جديد كل مرة غادي نشوفوا كيفاش نقادو blog ب react js فل projet كيعتمد على دورة المبتدئين ف react js لي سبق ودرنا فيلا مشفتيهاش حاول تشوفها قبل ما تبدا باش تعرف شنو كندير.


نظرة سريعة بالفيديو


1- إضافة les routes ديال ل projet ديالنا

أول حاجة غادي تزيد application جديدة سميها كيف بغيتي من بعد متزاد وفباش نخدم ب les routes ضروري ما ن installer واحد ل package غادي نمشي ل cmd وندير ل commande :


npm install --save   react-router-dom

من بعد مايتزاد غادي نزيد fichier ف src نسميه route.js فيه غادي نزيد les routes ديالي.

أول حاجة كنسترجع Route و Switch من react-router-dom  منبعد كنخدم بهم ف Switch بحال switch لي كنخدم بها باش كن tester و Route كتمكني من إضافة les routes.

فكنزيد route / لي كيدي للصفحة الرئيسية و route /articles لي كيدي للصفحة articles.js لي غادي نزيدها من بعد و route /articles/:id ولي غادي يمكنا من استرجاع post بل id ديالو.

و routes كنزيدهم وسط component سميناه Layout ولي غادي نزيدوه من بعد باللإضافة ل les components لاخرين لي هما Home و Articles و Article.

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

                                                    
                                                        //
import React from 'react';
import {Route,Switch} from 'react-router-dom';
import Layout from './components/hoc/Layout/layout';
import Home from './components/Home/home';
import Articles from './components/Posts/articles';
import Article from './components/Posts/article';

const Routes = () => {
    return(
        <Layout>
            <Switch>
                <Route path="/" exact component={Home}/>
                <Route path="/articles" exact component={Articles}/>
                <Route path="/articles/:id" exact component={Article}/>
            </Switch>
        </Layout>
    );
}

export default Routes;
                                                    
                                                

2- استخدام ل BROWSERROUTER ف index.js

كيف شفنا فالدورة ديال المبتدئين فباش نتنقل بين الصفحات لا بد ما نخدم بل BrowserRouter لي كيمكن من التنقل بين الصفحات ف index.js  كنسترجعوه من react-router-dom من بعد كنسترجع ل component Routes من الملف route.js وكنزيدو وسط ل BrowserRouter.

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

                                                        
                                                            //
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import Routes from './route';


const App = () => {
    return(
        <BrowserRouter>
            <Routes/>
        </BrowserRouter>
    );
};


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

3- إضافة الملف الرئيسي

فكيف شفنا ف route.js كان عندنا component سميناه Layout فغادي نزيدو ملف layout.js لي غادي يكون فيه هاد ل component.
فغادي نمشي ل src غادي نزيد dossier components فيه غادي نزيد dossier hoc فيه غادي نزيد dossier Layout فيه غادي نزيد fichier layout.js.

فهاد الملف غادي نسترجع ل Header ول Footer لي غادي نزيدوهم من بعد ثم ملف css لي غادي نزيدوه من بعد.

ف state كنزيد propriété showNav لي كتاخذ false ولي هي لي غادي نتحكم بها فالقائمة الجانبية يعني ل menu وعندي ل fonction toggleSideNav لي كتاخد action عبارة عن true أو false ولي كنغير بها القيمة ديال  state showNav فيلا كانت true كتعرض ل menu كانت false كتخفيه.

ف render كن عرض ل components Header و Footer لي غادي نزيدو من بعد فل Header كياخد ل propriété لي هي showNav وكياخد ايضا جوج ديال les fonctions لي كيتكلفوا بعرض أو إخفاء ل menu.

أما this.props.children فهي كتمكني باش نجعل les components كاملين لي زدنا ولي غادي نزيدو فوسط ل component Layout.

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

                                                        
                                                            //
import React, { Component } from 'react';
import Header from '../../Includes/header';
import Footer from '../../Includes/footer';
import './layout.css';

class Layout extends Component{
    constructor(props){
        super(props);
        this.state = {
            showNav : false
        }
    }
    toggleSideNav = (action) => {
        this.setState({
            showNav : action
        });
    }
    render(){
        return(
            <div>
                <Header
                    showNav={this.state.showNav}
                    onHideNav={() => this.toggleSideNav(false)}
                    onOpenNav={() => this.toggleSideNav(true)}
                />
                {this.props.children}
                <Footer/>
            </div>
        );
    }
}

export default Layout;
                                                        
                                                    

4- إضافة style css ل layout.js

دائما ف dossier Layout غادي نزيد style css لي غادي يكون فل component Layout ولي غادي يكون فكل les components ديالنا.
فغادي نزيد ملف جديد سميه layout.css فالكود لي غادي نزيد فيه هو : 

                                                        
                                                            //
body{
    font-family: 'Times New Roman', Times, serif;
    background: #ececec;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
                                                        
                                                    

دروس ذات صلة

RS

Blog App ب react js الجزء الأول

فهاد ل projet الجديد لي غادي يبقى مفتوح على تحديث جديد كل مرة غادي نشوفوا كيفاش نقادو blog ب react j...


RS

BLOG APP ب REACT JS الجزء الثاني

فهاد الجزء الثاني من blog app ب react js غادي نزيدو ل header ول footer ل application ديالنا ولي فيه...


RS

BLOG APP ب REACT JS الجزء الثالت

فهاد الجزء الثالت من BLOG APP ب REACT JS غادي نكملو ل projet ديالنا غادي نشوفوا كيفاش نزيدو الق...


RS

Blog App ب react js الجزء الرابع

فهاد الجزء الرابع من Blog ب react js غادي نكملوا ال projet بعرض les articles كاملين فالصفحة الخاصة ب...


RS

Notes App ب react js & firebase الجزء الأول

فهاد ل projet الجديد غادي نشوفوا كيفاش نقادو notes app ب react js & firebase فل app معروف شنو كتدير...


RS

NOTES APP ب REACT JS & FIREBASE الجزء الثاني

فهاد الجزء الثاني من notes app ب react js غادي نكملو ل projet وغادي نزيدوا القائمة ولي غادي تمكنا من...


RS

Notes App ب react js & firebase الجزء الثالت

فهاد الجزء الثالت من Notes App ب react js & firebase غادي نكملو ل projet ديالنا غادي نزيدو ل form دي...


RS

NOTES APP ب REACT JS & FIREBASE الجزء الرابع والأخير

فهاد الجزء الرابع والاخير من NOTES APP ب REACT JS & FIREBASE غادي نكملوا ل projet وغادي نزيدو ل...


RS

Twitter app ب laravel & react js الجزء الأول

فهاد ل projet الجديد غادي نشوفوا كيفاش نقادو Twitter App لي هي application كتمكن من إضافة des tweets...


RS

Twitter app ب laravel & react js الجزء الثاني

فهاد الجزء الثاني من Twitter app ب laravel & react js غادي نكملوا ل projet ونزيدو الجزء الخاص بالمست...