- Create React project using command prompt in windows
- How to open react project and run in visual studio code
- Arrow Function in React JS
- Class Component in React JS
- Passing Method References Between Components Example in React
- Two way data binding in react
- Fetch Data in React JS
- Fetch Data with Loading option in React JS
- Fetch Data with Loading and Error Handling in React JS
- Reusable button components in React
- CSS Inline Styling in React
- CSS External Styling in React
- CSS Styling with JavaScript Object in React
- Conditionally applying CSS classes in React
- Styles Dynamically Example in React
- Setting CSS Class Names Dynamically in React
- Radium in React JS
- Mouse hover inline styles using radium
- Media Queries inline styles using radium
- Axios with Loading and Error Handling in React
- Find DOM Node in react
- Form Controlled Component in React
- Form input control example in react
- Form Select control example in react
- Form text area control example in react
- Toggle example in React
- Props in class component react
- Props in functional component react
- Props children example in react
- Default props in functional component react
- Default props in class component react
- React hooks useState example 1
- React hooks useState example 2
- React hooks Multiple useState example
- useEffect example in React hooks
- componentDidMount and componentDidUpdate in react Class Component
- Data Fetching with React Hooks
- Data Fetching with React Hooks On Page load and on button click
- Data Fetching with React Hooks On Page load and on button click With Loading Option
- Reusable Button component example in react js
- Reusable CheckBox component example in react js
- Reusable Label component example in react js
- Reusable Textbox component example in react js
- Reusable Checkbox List component example in react js
- Reusable Dropdown component example in react js
- Reusable Image component example in react js
- Reusable Image Button component example in react js
- Set focus on input after render in react js
- Password strength example in react js
- Rendering raw html data in react js
- Modal popup in react js
- Conditionally applying inline styles in react js
- Complex Conditionally applying CSS classes in react js
- Component Life Cycle in react js
- Dynamic Dropdown List in react js
- Fragment example1 in react js
- Fragment example2 in react js
- If else Example in react js
- Page Title Example in react js
- Prop Types And Default Props example in react js
- onChange event in react js
- Router example in react js
- Short Circuit Operator example in react js
- State From Parent To Child Class & Child Function in react js
- Ternary Operator Example in react js
- Live Clock in react js
- Toggle example in react js
- Bar chart in 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
·
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 (
<div className="App">
<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 className="App">
<NestedElementsinJSX/>
</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>
<div>
<h1>{this.state.Id}-{this.state.Name}</h1>
<h2>{this.state.Email}</h2>
</div>
</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
o
·
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
<div className="App">
<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
<div className="App">
<Greet></Greet>
<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
·
No comments:
Post a Comment