The Development Factory

Introduction When I was using JavaScript , there is an inside joke in our team if you don't know coding then you need to use typescript . As Typescript provides you the types that make you write better code with less mistakes before compilation.  It's all good using typescript but seriously why even barely use typescript for just types , if you know what you are coding , and know all you variables because you give them good naming that make you help understand the code of which is used for.   Obviously , if you write exactly you wanted and you are a solo developer without any team or any interference, why even bare learning types ? Why even bare learning typescript ? Correct question and on point ! But do you know  when you write code on Friday with the strategy you made and when you come again on Monday  , writing the code with the exact same strategy as Friday is not possible and  you can make mistakes . You know , time are bad sometimes and you can't rem...

  Why to use Prop Types in React ? Props are used to pass down the data from the parent component to the child component but as our application grows the props we pass to the child components sometimes validate wrong and we get the wrong result also it hard to debug where we are lacking. For example we want age in number datatype in the child component instead we pass age in the string data types so, we get the wrong result just by the wrong data type we passed. So, in this type of case we need validation to ensure we use correct datatype for the props and we can also ensure what kind of data we want to put in the prop whether default or must have values. How and When to use Prop Types in React ? When working with functions , we pass arguments into the functions and when we pass wrong argument , it throws an error . Just like , we want to know where we are doing the wrong validation so we can correct at the point and specify those validation into our react app . In this case , the ...

  Introduction There are three main component in web development HTML , CSS , Javascript where to include external , internal , inline  CSS is quite easy but when Facebook release the React there jsx is born which is a hybrid of javascript and html that makes to style component bit differently and many developers find it difficult to include CSS in React . That's why in this blog we will discuss about some methods for how to include CSS in  React Let's get started ! 1. Internal CSS Internal CSS is used when you want to design the particular element and which is quite straight forward . You just specify the attribute style and include CSS properties in the camelCase and values in the string to be placed in the object which enclosed in later jsx object which is used to style the element . You can also specify the pre-defined object of CSS in the in the jsx object. Look at the below example of using the internal CSS in react   CSS styles may be event created in obj...

  Introduction In React , the modularity of components where all the logic is separate and not dependent on each other but as you know, the parent component and child component are connected as the child component called in the parent component . When they wanted the values from parent component , they will just use props to pass the state between the components. Props play a important role in passing data from one component to another component and that's how modularity achieves. Props are the html attribute that takes the value in the left side where you can also pass the state in the jsx object and any value that is achieved in the parent component. By it's name it is properties which in short called props as they play a role like html properties which used as the properties of component.   As, you can see in the picture below the addNewTodo is the value which is passed to addNewTodo prop that will be accessed in the Todo component by the argument. You will access the ...

  What is Document Object Model ? Document Object model is the web api which manipulates the elements , content of the web page . It is a kind of structure of node or objects which work like a interface in programming languages . A web page is a document contains the html content and the whole body with CSS while Document Object Model is there to manipulate the elements of the document. DOM And Javascript Document Object Model is a web api which is not a programming language but it is a independent api which can be used in any programming languages to manipulate DOM . Javascript is nothing without the document object model , because of which the elements can be changed , styled or created and manipulated with the javascript without the html and CSS used. Only with DOM api (web based)  javascript is so popular and widely used anywhere with such flexibility Accessing the DOM elements You can access the DOM api by internal and external script in the html page and with those scrip...

  Introduction JSX is a javascript syntax extension which allows you to write html code and javascript together . JSX is a simple html code that you can assign to a variable in javascript file. But many people are confused that how we are able to write html in the javascript file. There is a library name babel which is a javascript compiler that converts the JSX to javascript object and then render the react application . Please check out this link for BABEL   that converts your javascript code to html. You can even create you webhook for the babel and can do the create-react-app which already has the babel compiler installed into it .  This is the jsx code in the app component which is returned in the root.render() with the create root function. Now, let's convert this code in the React.createElement() which is the transformation of the jsx code and further transforms into the javascript object to execute in the browser. This is the code transformation of jsx into React....

  What is Expression? Expression in javascript is a slot in the statement which output some value , without expression the statement is incomplete in javascript . Expression include ternary operators , passing value to variable , mutation in array by array methods , or some logical or relational calculation in the value. What is Statement? Statement in javascript which execute some instruction and called as a program . Statement is incomplete without a expression and carried a slot for the expression to fit in . Declaring a variable needs some value which is a expression that makes the complete statement. Statement doesn't carries a value whether the expression is a value and combination of expression into the statement makes the program start its execution and it forms the complete statement. Statements like if-else conditional statements , for loops , Declaring some variable , functions etc. Expression as Statement In the above paragraph , we understood that expression is a value...

  Introduction React is a javascript library and if you know some javascript basics and have build some projects , you will learn react very smoothly and didn't have to bother learning react. There are some concepts in javascript , if you learn before jumping to react library then react will seemed to be as plain javascript and you only need to learn some particular concepts in react that are specific to the library which are only few. 1.  Scoping This is the one basic but important concept in javascript where  before ES6 has introduced , it has only Global scope and Function scope means variable declare in the function cannot be access in outside environment and gets local to the functions . After ES6  , block {} scope has also introduced where the variable declared in the block cannot be access outside the block. 2. Callbacks Javascript functions are executed in the sequence they are called not in the sequence they are defined which introduced the callback concept ...

  Exploring New Features of ECMAScript 2023 As  javascript continuously to evolve , we as a javascript developers eagerly would like to explore and use in our projects to increase the productivity in writing the code and achieving efficiency. So, let's explore the ECMAScript 2023 Javascript features. 1) .with() Earlier when we want to update some changes , the original array is altered and we get to see some side effects due to the same array changed . But .with() method can return the duplicate array with the changes.  In this example , you can see the old way of updating the array and with the use of new feature the array can be easily update without altering the original array.   2) .toSpliced() This method in javascript is used to pull out the specific element and with the number of number of element to pull out is mentioned in the parameters . Earlier , with the splice()  method the array is altered with the desired result but can cause some side effects. S...

