React JS or just React is a very popular Javascript framework created by a software engineer at Facebook. The main focus of React is to build user interfaces (UI), with state management and rendering this state to the DOM.

Why learn React?

As wanting to fulfil the full stack developer skillset I am missing a front-end framework and React suits this spot due to its popularity and capabilities.

Having existing Javascript knowledge with jQuery and some Vue.js React doesn’t feel too strange for me when i got started with it.

I am well versed in the Backend and now know Tailwind CSS, so using React with Inertia, TailwindCSS and Laravel seems solid.

State management

State management refers to the state or rendering of the DOM from the data it possesses. When this data changes rendering will instantly occur. As React is declarative you only need to provide the data and the UI will update.

This quote from the React docs explains it very well

In React, you don’t directly manipulate the UI—meaning you don’t enable, disable, show, or hide components directly. Instead, you declare what you want to show, and React figures out how to update the UI.

The JSX format

JSX is a syntax extension to Javascript and allows you to write React elements with the full power of Javascript. The best part of using JSX is you mix in HTML and Javascript as one, meaning you dont need separate files.

An example of JSX:

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Michael',
  lastName: 'Jordan'
};

const element = (
  <h1>Hello, {formatName(user)}!</h1>
);

Using a modern smart IDE like JetBrins PHPstorm/Webstorm makes writing in JSX format a breeze with suggestions and auto-complete.

Component based

React is very big on components and component hierarchy. This makes development faster and less repetitive, passing the state or data through components keeps the code base clean.

There are many great, comprehensive component frameworks for React that will speed up development greatly.

Libraries

Readily available for use with React is a massive assortment of libraries to expand and speed up your development. Importing these libraries are incredibly easy, more so if using a modern IDE.

React icons is an example of this, where you get access to popular icons.