React Fundamentals - Day Three

Introduction

In the third day of the React article series, we are going to learn about React Fundamentals. Before moving to fundamentals, please read my previous articles,

React Fundamentals

Following are key fundamentals of React, we are not going deep in each fundamental. In this article we will just give you an overview of each one by one:

React

JSX

JSX is known for being a language that lets you "write HTML inside JavaScript." JSX is an external, domain-specific language that is optimized for generating XML-like documents.

Components

The most important concept to understand in React is the component. A React application is a composed set of components. In React, each component is a bundle of HTML, CSS and JavaScript code which identifies one particular block of your application.

Props

Props, or properties, are the constant immutable model values that React component uses to render. Props are derived from HTML element properties. Working with React the next thing you will run into are props. Props are like function arguments.

States

In React, each component has a state. A state is an object with values. It determines components' rendering and behavior.

Events

Events are what make client-side user interfaces useful. DOM events are the events generated by the browser, things like button click events, change of ends for text inputs, and form submission events.

Refs

It stands for reference. It is used to return references to a particular element or component returned by render ().

Keys

Keys are the elements which help React to identify components uniquely. The key prop uniquely identifies a ReactElement. It's used with elements in arrays.

Router

Routers provide screen navigation in our React Single Page Application. React doesn’t come with a standard router. We need to install react-router-dom separately.

Summary

I hope that beginners, as well as students, understood the React Fundamentals. If you have any suggestions regarding this article, please contact me. 

Stay tuned for other concepts of React coming soon!

“Learn It, Share it.”