Skip to main content

Posts

Showing posts from January, 2018

React JS Form Validation, React Props Validation ES6 Tutorials With Examples

React Props Validation ES6 Overview Validation is a important part of frontend application, here, we'll discuss about React JS component props validation. There are some common points which we'll learn in this post. How to pass props and how to use spread operator How to set type of props How to make props mandatory or optional How to set the default props What is state,props and state vs props Stateless vs Stateful Components setState vs forceUpdate ReactJS function ReactJS State VS Props A state is mutable and maintains the data. We should avoid using more state to improve application performance. We can set the initial state in constructor and setState or forceUpdate functions can be used to update the state. A prop is immutable and props are read only, means we can't update props directly. State is becomes props when pass parent to child component. We can set the default props through defaultProps. ReactJs State and Props Example import React,{Co

Best Way To Learn ReactJS Component Lifecycle Methods, Hooks With Examples For Beginners, React JS Developer

ReactJS Component Lifecycle Overview: ReactJS Component Lifecycle methods are hooks which are the main part of react framework . ReactJS lifecycle divide mainly into three parts, Mounting, Updating, and Unmounting . In ReactJS, we'll use ES6 (EcmaScript) syntax. In this post we'll learn the importance of each and every lifecycle method, how and where can we use the lifecycle method in reactjs application. React Component LifeCycle Initial Rendering : ReactJs Component Lifecycle: initial rendering In initial rendering, getDefaultProps function is executed, it's used to set the default props value in case props doesn't pass from the parent component. In ES6, we have defaultProps which the replacement of getDefaultProps function. Lets see both syntaxes but we'll follow ES6 syntax. Next method is getInitialState which is used to set the initial state value. We have the constructor to set initial state in ES6. Mounting Initialization compon

React Redux Application Structure, Architecture and React Folder Structure Best Practices

React Redux Application Structure, Architecture and  React Folder Structure Best Practices: There some questions comes our mind when we are going to create a new react redux application structure from scratch. What folder structure should be followed especially when we are implementing a large react redux application . How to connect react with redux  What should be the naming convention of folder and react js files. What are the best practices of react redux project structure. The structure might be different for each of us but I am sharing the standard react redux application structure which is followed by most of the UI developers in IT industry. High Level React Redux Application Architecture There are many folders and files in above application screen shot, let discuss one by one. The application name is REACTWEBAPP and folders are config, public, script, server, src, reducers, sagas, store and package.json. Config: react redux application configurations

Reactjs Environment Setup Step by Step for Beginners and React JS Developer

ReactJS Overview: What is ReactJS , How to build website with react ReactJS is a JavaScript library developed by Facebook . It is used for handling the view layer for the website and mobile application . ReactJS is the most popular library in 2018 to build website with react , it helps to create responsive and fast performance application.  The latest version of  reactjs is v16 in which Facebook team added many new features. Advantages of ReactJS : ReactJS can be used at client side as well as server side, compatible with other frameworks. It uses virtual DOM which is a JavaScript object, this will improve application performance since DOM is faster than regular DOM. React component and data pattern improve readability, maintainability, and scalability which help to maintain a large application. ReactJS Library Limitations: ReactJS covers only view layer of the application not data flow layer. That’s why we are dependent on other libraries to build a website