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


فهاد ل 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;
}
                                


بحث في الموقع


إشترك للتوصل بالجديد