Begin React 





What is React?

React is a JavaScript library used for creating user interfaces, mostly web applications.


Think of React as a tool that helps you build websites with small pieces (components) instead of one big lump of JavaScript and HTML.


 Why Use React? (Benefits)


  •  Reusable Components: Write once and use it everywhere.
  •  Fast Updates: React updates only the parts that change, not the whole page.
  • Community Help: Many developers use it, so help is easily found.
  • Simple Project Management: With component-based architecture, everything is neatly structured.


Building a React App with TypeScript

 

Step-by-Step

1️. Install Node.js

Download and install Node.js from:

    https://nodejs.org

 

2️. Build a React + TypeScript App

Open your terminal (Command Prompt, PowerShell, or VS Code's terminal) and run:


npm create vite@latest my-react-app -- --template react-ts

-my-react-app is the directory name. You can name it whatever you like.

 

3️. Enter your project


cd my-react-app


4️.install required packages


npm run install


5️.   Start the development server


npm run dev


Now your React application is up and running! 

Use the link that is shown in the terminal (usually http://localhost:5173).

 

 Flow of the React project

my-react-app/

├── node_modules/            # Installed packages

├── public/                  # Static files like favicon, logos, and files that are commonly used

│   └── vite.svg

├── src/                     # Main source code

│   ├── assets/              # Images, fonts, Icons, etc.

│   │   └── logo.png

│   ├── components/          # Your UI components (create this folder later)

│   ├── scripts/             # Utility JS/TS files (custom functions/helpers), Store how the project runs

│   │   └── sayHello.ts

│   ├── App.tsx              # Main component

│   ├── main.tsx             # Entry point (renders <App />)

│   └── index.css            # Global styles

├── .gitignore               # Files Git should ignore, Large and Sensitive data

├── package.json             # App metadata & dependencies, the way how the React application runs

├── tsconfig.json            # TypeScript configuration

└── vite.config.ts           # Vite configuration

 

 Sample React project snippet



 React Hello World  Code Flow:

  1. React is imported → So we can write React code.

  2. ListGroup is imported → It’s a custom component you made (like a reusable block).

  3. We create a function called App → This is your main screen or main component.

  4.  Inside App Return the UI:

    • A heading that says Hello World!

    • The ListGroup component (whatever it shows).

  5. The <>...</> is used to group both items without adding extra tags (it's called a Fragment).

  6.  Finally, we write export default App → So this component can be used to show the app in the browser.


 Other tip---

Version Control is what?

Version Control is a save mechanism for your code. It tracks all the changes you make in your project, so that you can:
 
  • Replay earlier versions 
  • Work easily with others 
  •  Keep your code history safe 
  • The most popular version control system is Git. 

 

 


Comments

Post a Comment

Popular posts from this blog

Linked List Data Structures

Image
  Linked List Previous and next pointers are the connectors that connect the nodes. In one node previous pointer become the   next node’s previous pointer. If we add node to the Linked List we can add it using the next pointer, and if we want to remove also we can remove it along with the node’s next pointer.   A linked list is a linear collection of elements, called nodes, where each node holds a reference to the next node in the sequence. Unlike arrays, linked list elements are not stored in contiguous memory locations. Instead, each node contains data and a pointer/reference to the next node. Types of Linked Lists   1. Singly Linked Lists:    In a singly linked list, each node points to the next node in the sequence. The last node points to null, indicating the end of the list. Singly linked lists are simple to implement and memory-efficient.   2. Doubly Linked Lists:     In a doubly linked list, each node has pointers to b...
Read more

Java OOPC -Encapsulation

Image
Encapsulation In real life capsule is based for the concept Encapsulation, We use capsule for the protection and security of the medicine that inside the capsule from   of environmental conditions and other things because that conditions generated unhealthy components.   In here when it comes to object oriented concept Encapsulation is that data hiding, protection and security. Further this concept we use for the variables.   We talk about the GET and SET methods thought the concept encapsulation,   Getters and setters   For the better security we use access modifier ‘private’   ,because in private modifier only let the specific class accessing. So private variables can use outside of the specific method using GET and SET methods.   Indeed we use private keyword for data security purpose but in some time some specific reasons we need to use those outside of the class we define it previously, Because of this reason we use getter...
Read more

Java OOPC - Interface

Image
  Interface Interface is keyword use in Java .Instead of using ‘class’ keyword using ‘interface’ we can create interface. As the same way creating a class we can create interface also.   Interface is also a class, but interface is not a class it work same as a class. Difference between class and interface ,interface can not   create object because of that interface even can not create constructor, But after Java 8 we can use constructors.   We can not do multiple inheritance. means that we can not inherit   more than one super class from sub class. Using extends we can not do multiple inheritance. But using the implements we can do multiple inheritance. Implements what inheritance do using the interface. So the purpose of using the interface is do the multiple inheritance. As we know we can not create the objects to the interfaces but using the upcasting we can create objects. In here object generate side be the class indeedly,   then that cla...
Read more