Posts

Showing posts from April, 2024

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