React for Beginners

 This course will teach you React from Scratch

Node Version 18.X.X

Code Editor VSCODE

Prerequisite: HTML, CSS, JavaScript

So Let's Start

    1. Using Prettier Extension in Vs Code (code formatting)

        Setting up : Format on Save, File>Preferences>Setting>Search(format on save)>check

2. There are two ways to create react app

        a) Using Create-React-App(CRA) : npx create-react-app app_name

        b) Using Vite : npm create vite@latest          or          npm create vite@4.1.0

I'm Using Vite tool to create a react project:

   ->  npm create vite@4.1.0

    -> hit y

    -> type app name and select framework and language (react-app, React, TypeScript) 

    -> npm install

    -> To lunch the project: npm run dev

dsf



Comments

Post a Comment

Popular posts from this blog

Setup node framework | Express

Image
 First step to start with express is to install express in our project.     >  npm install express  This command will add express dependency into package.json file and download packages from internet. Let's create a new express server: const express = require ( "express" ); const app = express (); const PORT = 3000 ; app . listen ( PORT , function (){     console . log ( "Server started on port " + PORT ); });     Here is an error Cannot GET / becoz we do set the request or response from the server: app . get ( "/" , function ( request , response ){     console . log ( request ); }); We can see now all the request parameters in console. To send the response to the client :  app . get ( "/" , function ( req , res ){     res . send ( "Hello Express..." ); }); Now we can see the output that is a response from the server on / location. You can also send HTML as a response :  app . get ( "...
Read more

calculator app using node express

Image
 Calculator App Q. How to get form data in express server? Ans: Use Body-Parser Module to get html form data into the server.      Example:  app . get ( "/" , function ( req , res ){     res . sendFile ( __dirname + "/index.html" ); }); app . post ( "/" , function ( req , res ){     res . send ( "Data sent !" ); }); If we wanna try to get from data we get form values in PayLoad section in Chrome Developer Tool                    Here we can see :                    firstNumber : 2                    secondNumber: 6                  these numbers are bound to forms input fields To use these information in server We Need BodyParser     > npm install body-parser Then include it in your code:     > con...
Read more