Monsieur Zartosht

Monsieur Zartosht

Who am I?

A very simple blog that belongs to a very simple full-stack web developer about his daily life and struggles through coding. here you will find many things such as music, movies, and code (lots of codes!)


What I write about


Recent Posts

My journey through React

I started my work in web development from the front-end, but soon I have gotten bored and from nasty CSS and HTML. at the time there weren't any frameworks like react! So I set my course through backend development and fall in love with Laravel but that's another story for another post. let's talk about React.

Table of contents

    Hi,

    First time I heard about React I was like who would rely on javascript to make a website? and then I heard about Node and the idea of javascript controlling a server got shakes in my bones.

    Like every programmer, you first resist the newcomers and suddenly found yourself in the middle of something new that fixed all your problems before this new solution.

    What was the problems before React

    before using react I used pure PHP files to generate to fetch all the required data from the controller at startup and populate HTML fields with lots and lots of if, for, etc.... looks nasty? but what else could I do?

    this type of web developing is ok until you make a complex web app that every part needs some data or you have to fetch a large portion of data at once and show all of them to the user. this results in slow loading of pages, unnecessary refreshes, and pages that cannot be updated. so the problem was:

    • Slow load of pages
    • Need to refresh pages on every change (this somehow fixed by introducing of AJAX)
    • Do logics on the view itself (it's such a bad idea!)

    React Era

    with react one can make a website that is completely aware of all data that are presented on the page, which may be updated or changed by user interaction. think of you have an online shop, a user adds a product to her/his cart, in the ancient times we had to make a get request to the server with naked links that forced a web page to reload! with AJAX we could make the request on whatever method that we wanted behind the scene and get the result and update some parts or show an alert. it is good but when your website grows and you have multiple parts that need to be updated soon get very ugly.

    with react you have a webpage that is completely is virtual and can interact with API and update itself. for this, all you need is some JSX object. don't be afraid it's called JSX but believe me, it's same is HTML codes.

    import React, { Component }     from "react";
    import ReactDOM                 from "react-dom";
    
    class App extends Component { // it is a React Component
        render() {
            return <h1>Hello World!</h1>;
        }
    }
    
    ReactDOM.render(<App/>, document.getElementById("app"));

    The result is:

    ...
    <body>
    <div id="app">
    <h1>Hello World!</h1>
    </div>
    </body
    ...

    Hello World!

    State

    For being awesome, React has something called state, it holds all of its information's inside it and for changing that state all you have to do is calling setState() method. with every call of this method, the render() method of the React component is called and this causes to re-render the HTML file.

    let's say you have something like this:

    import React, { Component }     from "react";
    import ReactDOM                 from "react-dom";
    
    class App extends Component { // it is a React Component
        constructor(props){
            super(props) // you have to call the parent class constructor obviously
            this.state = {
                name: "Zartosht"
            }
        }
    
        componentDidMound(){ // this will be called when all components succssfully loaded
            setTimeout(() => { // think of it as a API call response
                this.setState({
                    name: "Zartosht Sepideman"
                })
            }, 10000)
        }
    
        render() { // this will be called every time setState() method called
            return <h1>Hello {this.state.name}}!</h1>;
        }
    }
    
    ReactDOM.render(<App/>, document.getElementById("app"));

    are you wondering what is the result? the result is:

    Hello Zartosht!

    and wait! 10 seconds later it will be changed to:

    Hello Zartosht Sepideman!

    Components

    you can have multiple components and include each in another one:

    another component:

    import React, { Component }     from "react";
    import ReactDOM                 from "react-dom";
    
    export default class Part extends Component { // it is a React Component
        constructor(props){
            super(props) // you have to call the parent class constructor obviously
    
            /**
             * if you want to pass params to another component
             */
            this.state = {
                someData: props.someData
            }
        }
    
        render() { // this will be called every time setState() method called
            return <p>{this.state.someData}}!</p>;
        }
    }

    App component:

    import React, { Component }     from "react";
    import ReactDOM                 from "react-dom";
    import Part                     from "./Part";
    
    class App extends Component { // it is a React Component
        render() {
            return (
                <div>
                    <h1>Hello World!</h1>
                    <Part someData={"DATA"}/> // in this way you can pass data to another component
                </div>
            );
        }
    }
    
    ReactDOM.render(<App/>, document.getElementById("app"));

    It will render to:

    ...
    <body>
    <div id='app'>
        <div>
            <h1>Hello World!</h1>
            <p>DATA</p>
        </div>
    </div>
    </body
    ...

    Common mistakes in React

    when first you start using react, you probably end up using setState() way too much, but beware that not call it inside render() method itself because it results in an infinite loop.

    My goal to write this post was to introduce React to those who are not familiar with React and all they wanted was to find their way through it in the simplest ways. because I always have this problem that all introductions are a way to advanced for someone that just wants to know that what is going on!

    Hope it helped :)


    Posted in Front-end , Javascript , React , Web on by

    Share this post: