React JS Full Tutorial In Tamil

React JS Basic Concepts 12 lectures 01:39:43 React Introduction preview React Introduction

• React is a JavaScript library for building user interfaces.
• It’s ‘V’ in MVC (Model View Controller ) . ReactJS is an open-source, component-based front end library responsible only for the view layer of the application.
• React is created by Facebook.
• React is used to build single page applications.

Single Page Application • A single-page application ( SPA ) is a web application or website that interacts with the web browser by dynamically rewriting the current web page with new data from the web server. •Instead of the default method of the browser loading entire new pages. •The goal is faster transitions that make the website feel more like a native app.Native App • A native app is one that is installed directly on the smartphone and can work, in most cases, with no internet connectivity depending on the nature of the app. • A web app works via a web browser on the smartphone but requires either a cell signal or wi-fi to function. Add React To Your Website Within 1 min The quickest way start learning React is to write React directly in your HTML files. Node JS and NPM Installation •Recommended NodeJS and npm for using ReactJS in your system / PC.•npm – node package manager•Open-source developers use npm to share software.•npm is the world's largest Software Library •8 Lakhs code packages . •npm is installed with Node.js •This means that you have to install Node.js to get npm installed on your computer. Create React App in Visual Studio Code You must have Nodejs 8.10 above version and npm 5.6 above version in your system. After install it for creating a react app you comand the below line in your command prompt. npx create-react-app my-app cd my-app npm startEditing your react code in visual studio code command the below line in your command prompt. cd my-app code . React ES6 • ES6 stands for ECMA Script 6 version• ECMAScript is the standardization of Javascript programming language.• Use of ES6 features we Write Less and Do More. Some of the new features like: Classes Arrow Functions Variables (let, const, var)Features of ES6 • CLASS - A class is used to bind data as well as methods together as a single unit. Object acts like a variable of the class. • ARROW – To write a shorter syntax for the function we use ARROW . • VAR – If we use outside the function its called global variable . If we use inside the function its called local variable. • CONST – Once we assign a variable as constant we never change it. • LET - If you use var inside a for loop or any other block , the variable also available outside of that block or loop , So we use “LET” for overcoming from this problem.If we use variable as let in block or loop , then the value only available inside the block only React JSX • With JSX code vs without JSX code• Expressions in JSX• Wrapping elements or Children in JSX • Styling in JSX• Attributes in JSX• Comments in JSX• JSX stands for JavaScript XML.• JSX allows us to write HTML in React.• JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() . React Functional Components Every application you will develop in React will be made up of pieces called components. Components make the task of building UIs much easier. We have lot of individual components like a single web page contain (search bar,menu bar,nav bar,content,article etc;)Merge all of these individual components to make a parent component which will be the final UI.Two types of components 1.Functional Component 2.Class Component React Class Components Every application you will develop in React will be made up of pieces called components. Components make the task of building UIs much easier. We have lot of individual components like a single web page contain (search bar,menu bar,nav bar,content,article etc;)Merge all of these individual components to make a parent component which will be the final UI.Two types of components 1.Functional Component 2.Class Component React Props • Props stand for " Properties ." • React allows us to pass information to a Component using Props. • Props are immutable so, we cannot modify the props from inside the component.• Props are basically kind of global variable or object. It is an object which stores the value of attributes of a tag and work similar to the HTML attributes.• We can access any prop from inside a component’s class using the below syntax. this.props.propName; React State •React components has a built-in state object. •To define a state, you have to first declare a default set of values for defining the component's initial state. •To do this, add a class constructor which assigns an initial state using this.state •The ' this.state ' property can be rendered inside render() method. this.state.propertyname •If you want to change a value in the state object, Use the below method this.setState()•When a value in the state object changes, the component will re-render, so,the output will change according to the user value(s). React List • Lists are used to display data in an ordered format and mainly used to display menus on websites like navigation bar , menu bar etc; • Let us now create a list of elements in React.• To do this, we will traverse the list using the javascript map() function and updates elements to be enclosed between elements.• Finally we will wrap this new list within elements and render it to the DOM. React Keys

• A “key” is a special string attribute you need to include when creating lists of elements in React.
• Keys are used in React to identify which items in the list are changed, updated or deleted. In other words we can say that keys are used to give an identity to the elements in the lists.
• It also helps to determine which components in a collection needs to be re-rendered instead of re-rendering the entire set of components every time.

React JS Basic Concepts. 12 lectures 01:39:43 React Introduction preview React Introduction

• React is a JavaScript library for building user interfaces.
• It’s ‘V’ in MVC (Model View Controller ) . ReactJS is an open-source, component-based front end library responsible only for the view layer of the application.
• React is created by Facebook.
• React is used to build single page applications.

Single Page Application • A single-page application ( SPA ) is a web application or website that interacts with the web browser by dynamically rewriting the current web page with new data from the web server. •Instead of the default method of the browser loading entire new pages. •The goal is faster transitions that make the website feel more like a native app.Native App • A native app is one that is installed directly on the smartphone and can work, in most cases, with no internet connectivity depending on the nature of the app. • A web app works via a web browser on the smartphone but requires either a cell signal or wi-fi to function. Add React To Your Website Within 1 min The quickest way start learning React is to write React directly in your HTML files. Node JS and NPM Installation •Recommended NodeJS and npm for using ReactJS in your system / PC.•npm – node package manager•Open-source developers use npm to share software.•npm is the world's largest Software Library •8 Lakhs code packages . •npm is installed with Node.js •This means that you have to install Node.js to get npm installed on your computer. Create React App in Visual Studio Code You must have Nodejs 8.10 above version and npm 5.6 above version in your system. After install it for creating a react app you comand the below line in your command prompt. npx create-react-app my-app cd my-app npm startEditing your react code in visual studio code command the below line in your command prompt. cd my-app code . React ES6 • ES6 stands for ECMA Script 6 version• ECMAScript is the standardization of Javascript programming language.• Use of ES6 features we Write Less and Do More. Some of the new features like: Classes Arrow Functions Variables (let, const, var)Features of ES6 • CLASS - A class is used to bind data as well as methods together as a single unit. Object acts like a variable of the class. • ARROW – To write a shorter syntax for the function we use ARROW . • VAR – If we use outside the function its called global variable . If we use inside the function its called local variable. • CONST – Once we assign a variable as constant we never change it. • LET - If you use var inside a for loop or any other block , the variable also available outside of that block or loop , So we use “LET” for overcoming from this problem.If we use variable as let in block or loop , then the value only available inside the block only React JSX • With JSX code vs without JSX code• Expressions in JSX• Wrapping elements or Children in JSX • Styling in JSX• Attributes in JSX• Comments in JSX• JSX stands for JavaScript XML.• JSX allows us to write HTML in React.• JSX allows us to write HTML elements in JavaScript and place them in the DOM without any createElement() . React Functional Components Every application you will develop in React will be made up of pieces called components. Components make the task of building UIs much easier. We have lot of individual components like a single web page contain (search bar,menu bar,nav bar,content,article etc;)Merge all of these individual components to make a parent component which will be the final UI.Two types of components 1.Functional Component 2.Class Component React Class Components Every application you will develop in React will be made up of pieces called components. Components make the task of building UIs much easier. We have lot of individual components like a single web page contain (search bar,menu bar,nav bar,content,article etc;)Merge all of these individual components to make a parent component which will be the final UI.Two types of components 1.Functional Component 2.Class Component React Props • Props stand for " Properties ." • React allows us to pass information to a Component using Props. • Props are immutable so, we cannot modify the props from inside the component.• Props are basically kind of global variable or object. It is an object which stores the value of attributes of a tag and work similar to the HTML attributes.• We can access any prop from inside a component’s class using the below syntax. this.props by Facebook.

• React is used to build single page applications.

Single Page Application •...