React Basics

-

What is React?

It is a library for building user interfaces

Reference : https://www.udemy.com/course/react-the-complete-guide-incl-redux/learn/lecture/38345144#overview 

Demo

  

Exercise

  • before app here.
  • solution here.

 

Repo

How to create a new react app ?

 can create a new project locally as well

 

then

 

final

 

NPM vs NPX

 

Why do we need starter code ?

 

Create-React-App or Vite for a new project ?

https://www.reddit.com/r/reactjs/comments/yuxa16/createreactapp_or_vite_for_new_project/

Vite and Create React App (CRA) are both tools for creating React projects, but they differ in their approach and performance. Vite is a newer, faster build tool that uses native ES modules and pre-bundling, resulting in faster development and build times. CRA, on the other hand, is a more established tool that uses Webpack and provides a zero-configuration setup, making it easier for beginners. 
 

Key Differences:

  • Build Tool:- CRA uses Webpack, while Vite uses native ES modules and pre-bundling. 
    • webpack is a module builder  
  • Configuration:- CRA is known for its zero-configuration setup, while Vite offers more flexibility and customization through a vite.config.js file. 
  • Development Experience:- Vite's development server is significantly faster due to its use of ES modules and pre-bundling, leading to near-instantaneous hot module replacement (HMR). 
  • Performance:- Vite generally results in smaller bundle sizes and faster build times compared to CRA. 
  • Ecosystem:-  CRA has a larger, established ecosystem with extensive documentation and community support, while Vite's ecosystem is growing rapidly. 
  • Framework Support:- CRA is primarily for React, while Vite supports multiple frameworks and libraries. 

When to use which ?

  • Vite :- For projects where speed and flexibility are priorities, and where you're comfortable with a slightly more involved setup. Vite is also a good choice for larger projects where faster build times and development experience are crucial. 
  • CRA :- For projects where ease of use and a no-configuration approach are desired, especially for beginners or projects where you don't anticipate needing extensive customizations. CRA also provides a solid foundation with sensible defaults and best practices. 

In summary: Vite offers a faster and more flexible development experience, while CRA provides a simpler and more established approach for building React projects. The best choice depends on your project's specific needs and priorities.
 

 

 

Comments

Post a Comment

Popular posts from this blog

Agentic AI Course : Week 1

-
Image
8 weeks https://edwarddonner.com/2024/11/13/llm-engineering-resources/  6 week Agentic AI Course https://github.com/ed-donner/agents the file .env has all the keys select kernel https://github.com/ed-donner/agents/blob/main/1_foundations/1_lab1.ipynb import os openai_api_key = os.getenv( 'OPENAI_API_KEY' ) from openai import OpenAI openai = OpenAI() messages = [{ "role" : "user" , "content" : "What is 2+2?" }] response = openai.chat.completions.create(      model= "gpt-4.1-nano" ,      messages=messages      ) print (response.choices[ 0 ].message.content) Day 2 : what are AI Agents? 5 different patterns for agentic systems https://lavnish.blogspot.com/2025/05/essential-design-patterns-for-building.html In General Day 3 comparing different models  https://www.vellum.ai/llm-leaderboard syntax to call diff LLMs openAI , anthropic, gemini, deepseek, groq https://github.com/ed-donner/agents/blob/main/1_foundations/2_lab2.ipynb...
Read more

LLM Engineering course : Day 1

-
Image
 Anaconda Power Shell    this will open , way you know if it is a anaconda power shell by seeing "base" Then you can install the full environment    then to activate use command "conda activate llms"     Open Ques "what is environment.yml" Then activate the conda environment and open jupyter lab   you can start with virtualenv as well (all details in readme) Video 11 : Day 1 every AI has 2 types of plan 1) pro plan with UI monthly subscription 2) API pricing , pay per request, for OPEN API need to put in 5$ pre payment (can use gpt4-o-mini for less cost)  (all details in readme)  Video 11:  store keys in .env files (all details in readme)  Video 14 there are two types of prompt   Video 15 OpenAI came up with a standard way of interacting with LLMs which is now standard for many LLMs. It is a list of dictionaries. Use completions API https://platform.openai.com/docs/guides/completions   For websites that use Java...
Read more

LLM Engineering : Week 2

-
Day 2.1 setup  anthropic api key google api key (more complex) update .env file     What is Temperature ?  Pass value between 0 to 1. 1 is most creative , 0 is least There is a slight difference in Claude API and OpenAI  in claude API we pass system message and user message separately in claude we also give context  if you want to stream , in claude there is an extra method , in openAI there is a boolean attribute.    Day 2.2 : Gradio         Day 2.3         Day 2.4 Day 2.5          
Read more