Introduction We have discuss core redux basics , now it's the time to explore redux in react at the basic level . Let's look at the redux step by step deeply in the sample project of react. In this project , we will have the increment , decrement and show toggle actions which will manipulate the counter state and display the state accordingly. First step , would be to create the store with the reducer function of the redux which will handle the change in the component and maintain the state across the react application. In this example ,  we will declare the initial Values and set the counter = 0 and show = true whenever some action is dispatched ,  these default values  changes accordingly though the reducer function . If we don't specify the initial values that will bring result and error because the initial values are undefined or not declared as you are changing value which is not even defined, so it will obviously produce an error. After declaring intialValues , it w...

 Explore Core Redux Concepts Redux is the library which can be used with any javascript framework and not just with react .Indeed redux team , now  recommends usage of extra package called reduxjs toolkit and will cover this later in the blog post. These core concepts will  make the baseline for the redux learning. Let's explore core redux concepts and clear the basics from the starting.   This is the folder structure that will look like in the simple project. Will will first run the command npm init -y to install the package json file and then install redux with command npm install redux  which will automatically install package- lock. Json  file and node_modules  later , also create the server.js file in the project .  Then , we will import redux and create the store with the help of the function createStore()  . It will give the deprecation warning which you should ignore it first because redux team recommends using reduxjs toolkit ....

  Introduction We know what is redux and as we know it is an alternative to react context hook . Redux is an replacement for react context and cover many potential disadvantages when using cross component and app wide state across multiple components . Let's explore core redux concepts and how we use redux in our react applications with the flow diagrams . So it better understand to you and the concept easily get into your projects. Redux  , stores the state in the centralized location where it can be used globally over the web across multiple components.  So we should first be discussing about that peace of content.   1) Central data store generally keep all the state or updates of state which later notifies the component which state has changed . Central Data Store is the location where all the mutation or updates of state kept which later be used in the component. 2) After setup the central data store for managing the state , how the store notify the componen...