Hooks in React. The latest feature since React 16.8 Class-based components are a little bit complex but the only way to use states and lifecycles. You have to create a boilerplate code to maintain the states and bind functions, and then there are methods like componentDidMount, UnMount, etc. If you are creating a large app... » read more
How to use PHP with React to create a Feedback form So, let’s start from the basics. Creating the react app If you haven’t installed the create-react-app on your PC, you should install it. Go to your command prompt and enter the following commands to access your www directory. Now, enter npx create-react-app lesson17 lesson17... » read more
Integrating React with other JavaScript libraries The biggest difference between React and JavaScript is the way they interact with the DOM. React has no idea of any changes made to the DOM outside of its scope. If jQuery or another library manipulates the same DOM nodes, React won’t be able to recover from the unknown... » read more
How to create and handle forms in React JS frameworks make your life much easier when it comes to forms, as they are provided to you with form validation out of the box. But for some weird reason, React wants us to handle forms ourselves. In this lesson, you are going to learn about React... » read more
Conditional rendering in React Let’s create a simple class-based component that has only one state – pet. This component will render a button, which when clicked, changes the state of the pet. If the pet is a cat, it will be changed into the dog, and if it is set to a dog, the state... » read more
How do we handling events in React? You may feel comfortable working with events in JavaScript or jQuery, where you write imperative code to handle the events. However, React has a slightly different approach to handle that. Rather than selecting the relative DOM elements and attaching event functions to these, React wraps these in their own... » read more
React state and life cycle methods The state is different from props in the sense that props is a way to pass data from one component to another. It cannot be changed by the component receiving the props. According to the React documentation, props are immutable which means you can’t change the value of props.... » read more
How to Validate Props in React Data handling within a DOM tree is quite beneficial as it takes away the burden from the app and increases the speed of rendering elements. There are a few techniques you can use when working with data in React components. For the sake of simplicity, we create a functional... » read more
What is JSX? JSX is an XML-like syntax extension for JavaScript. It doesn’t have any defined semantics and browsers don’t understand JSX. To render React components to DOM, we need a preprocessor also known as a transpiler to transform JSX to standard JavaScript. Let’s start with a simple example. let hello = <h1>This is a... » read more
What are nested components in React? In lesson 5, we created a simple component using classes in JavaScript, whereas, in lesson # 6 we learned to create a component using functions. For the sake of review, let’s create two components using functions and classes. Index.js import React, { Component } from 'react' import ReactDOM from... » read more
How to Style React components In the previous lesson, we have created a React component that displays a recipe of Taco Slaw with an image. Let’s review its file structure to understand where we need to put our CSS file(s). For the sake of simplicity, we will create a file ‘style.css’ in the root directory.... » read more
Importing and exporting React components So far, we have learned how to write our React and JSX code in a single file – index.js But remember, one of the main benefits of using React is to create components. Now, putting every component inside a single file isn’t practical or good practice. React has a convention... » read more
Creating functional components in React First, let’s install the React development tools or extensions for your web browser. You can install the new development tools from the Chrome Web Store. Click on the ‘Add to Chrome’. After the installation, you can go to the console area to find out a new tab for React. The... » read more
Creating your first component in React React components are the core building blocks of the React application. React components are created when you extend from the React’s component class. To create a component in the React, you must be familiar with import/export, and classes in the JavaScript ES6. React application folder Structure Once you have... » read more
Write your first program in React – the easy way To work with React in the web browser, we need to include two libraries: React and ReactDOM. Prior to version 0.14, ReactDOM was part of React and only recently they were separated as two different libraries to facilitate React Native. ReactDOM contains ReactDOM.render() method which... » read more