⚠️ This guide is being written, not is finished, but i’m working to end this

React JS is a front-end JavaScript library used for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React JS allows us to create reusable UI components. It uses a component architecture, with each component having its own state and props.

Some of the main features of React JS are:

  1. It uses a virtual DOM instead of the real DOM. This makes it very fast.
  2. It handles state efficiently with its setState method.
  3. It renders UI elements based on the state changes.
  4. It uses server-side rendering.
  5. It follows a unidirectional data flow or data binding.
  6. It uses reusable/composable UI components to develop the view.
  7. It uses an open-source library called React Native to build mobile apps.
  8. It easily integrates with other frameworks (Angular, Vue, etc.) and libraries (Redux, etc.).
  9. It uses JSX, which makes the code easy to read and write.
  10. It is easy to test and debug.

Root and starting

Just right now, react is a library. And this needs a simple js to run and introduce react syntax in your web site. This file is called main.js and includes a function to render everything that react needs.

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'

// React DOM is the responsible to build and incorporate React into your site
// createRoot is a function that receive an html element to paint or render elements.
// and then this element render a "Component" called (App)
ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

Components

Components it’s the most important thing what you need to build a react app. Everything in React is builded as a component, for example a button, checkbox, input, label, titles, navbar, banner, etc. Each component includes