The Development Factory

  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...