<?xml version="1.0" encoding="utf-8" standalone="yes"?><rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom"><channel><title>Reactjs on Ravindra Devrani</title><link>https://ravindradevrani.com/tags/reactjs/</link><description>Recent content in Reactjs on Ravindra Devrani</description><generator>Hugo</generator><language>en-us</language><lastBuildDate>Wed, 05 Aug 2026 11:20:10 +0530</lastBuildDate><atom:link href="https://ravindradevrani.com/tags/reactjs/index.xml" rel="self" type="application/rss+xml"/><item><title>Authenticating a react and node js app</title><link>https://ravindradevrani.com/posts/react-app-authentication-2026/</link><pubDate>Wed, 05 Aug 2026 11:20:10 +0530</pubDate><guid>https://ravindradevrani.com/posts/react-app-authentication-2026/</guid><description>&lt;p>To work with backend (which is created in node js, sqlite and prisma) you need to follow &lt;a href="https://ravindradevrani.com/posts/nodejs-jwt-and-cookie-authentication-using-typescript-2026">this post&lt;/a>.&lt;/p>
&lt;p>💻 &lt;a href="https://github.com/rd003/NodeReactAuth">Source code of frontend app&lt;/a>&lt;/p>
&lt;p>💻 &lt;a href="https://github.com/rd003/NodeReactAuth/tree/main/frontend">Source code of this fullstack app&lt;/a>&lt;/p>
&lt;p>To create a react app you need to execute this command in terminal:&lt;/p>
&lt;div class="highlight">&lt;pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;">&lt;code class="language-sh" data-lang="sh">&lt;span style="display:flex;">&lt;span>npm create vite@latest
&lt;/span>&lt;/span>&lt;/code>&lt;/pre>&lt;/div>&lt;p>It asks few things:&lt;/p>
&lt;ul>
&lt;li>Project name: &lt;code>frontend&lt;/code>&lt;/li>
&lt;/ul>
&lt;p>&lt;strong>Note:&lt;/strong> Choose a meaninful name. Since it is part of my fullstack app, one directory is &lt;code>backend&lt;/code>, so another one is going to be named &lt;code>frontend&lt;/code>.&lt;/p></description></item><item><title>ReactJs CRUD with typescript and json server</title><link>https://ravindradevrani.com/posts/reactjs_crud_with_json_server/</link><pubDate>Wed, 22 Jul 2026 11:21:41 +0530</pubDate><guid>https://ravindradevrani.com/posts/reactjs_crud_with_json_server/</guid><description>&lt;p>TODO app is the most common way to understand basic crud (create, read, update and delete) feature of the language or framework or a ui library. But I prefer plain CRUD with form and table. In this way one can learn to use form along with validation also to display them in a table. It is a good way to learn CRUD for data driven appications like admin-panel for entries.&lt;/p></description></item><item><title>React Hook Form With Zod Resolver (for JS and TS both)</title><link>https://ravindradevrani.com/posts/react-hook-form-with-zod-resolver/</link><pubDate>Fri, 17 Jul 2026 12:37:10 +0530</pubDate><guid>https://ravindradevrani.com/posts/react-hook-form-with-zod-resolver/</guid><description>&lt;p>So&amp;hellip;.What is:&lt;/p>
&lt;ul>
&lt;li>
&lt;p>&lt;strong>React hook form:&lt;/strong> It is a popular light library to create and manage forms. It is very performative and comes with built-in
validation support.&lt;/p>
&lt;/li>
&lt;li>
&lt;p>**Zod **: It is a schema validation library that lets you define the shape of your data and validate it at runtime. It makes easier to
do validation.&lt;/p>
&lt;/li>
&lt;/ul>
&lt;p>Create a react app with JS or TS whatever you prefer. After that install these packages in a react app:&lt;/p></description></item></channel></rss>