.js is JavaScript, plain and simple. .ts is Typescript , Microsoft’s way of adding “concrete” types to JavaScript .jsx is JavaScript but with JSX enabled which is React’s language extension to allow you to write markup directly in code which is then compiled to plain JavaScript with the JSX replaced with direct API calls to React.createElement or whatever API is targeted .tsx is similar… Continue reading Difference Between tsx and jsx in React
Tag: react js
How to use a mapping object to replace values in a data array of objects
The requirement was to show abbreviated values for the shipping item label values sourced from the NetSuite side in a React JS web application. For this, I created a map object and stored the original names and abbreviations as key-value pairs. Used a map function to replace the values in the data object before rendering.… Continue reading How to use a mapping object to replace values in a data array of objects
How to create a user in the firebase using authentication function using react.js
Set Up Firebase Project: Go to the Firebase Console and create a new project. Set up Firebase Authentication in your project. Install Firebase SDK: In your React.js project, install the Firebase SDK using npm Command for installing firebase is “npm install firebase“ 3. Configure Firebase in Your React App: Create a Firebase configuration file, e.g.,… Continue reading How to create a user in the firebase using authentication function using react.js
Using React JS to save the values in URL params
We can set the values in the URL as params for saving it. By using this even after render the saved values will be there.Created a test-component for Filter section. By using these filters we are filtering the Products on the basis of Colors, Sizes, Price, Item Name. Here useParams in code const useParams =… Continue reading Using React JS to save the values in URL params
Styling in Next.js(React Js)
Styling in Next.js offers flexibility, and you can choose from various approaches. There exist 2 popular approach. CSS-in-JS with styled-components and traditional CSS with CSS modules 1.CSS-in-JS with Styled-Components: // components/Button.js import styled from ‘styled-components’; const StyledButton = styled.button`padding: 10px 15px;font-size: 16px;color: white;background-color: ${(props) => (props.primary ? ‘blue’ : ‘green’)};border: none;border-radius: 5px;cursor: pointer; &:hover {background-color:… Continue reading Styling in Next.js(React Js)
How to save data to a firebase database (firestore) using firebase function using ReactJS
In Cloud Firestore, data is stored in collections. To add data to Firestore, import the Collection and addDoc functions. We also import the db initialized in the firebase.js file. When the button is clicked, the Cloud Firestore creates a collection (we have named it todos) and adds data as a document to the todos collection. For importing addDoc and Collection we first have to initialize the app… Continue reading How to save data to a firebase database (firestore) using firebase function using ReactJS
What is hooks and type of hooks used in the react.Js
React Hooks are simple JavaScript functions that we can use to isolate the reusable part from a functional component. Hooks can be stateful and can manage side-effects. React provides a bunch of standard in-built hooks: useState: To manage states. Returns a stateful value and an updater function to update it. useEffect: To manage side-effects like… Continue reading What is hooks and type of hooks used in the react.Js
How to create a React-JS application and host it on the NetSuite file cabinet
We can use the ‘Vite.js’ development tool for creating a React-JS application and deploying it to the NetSuite file cabinet. To install Vite, use the command in CMD: To create a new Vite react project(replace ‘project-name’ with actual project name): You will be able to select the framework (react) and variant(typescript) executing the previous command.… Continue reading How to create a React-JS application and host it on the NetSuite file cabinet
Add Background image from external source(backend) in Next JS/Reach JS
While we are connecting the leading frontend technologies like Next js, Vue js , React etc with Net Suite, WordPress like headless sources, its important to know that to add background images to the frontend via backend. In my scenario, i have to set the background image of a swiper carousel from the backend. The… Continue reading Add Background image from external source(backend) in Next JS/Reach JS
Advantages of Next JS as a frontend Framework.
As React became the most widely adopted web framework, encompassing over 40% of developers in 2021 according to Statista, Next.js adoption has also grown dramatically. Vercel, the company that maintains Next.js, cites over 6 million downloads since its launch and 50% usage growth in the top ten-thousand websites for the period of October 2020 to… Continue reading Advantages of Next JS as a frontend Framework.