Forem: Ghaleb Al-Nakhlani

Render a component in HTML page

Ghaleb Al-Nakhlani — Wed, 06 Jan 2021 14:11:03 +0000

I have a react CookieBanner component in the app /src and I would like to render this component in an HTML page placed in the Public folder. The component is working with the normal App.js and it rendered, I would like to have the same component in static HTML pages in the Public folder.

Here are my routes.js

class Routes extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div>
            <HelmetMetaData />
            <Switch>
                <Route exact path="/" render={() => {window.location.href="Home.html"}} />
                <Route path="/Main" component={App}/>
                <Route path="/About" render={() => {window.location.href="About.html"}}/>
                <Route path="/impressum" render={() => {window.location.href="impressum.html"}}/>
                <Route path="/blog" render={() => {window.location.href="blog.html"}}/>
                <Route path="/Questions" render={() => {window.location.href="Questions.html"}} />
                <Route path="/Answers" render={() => {window.location.href="Answers.html"}} />
                <Route path="/info" render={() => {window.location.href="info.html"}} />
                <Route component={Error}/>
            </Switch>
            </div>
        );
    }
};
export default Routes;

CookieBanner.js

import ReactDOM from "react-dom";
import React from "react";
import CookieConsent from "react-cookie-consent";

class CookieBanner extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            showCookie: false,
        };
    }

    componentDidMount() {
        setTimeout(function () { //Start the timer
            this.setState({showCookie: true}) //After 1 second, set render to true
        }.bind(this), 800)
    }

    render() {
        return (
            <div>
            {
                this.state.showCookie && (
                    <CookieConsent
                        // debug={true}
                        location='bottom'
                        buttonText='Akzeptieren'
                        declineButtonText='Ablehnen'
                        enableDeclineButton
                        flipButtons={true}
                        cookieName='<cookieName>'
                        style={{background: "rgb(170, 165, 163)", padding: '0.2rem'}}
                        overlayStyle={{zIndex: '9999'}}
                        buttonStyle={{
                            color: 'rgb(255, 255, 255)',
                            fontSize: '16px',
                            backgroundColor: 'rgb(112, 173, 71)'
                        }}
                        declineButtonStyle={{color: 'rgb(192, 0, 0)', borderColor: 'transparent', backgroundColor: 'none', border: 'none', background:'transparent'}}
                        expires={150}
                        overlay>
                        {/*// onAccept={() => {*/}
                        {/*//     alert("Accept was triggered by clicking the Accept button");*/}
                        {/*// }}*/}
                        {/*// onDecline={() => {*/}
                        {/*//     alert("nay!");*/}
                        {/*// }}*/}
                       this is a cookie
                        <span style={{fontSize: '16px'}}>
                        <a style={{display: 'inline-block', padding: '0.2rem', textDecoration: 'underline'}}
                           role="button" href="/datenSchutz">More information</a>
                    </span>
                    </CookieConsent>)
            }
            </div>
        );
    }
}

ReactDOM.render(<CookieBanner />, document.getElementById("banner"));

Migrate Create React App to Razzle

Ghaleb Al-Nakhlani — Wed, 23 Dec 2020 22:49:54 +0000

I have a project which was built using Create react app. I need now a server rendering for my App I found about Razzle it is the most simple method to implement.

I have the /src which has all the components in addition a folder for images Also a few stuff in the public folder. And node_modules folder last I have the dependencies in the package.json

Should I just copy paste them to Razzle? Which I have tried and I get errors webpack_require and TypeError: cannot read property 'prototype' of undefined?

What is the best way to convert to Razzle?

Thank you

90% of Linux Commands

Ghaleb Al-Nakhlani — Wed, 23 Sep 2020 23:13:25 +0000

man
sudo
cd
pwd
ls
clear
bash
ssh
history
grep
whereis
chmod
chown
find
apt
echo
cat
systemctl
df
htop
rm
mv
mkdir
cp
nano
ip
netstat

If you want to learn how to use the command just type in the terminal (man follwed by the command name)
Example:
Ubuntu@ubuntu$ man cd

Your Welcome to add more commands in the comments, if i forgot to include them.

Why would you consider Linux over Windows?

Ghaleb Al-Nakhlani — Mon, 07 Jan 2019 14:50:22 +0000

I have noticed a lot of developers are using Linux. I want to hear from them why they prefer Linux over Windows.

What are the fundamentals of programming?

Ghaleb Al-Nakhlani — Sat, 22 Dec 2018 13:03:13 +0000

what are the core basic fundamentals of programming which if you learn it well you can easily switch between programming languages because the principles are the same in every language? I have been thinking about this for a while and searched a lot but couldn`t find the right answer to my question. I hope i can get a clear explanation from the experienced developer in DEV.to