Adi Dotnet: React JS

· Developed and maintained by Facebook

· React is a JavaScript Library

· It is an open-source

· React purpose is to show content(HTML) to users and handle user interaction

· ReactJS is a declarative, efficient, and flexible JavaScript library for building reusable UI components. It is an open-source, component-based front end library which is responsible only for the view layer of the application.

· The main objective of ReactJS is to develop User Interfaces (UI) that improves the speed of the apps. It uses virtual DOM (JavaScript object), which improves the performance of the app. The JavaScript virtual DOM is faster than the regular DOM. We can use ReactJS on the client and server-side as well as with other frameworks.

React Features

· JSX - JavaScript XML

· Components

· One-way Data Binding

· Virtual DOM

· Simplicity

· Performance

Environment Setup

· Node

· NPM

· Visual Code (or) Visual studio – Code Editor

Create ReactJS App

Ø npx create-react-app reactapp

Run ReactJS App

Ø cd first-react-app

Ø npm start

Output:

Why use JSX?

· It is faster than regular JavaScript because it performs optimization while translating the code to JavaScript.

· Instead of separating technologies by putting markup and logic in separate files, React uses components that contain both. We will learn components in a further section.

· It is type-safe, and most of the errors can be found at compilation time.

· It makes easier to create templates.

Single HTML Element Component Example:

Elements.js Code:

import React,{Component} from 'react';

class Elements extends Component

