Posts

Instaling MUI X Charts for React

Image
MUI X Charts is a fast and extendable library of react chart components for data visualization. Last post update: Abril 15. 2024. For add charts you will need at least  Installing main depencences:           npm install @mui/material @emotion/react @emotion/styled Then you must install "x-charts" just for charts components:            npm install @mui/x-charts You have to create a index component for example:            import { StyledEngineProvider } from "@mui/material"; import React from "react"; import Grafica from "./Grafica"; import { PageProps } from "@/types"; const Index = () => {     return (         <>             <div className="graficas">                 <div className="contenedor-grafica">                     <React.StrictMode>                         <StyledEngineProvider injectFirst>                             <Grafica mivalor={mivalor} />                      

MUI X Charts avanced React UI for complex use cases

Image
MUI X is a collection of advanced React UI components for complex use cases. Use the native integration with Material UI or extend your design system. MUI X is a collection of advanced UI components, including: Data Grid Date and Time Pickers Charts Tree View References: https://mui.com/x/react-charts/

What is Node JS

Image
 Node.js is a cross-platform, open-source JavaScript runtime environment that can run on Windows, Linux, Unix, macOS, and more. Node.js runs on the V8 JavaScript engine, and executes JavaScript code outside a web browser. Node.js lets developers use JavaScript to write command line tools and for server-side scripting. The ability to run JavaScript code on the server is often used to generate dynamic web page content before the page is sent to the user's web browser. Consequently, Node.js represents a "JavaScript everywhere" paradigm,[6] unifying web-application development around a single programming language, as opposed to using different languages for the server- versus client-side programming. Node.js has an event-driven architecture capable of asynchronous I/O. These design choices aim to optimize throughput and scalability in web applications with many input/output operations, as well as for real-time Web applications (e.g., real-time communication programs and brows

How to create a React application with Vite and TypeScript from scratch

Image
 What is vite? Vite is a high-performance asynchronous and event-driven framework for building web applications in the Node.js runtime. It provides a fast development experience by leveraging modern JavaScript features such as ES modules and native browser support for dynamic imports. Vite is known for its quick startup time and efficient hot module replacement (HMR) capability, making it an attractive choice for developers looking to build modern web applications. What I need?  For use React you will need have installed node JS. Proccess 1.- Create a new folder If you use Linux Create a new folder with write permision example:           sudo mkdir /home/benjamin/react-demo/ Give write permission to folder           sudo chmod -R 777 /home/benjamin/react-demo/ 2.- Create vite and Type script project Run this command inside the newly created folder.           npm create vite@latest You will have to select Framework: React You will have to select variant: TypeScript If everything goes we

What is React?

Image
React is an open-source JavaScript library for building user interfaces or UI components, primarily for single-page applications where the user interacts with the application without having to wait for a whole page to reload. It was developed and is maintained by Facebook. Key features of React include: Declarative Syntax: React uses a declarative syntax, making it more intuitive and easier to understand. Developers describe how the UI should look based on the application state, and React takes care of updating and rendering the components efficiently. Component-Based Architecture : React follows a component-based architecture. UIs are broken down into reusable and modular components. Each component manages its own state, and these components can be combined to create complex UIs. Virtual DOM : React uses a virtual DOM (Document Object Model) to optimize the updating process. Instead of updating the entire DOM when there's a change, React first updates a virtual representation of