Tag: React Series

Forms in React

HTML form elements work a little bit differently from other DOM elements in React, because form elements naturally keep some internal state. For example, this form in plain HTML accepts a single name: <form> <label> Name: <input type="text"...

Lists and Keys in React

Before we start, let’s review how you transform lists in JavaScript. Given the code below, we use the map() function to take an array of numbers and double their values. We assign the new array returned by map() to the variable doubled and log it:...

Conditional Rendering in React

React gives us the freedom to create distinct components that encapsulate different behaviors and then render only on need depending on the state of your application. Conditional rendering in React works the same way conditions work in JavaScript...

Handling Events in React

Handling events with React elements is very similar to handling events on DOM elements. There are some syntactic differences: React events are named using camelCase, rather than lowercase.With JSX you pass a function as the event handler, rather...

State and Lifecycle

In the previous tutorials, we learned that the only way to update the UI is by invoking the ReactDOM.render() method. In this tutorial, we will look at the concept of state,and how we can use it to update the UI. We will do this by rewriting the...

React Components and Props

React Components and Props For a lay man perspective, components are pieces or bits that makes up a whole. In React, components let you split the UI into independent, reusable pieces, and think about each piece in isolation. Conceptually, components...

Introducing JSX

Consider this variable declaration: const element = Hello, world! This funny tag syntax is neither a string nor HTML. It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look...

Hello World Application in React

In the   past tutorials, we learnt the various ways of using the ReactJS library in our project, that is: by adding React directly from the CDN  to our HTML website or by using create-react-app command via the terminal. In this tutorial, we will...

React CDN Links

CDN Links Aside using the Create React App through the CLI to create a react application. React Js can also be used through the CDN as illustrated in this tutorial. Both React and ReactDOM are available over a CDN. The versions above are only meant...

Creating and Running React Projects With create-react-app

Create React App In the previous tutorial, we explored how react can be added to a HTML website from the CDN. In this section we will explore the second and probably the most popular way of using the React JS library: React as a single page...

Vivvaas’ Corner

Learn skills that matters from a community of talented developers and writers whose joy is to write in a way that you will understand.