{

render()

{

return(

<div>Div Element</div>

);

}

export default Elements;

App.js Code

import React from 'react';

import './App.css';

import Elements from './Components/ElementsinJSX';

function App() {

return (

<Elements/>

</div>

);

}

export default App;

Nested HTML Elements Component Example: To use more than one element, you need to wrap it with one container element. Here, we use div as a container element which has three nested elements inside it.

NestedElementsinJSX.js Code:

import React, { Component } from 'react';

class NestedElementsinJSX extends Component{

render(){

return(

<div>

<h1>H1 Element</h1>

<h2>h2 Element</h2>

<p>React JS</p>

</div>

);

}

export default NestedElementsinJSX;

App.JS Code: Add Below code in App.js file

import NestedElementsinJSX from './Components/NestedElementsinJSX';

function App() {

return (

</div>

);

}

Output:

JSX Comments:

JSXComments.js Code: add below code and import .js file in app.js file

import React,{Component} from 'react';

class JSXComments extends Component{

render(){

return(

<div>

<div>Comments Example</div>

{ /* <div>my Comments</div> */}

</div>

);

}

export default JSXComments;

JSX Attributes:

JSXAttributes.js Code: add below code and import .js file in app.js file

import React,{Component} from 'react';

class JSXAttributes extends Component{

render(){

return(

<div>

<div>JSX Attributes EXP</div>

<h2 className = "firstAttribute">Arrtibute syntax 1</h2>

</div>

);

}

export default JSXAttributes

JSX Styling: React always recommends to use inline styles. To set inline styles, you need to use camelCase syntax. React automatically allows appending px after the number value on specific elements. The following example shows how to use styling in the element.

JSXInlinStyle.js Code: add below code and import .js file in app.js file

import React,{Component} from 'react';

class JSXInlinStyle extends Component{

render(){

var myStyle={

fontSize:50,

color: 'Red'

}

return(

<h1 style = {myStyle}>www.allinoneweb.net</h1>

);

}

export default JSXInlinStyle;

React Components

Earlier, the developers write more than thousands of lines of code for developing a single page application. These applications follow the traditional DOM structure, and making changes in them was a very challenging task. If any mistake found, it manually searches the entire application and update accordingly. The component-based approach was introduced to overcome an issue. In this approach, the entire application is divided into a small logical group of code, which is known as components.

A Component is considered as the core building blocks of a React application. It makes the task of building UIs much easier. Each component exists in the same space, but they work independently from one another and merge all in a parent component, which will be the final UI of your application.

Every React component have their own structure, methods as well as APIs. They can be reusable as per your need. For better understanding, consider the entire UI as a tree. Here, the root is the starting component, and each of the other pieces becomes branches, which are further divided into sub-branches.

In ReactJS, we have mainly two types of components. They are

1. Functional Components

2. Class Components

Functional Components: In React, function components are a way to write components that only contain a render method and don't have their own state. They are simply JavaScript functions that may or may not receive data as parameters. We can create a function that takes props(properties) as input and returns what should be rendered. A valid functional component can be shown in the below example.

The functional component is also known as a stateless component because they do not hold or manage state.

FunctionalComponents.js Code: add below code and import .js file in app.js file

import React from 'react';

function FunctionalComponents(){

return(

<div>Functional Components</div>

)

}

export default FunctionalComponents;

Class Components

Class components are more complex than functional components. It requires you to extend from React. Component and create a render function which returns a React element. You can pass data from one class to other class components. You can create a class by defining a class that extends Component and has a render function. Valid class component is shown in the below example

The class component is also known as a stateful component because they can hold or manage local state.

ClassComponents.js Code: add below code and import .js file in app.js file

import React,{Component} from 'react';

class ClassComponents extends Component{

render(){

return(

<div>Class Components</div>

);

}

export default ClassComponents;

React State:

The state is an updatable structure that is used to contain data or information about the component. The state in a component can change over time. The change in state over time can happen as a response to user action or system event. A component with the state is known as stateful components. It is the heart of the react component which determines the behavior of the component and how it will render. They are also responsible for making a component dynamic and interactive.

It can only be accessed or modified inside the component or by the component directly. To set an initial state before any interaction occurs, we need to use the getInitialState() method.

Defining State:

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.

To set the state, it is required to call the super() method in the constructor. It is because this.state is uninitialized before the super() method has been called.

StateEXP1.js Code: add below code and import .js file in app.js file

import React,{Component} from 'react';

class StateEXP1 extends Component{

constructor(){

super();

this.state={

Name:'adi',

Id:101,

Email:'jc.adi101@gmail.com'

}

render(){

return(

<div>

<h1>{this.state.Id}-{this.state.Name}</h1>

<h2>{this.state.Email}</h2>

</div>

);

}

export default StateEXP1;

ES6 – ESMA Script -> Scripting Language

· Let

· Const

· Let Vs Const

· Arrow Function

· Template Strings

· Prototype Methods

· Classes

· Spread Operator

React JS

· Elements

· JSX

· Components

o Component Architecture

o Functional Component

· Refactor

· Constructor

· React List

· React Map

· React Table

· State Management

· Updating State

· Prop Types

· Conditions

o If else

o Switch

o Conditional (Ternary)

o &&

· Expressions

· Nested Elements

· Life Cycle Methods

· Component State navigation

· Browser router

· Link

· Route

o Install React router

· UI Setup

· Adding Photos

· Render HTML

· Events

o Events

o Child Events

· React Forms

o Text Field

o Text Area

o Select

o File

· CSS

o Inline Styling

o CSS Style sheet

o CSS Modules

· Comments

· Naming Conventions (Tutorial points website)

· Refs

· Keys

· Flux

· Higher Order Component (HOC)

· Context

· Error Boundaries

· Hooks

o State Hooks

o Effect Hook

· React Bootstrap

· React Code Splitting

· Flux Vs MVC

ReduX

o Install Redux

o Npm install –save react-redux

TO Create ReactJS App

Ø npx create-react-app first-react-app

To Run ReactJS App

Ø cd first-react-app

Ø npm start

NPM: Node Package Manager

Comment selected lines

Edit > Toggle Line Comment or Ctrl + / or add // before line

OUTPUT: //Some Lines of Code here

Comment selected Block:

Edit > Toggle Block Comment or Shift + Alt + A

OUTPUT: /*Some Code here*/

.gitignore: It will use to store ignore files when you are submitting into git

Index.js: Starting point of ReactJS

Component:

Ø Components describe a part of the use interface

Ø Reusable

Ø Can be nested inside other components

Ø Component extension .js or .jsx

Ø Types:

o Stateless functional component : It’s JavaScript functions

o Stateful class component

Functional Component:

1. Create a component file Greet.js & place below code

import React from 'react';

// Funtion syntax

//function Greet()

//{

// return <h1>Hello Adi!</h1>

//}

// Arrow Funtion syntax

const Greet=()=><h1>Hello Adiii!</h1>

export default Greet; // it is used to export

2. Go to App.js file add below code

import Greet from './components/Greet.js' // Import Greet component in App component

<Greet></Greet> // Greet component will display here

</div>

Export types: Need to add

Class Component:

1. Create a component file welcome.js & place below code

import React, { Component } from 'react';

class Welcome extends Component {

render() {

return <h1>Class Component</h1>

}

export default Welcome; // to export this componet

2. Go to App.js file add below code

import Welcome from './components/welcome' //Import welcome componet in app componet

<Welcome></Welcome> // welcome component data will display here

</div>

JSX: JavaScript XML – Extension to the JavaScript language

Props:

· Props get passed to the component

· Props are function parameters

· Pops are immutable

· Pops –functional components

· This.Props- class components

State:

· State is managed with in the component

· Variables declared in the functional body

· State can be changed

· useState Hook –Functional components

· this.state –class components

· Note: always make use of setState and never modify the state directly

Events

· Click Event in Functional Component

import React from 'react'

function FuntionClick() {

function clickHandlet() {

console.log("button clicked");

}

return (

<div>

<button onClick={clickHandlet}>click</button>

</div>

)

}

export default FuntionClick

· Click Event in Class Component

import React, { Component } from 'react'

class ClassClick extends Component {

clickHandler() {

console.log("clciked the button");

}

render() {

return (

<div>

<button onClick={this.clickHandler}>Click me</button>

</div>

)

}

export default ClassClick

Snippets

ES7 React/Redux/GraphQL/React-Native snippets

· rce & tab need to press : it will create default class component for us

· rfce & tab : it will create functional component

· rconst & tab : it will create constructor for us

Online Editor Tools

· https://repl.it/

· https://codesandbox.io/

Pages

React JS

No comments:

Post a Comment

Popular Posts

Labels