Scribd
Upload
6 views12 pages

ReactJs Cheatsheet

React is a JavaScript library for building user interfaces, particularly single-page applications, and was created by Jordan Walke at Facebook in 2013. Key features include a component-based architecture, reusability, and the use of a Virtual DOM for efficient updates. The document also covers environment setup, JSX basics, component creation, state management, and event handling in React.

Uploaded by

Ibrahim Khalilullah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
6 views12 pages

ReactJs Cheatsheet

React is a JavaScript library for building user interfaces, particularly single-page applications, and was created by Jordan Walke at Facebook in 2013. Key features include a component-based architecture, reusability, and the use of a Virtual DOM for efficient updates. The document also covers environment setup, JSX basics, component creation, state management, and event handling in React.

Uploaded by

Ibrahim Khalilullah
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
You are on page 1/ 12
React.JS CheatSheet 1. INTRODUCTION TO REACT 1.1 What is React? + React is a JavaScript library used to build user interfaces (UIs). That means it helps you create the parts of a website that users can see and interact with. « React is especially good for building single-page applications (SPAs) — websites that update the content without reloading the entire page. For example, when you scroll Instagram, the page doesn't reload, but new content appears — that's similar to how React works. In simple words: + React helps you build websites that are fast, easy to manage, and don't reload every time something changes. 1.2 History and Features + Created by: Jordan Walke, a software engineer at Facebook « Released in: 2013 (open-sourced) « Used by: Facebook, Instagram, Netflix, WhatsApp Web, etc. Key Features: « Component-based: You build UI in small pieces called components. + Reusable: One component can be used in many places. + Virtual DOM: It updates only the changed part of the page instead of the whole page. « Fast and Efficient: Because of virtual DOM and smart updates. 1.3 Virtual DOM Explained + DOM stands for Document Object Model — it's like a tree structure of your HTML. + React creates a copy of the real DOM in memory. This copy is called the Virtual DOM. + When something changes, React compares the virtual DOM with the real DOM and only updates the parts that actually changed. + This makes the website faster, because it doesn't reload everything. 1. INTRODUCTION TO REACT 1.4 React vs Vanilla JS vs Other Frameworks SIE Other Frameworks (e.g., Angular, Vue) ery eee Component-based Nostructure _ Component-based cee) Very fast Medium Fast Leamingcurve Foy Easy Medium to Hard Reusability High Low High Cece Virtual DOM Full page reload Virtual DOM or optimized updates + Conclu eact offers a balanced approach — faster than plain JavaScript and easier to learn than some heavy frameworks like Angular. 2. ENVIRONMENT SETUP 2.1 Installing Node,js and npm + React apps need Nodejs and npm (Node Package Manager) to work. Steps: 1.Go to https://nodejs.org 2.Download the LTS version (Recommended for most users) 3.install it + After installing, open your terminal and check versions: « Ifyou see the versions, Node,js and npm are installed correctly. 2.2 Create React App (CRA) + React provides a tool called Create React App (CRA) to start building apps quickly. + To create a project: * 'Npx” runs a command without installing it globally. « “create-react-app” sets up everything for you. + “npm" start runs your app in the browser. 2.3 Project Structure + When you create a React app, you'll see a folder like this: app Saeene + public/index.html: Main HTML file « srcfinde: Starting point of your React app « src/App.js: Main component 2. ENVIRONMENT SETUP 2.4 Using Vite for Faster Setup « Vite is a modern build tool that's faster than CRA. « To create a Vite project: . Vite starts faster and is better for modern projects. 3. ISX BASICS 3.1 What is 3SX? + ISX stands for JavaScript XML. It lets you write HTML-like code inside JavaScript. Example: + This looks like HTML, but it's actually JavaScript code. 3.2 ISX Syntax Rules + Return only one parent element. cc « Use camelCase for attributes like className, onClick: 3.3 Embedding Expressions + You can write JavaScript inside JSX using {}. Example: 3.4 ISX Best Practices « Use meaningful names for variables and components. + Keep JSX clean and readable. « Avoid too much logic inside ISX. « Use fragments (<> ) if you don't want to wrap everything in a
. 4, COMPONENTS 4. Functional Components « Asimple way to create a component using a function. Jsx 4.2 Class Components + Another way using ES6 class (older way). 4.3 Component Naming and Structure + Always start component names with Capital letters. « Each component should be in its own file. 4.4 Props in Components + Props (short for properties) are used to pass data from one component to another. 4.5 Props Destructuring « Instead of props.name, you can do 4. COMPONENTS 4.6 Children Props + Props can also include inner HTML using props.children. 5. STATE MANAGEMENT 5.1 useState Hook « For functional components, we use the useState hook to manage data. 5.2 setState in Class Components + In class components, we use this.state and this.setState() 5.3 Lifting State Up « When two components need to share the same state, move the state to their common parent. 5.4 Passing State as Props + You can pass the current state value to another component using props. 6. EVENT HANDLING 6.1 Handling Events in React In React, we can handle user actions like clicks, typing, or hovering using event handlers. Example: Button click ve cement Note: We use camelCase like onClick instead of onclick. 6.2 Event 9 « In class components, we often need to bind the event handler to this. « In functional components, you don't need binding. 6.3 Synthetic Events + React uses a system called Synthetic Events. It wraps browser events to work the same way across all browsers. + It behaves like regular JavaScript events but works consistently everywhere. Example: | part 2 will be uploaded soon Did you find this post useful..? FOLLOW FOR MORE...

You might also like