About

Showing posts with label ReactJS Tutorial. Show all posts
Showing posts with label ReactJS Tutorial. Show all posts

Tuesday, January 24, 2023

ReactJS Tutorial - 20 - Styling and CSS Basics


 

Basics of Styling and CSS in React

ReactJS Tutorial - 19 - Index as Key Anti-pattern


 

In this video we tutorial Index as Key Anti-pattern in react js

ReactJS Tutorial - 18 - Lists and Keys


 

A “key” is a special string attribute you need to include when creating lists of elements. Keys give the elements a stable identity. Keys help React identify which items have changed, are added, or are removed. This results in a much more efficient update of the user interface.

ReactJS Tutorial - 17 - List Rendering


 

When you build web applications, a common scenario is to display a list of items. For example, a list of names, a list of products, a list of courses and so on. So what we want to is to repeat some HTML for each item in the list. In this video, lets take a look at list rendering in React.

ReactJS Tutorial - 16 - Conditional Rendering


 

When you are building React applications, you may often need to show or hide some HTML based on a certain condition. Luckily, conditional rendering in React works the same way conditions work in JavaScript. We have 4 different approaches and we will take a detailed look at all of them. We have if/else, element variables, ternary conditional operator and short circuit operator (&&).

ReactJS Tutorial - 15 - Methods as props


 

In this video, we take a look at passing methods as props in React components

ReactJS Tutorial - 14 - Binding Event Handlers


 

In this video, lets learn how to bind event handlers in React components.

ReactJS Tutorial - 13 - Event Handling


 

Any web application you create typically tends to have user interaction. When the user interacts with your app, events are fired. For example, mouse clicks, mouse over, key press, change event and so on. The application must handle such events and execute the necessary code. In this video, lets see how to handle events in React.

ReactJS Tutorial - 12 - Destructuring props and state


 

This video we tutorial Destucturing props and state in React JS

ReactJS Tutorial - 11 - setState


 

this video we tutorial setState in React JS

ReactJS Tutorial - 10 - State


 

State is similar to props, but it is private and fully controlled by the component.

ReactJS Tutorial - 9 - Props


 

props short for properties, is the optional input that your component can accept. It also allows the component content to be dynamic.

ReactJS Tutorial - 8 - JSX


 

JavaScript XML (JSX) is an extension to the JavaScript language syntax. With React, it's an extension to write XML-like code for elements and components. And just like XML, JSX tags have a tag name, attributes, and children

ReactJS Tutorial - 7 - Hooks Update


 

this video we tutorial ReactJS Hooks Update

ReactJS Tutorial - 6 - Class Components


 

Class syntax is one of the most common ways to define a React component. While more verbose than the functional syntax, it offers more control in the form of lifecycle hooks. Creating a class component is pretty simple; just define a class that extends Component and has a render function.

ReactJS Tutorial - 5 - Functional Components


 

The simplest way to define a component is to write a JavaScript function. A valid React component because it accepts a single “props” (which stands for properties) object argument with data and returns a React element. We call such components “function components” because they are literally JavaScript functions.

Saturday, January 21, 2023

ReactJS Tutorial - 4 - Components


 

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen. There are two types of components - Stateless Functional Components and Stateful Class Components

ReactJS Tutorial - 3 - Folder Structure


 

Exploring the folder structure of a Create React App generated project.

ReactJS Tutorial - 2 - Hello World


 

Create React App is a comfortable environment for learning React, and is the best way to start building a new single-page application in React. It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production.

ReactJS Tutorial - 1 - Introduction


 

React is an open source javascript library for building user interfaces. React is a project created and maintained by Facebook. React has more than a 100 thousand stars on GitHub and a huge community behind it. React has become increasingly popular among developers and is also one of the most sought out skill-sets by companies right now. React has a component based architecture. This lets you break down your application into small encapsulated parts which can then be composed to make more complex UI. React is declarative. React will make it painless for you to create complex UIs by abstracting away the difficult parts. React will handle efficiently updating and rendering just the right components in your application when your data changes. DOM updates which is one of the more expensive operations is handled gracefully in React.

Twitter Delicious Facebook Digg Stumbleupon Favorites More