👉 Click ⭐ if you like the project.
👉 Pull Request are highly appreciated.
👉 Follow me @Gowtham R for new technical updates.
| S.No | Content |
|---|---|
| 1 | React |
| 2 | Virtual DOM |
| 3 | Visual Studio Code |
| 4 | Node.js |
| 5 | npm - Node Package Manager |
| 6 | JavaScript - ES6 |
| 7 | var and let |
| 8 | var vs let |
| 9 | const |
| 10 | Arrow Functions |
| 11 | Template String |
| 12 | Function Parameters |
| 13 | ES6 - Classes |
| 14 | Spread Operator |
| 15 | Babel |
| 16 | Create React App |
| 17 | Elements |
| 18 | Understanding JSX |
| 19 | Components |
| 20 | Refractor |
| 21 | Setting Styles |
| 22 | Functional Components |
| 23 | Class Components |
| 24 | Props |
| 25 | State Management |
| 26 | Prop - Types |
| 27 | React State Management Lifecycle Methods |
| 28 | Tools Reference |
- React is a open-source frontend JavaScript library front-end JavaScript library developed by Facebook in 2011.
- It follows the component based approach which helps in building reusable UI components.
- React is used to build single page applications.
- It is used for developing complex and interactive web and mobile UI.
For Example
webpage <searchBar/> <blogPost/> webpage
- where, the webpage component is made up of two sub components.
- searchBar and blogPost components combine together to form the entire webpgae.
- This is known as compositional model.
- React is just JavaScript.
- A Single Page Application 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.
- This means that the URL of your website will not change completely (page will not reload), instead it will keep getting content and rewriting the DOM with it instead of loading a new page.
- The goal is faster transitions that make the website feel more like a native app.
- Example: Gmail, Facebook and Twitter.
- The Components we just talked above is made up of Elements.
- These Elements describes the UI of our webpage.
- With the help of Virtual DOM React takes care of all the hard work of converting the elements that we created through DOM Nodes which are passed on to the actual DOM and renders appropriate UI on our webpage.
Working
- React creates a virtual DOM in memory.
- Manipulating Real DOM is much slower than manipulating Virtual DOM becuase nothing gets drawn on the screen.
- When state of an object changes, Virtual DOM changes only that objects in the real DOM instead of updating all the objects.
- Virtual DOM makes React extremly Powerful and Efficient.
- We use Visual Studio Code as Code Editor.
- Install Visual Studio Code -> https://code.visualstudio.com/
- It is a open source run time environment which runs JavaScript code on a server.
- Install Node.js -> https://nodejs.org/en/download/
- To check the node version
node -v
- It is used to install various dependencies and frameworks on to our project.
- To check the node version
npm -v
- ES6 stands for ECMA Script 6 version.
- It's having new features like Classes, Arrow Functions and Variables(let, const and var)
- By using Arrow, We can make the syntax shorter for the Function.
-
Var defines variables that can be reassigned.
-
If we use the variable outside the function its called global variable and inside the function is called local variable.
For Example,
var name = "Android"; console.log(name); name = "Flutter"; console.log(name);
-
let is an update that came along with ES6.
-
If we use the variable in block or loop, then the value will available only inside the block.
-
In Var you cannot access the variable outside the scope(i.e) when you declare a variable in var it is scoped to the enclosing function.
-
var is a function scoped.
For Example,
function printName(){ var name = "Android"; console.log(name); } console.log(name); // Outside the Scope it will thorugh an error printName();
-
To understand why ES6 is updated, let is a not a function scoped it is block scoped.
For Example,
var name = "Android"; if(name == "Android"){ let myName = " Flutter"; console.log(myName); } console.log(myName); // Outside the Scope it will thorugh an error
- In var, we can reuse the variable names.
For Example,
var age = 20;
var age = 22;
console.log(age);For Example,
var age = 20;
age = 22;
console.log(age);-
In const Once you assign a value, you cannot update that again.
Example 1,
const age = 20; console.log(age);
-
The below Example throws an Exception because we are trying to reassign the person var,
Example 2,
const person = { name: 'Android'; company: 'google'; } person = { name: 'Windows'; company: 'Microsoft'; } console.log(person.name); console.log(person.company);
-
In const, we will never allow to change the value of an object but we can change it's properties.
Example 3,
const person = { name: 'Android'; company: 'google'; } person.name: 'Windows'; person.company: 'Microsoft'; console.log(person.name); console.log(person.company);
In ES5,
const integers = [1,2,3];
const updatedIntegers = integers.map(function(number) {
return number += 1;
}
console.log(updatedIntegers);ES6 Arrow Functions,
const integers = [1,2,3];
const updatedIntegers = integers.map((number) => {
return number += 1;
}
console.log(updatedIntegers);const integers = [1,2,3];
const updatedIntegers = integers.map((number) => number += 1);
console.log(updatedIntegers);const integers = [1,2,3];
const updatedIntegers = integers.map(number => number += 1);
console.log(updatedIntegers);const integers = [1,2,3];
const updatedIntegers = integers.map(() => "bob");
console.log(updatedIntegers);Using Filter,
const ages = [23, 24, 3, 19];
const adults = ages.filter(function(age){
return age > 20;
});
console.log(adults);const ages = [23, 24, 3, 19];
const adults = ages.filter((age) => age > 20);
console.log(adults);In ES5,
const name = 'Android';
const age = 25;
const mDescription = 'My name is ' + name + ', and I am ' + age + ' years old';
console.log(mDescription);In ES6,
const name = 'Android';
const age = 25;
const mDescription = `My name is ${name}, and I am ${age * 2} years old`;
console.log(mDescription);-
An object is nothing but a self-contained component which consists of methods and properties to make a particular type of data useful.
-
Object determines the behavior of the class.
const person = { name: 'Android', age: 8 } console.log(person);
function Person(name, age) {
this.name = name;
this.age = age;
}
const bill = new Person('Android',50);
console.log(bill);function Person(name, age) {
this.name = name;
this.age = age;
}
const bill = new Person('Android',50);
console.log(bill);function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.speak = function(){
console.log(`Hi my name is $(this.name}`);
};
const bill = new Person('Android',50);
bill.speak();- A Class is used to bind data's and methods as a single unit.
class Person{
constructor(){
this.name = name;
this.age = age;
}
const bill = new Person('Android',50);
console.log(bill);
}class Person{
constructor(){
this.name = name;
this.age = age;
}
speak(){
console.log(`Hi my name is $(this.name}`);
}
const bill = new Person('Android',50);
bill.speak();
}class Person{
constructor(){
this.name = name;
this.age = age;
this.children = children;
}
speak(){
console.log(`Hi my name is $(this.name}`);
}
birth(child){
this.children.push(child);
}
const bill = new Person('Android', 50, ['Android', 'Flutter']);
bill.speak();
bill.birth('React');
console.log(bill.children);
}const names = ['Android', 'Flutter', 'React']
const moreNames = ['Google', 'Microsoft']
console.log(names)const names = ['Android', 'Flutter', 'React']
const moreNames = ['Google', 'Microsoft']
console.log(...names) const names = ['Android', 'Flutter', 'React']
const moreNames = ['Google', 'Microsoft']
let allNames = []
allNames = allNames.concat(names)
allNames.push('Flipkart')
allNames = allNames.concat(moreNames)
console.log(allNames)const names = ['Android', 'Flutter', 'React']
const moreNames = ['Google', 'Microsoft']
const allNames = [...names, 'Gio', ...moreNames]
console.log(allNames)- Whenever we write ES6 code syntax we need Babel which is going to compile ES6 code to ES5 bundles.
- Simply, Babel is a JavaScript compiler.
- Choose the Required Folder
- In Windows,
npm install create-react-app -g
- In Mac,
sudo npm install create-react-app -g
- Choose the Destination Folder.
- Finally,
create-react-app instawall
- where, instawall is the application name
- Now Open the Application Folder using Visual Studio Code.
- React makes use of Elements to describe the user interface of our Application.
import React from 'react';
- React Elements are simply objects.
- How to we create React Elements to modify our User Interface.
const element = React.createElement('h1', null, 'Hello World');
- This element describes the webpage should have a big title(i.e)the big header of Hello World.
- The React elements only describes how the web page looks like but what actually renders our web page is the DOM.
- The process of describing what you want to render and actually rendering the elements is completely de-coupled.
- For that reason we have to import React DOM to be able to required DOM notes from these objects.
import ReactDOM from 'react-dom';
- Note: You can check the libraries installation in package.json file -> dependencies.
Example: 1
import React from 'react';
import ReactDOM from 'react-dom';
const element = React.createElement('h1', null, 'Hello World');
ReactDOM.render(element, document.getElementById('root'));Example: 2
import React from 'react';
import ReactDOM from 'react-dom';
const element = React.createElement('ol', null,
React.createElement('li', null, 'Android'),
React.createElement('li', null, 'Flutter'),
React.createElement('li', null, 'React')
);
ReactDOM.render(element, document.getElementById('root'));Example: 3
import React from "react";
import ReactDOM from "react-dom";
const mArrays = ["Android", "Flutter", "React"];
const element = React.createElement(
"ol",
null,
mArrays.map((mValues, index) => React.createElement("li", { key: index }, mValues))
);
ReactDOM.render(element, document.getElementById("root"));- JSX stands for JavaScript XML. With React, it's an extension for XML-like code for elements and components.
- In Other words, JavaScript extension, or more commonly JSX, is a React extension that allows us to write JavaScript that looks like HTML.
- The JSX is translated to regular JavaScript at runtime.
- Whenever we are writting JSX, as a rule of them every thing must quote to a single JSX element.
Example: 1
import React from "react";
import ReactDOM from "react-dom";
const element = (
<ol>
<li>Android</li>
<li>Flutter</li>
<li>React</li>
</ol>
);
ReactDOM.render(element, document.getElementById("root"));Example: 2
import React from "react";
import ReactDOM from "react-dom";
const mArrays = ["Android", "Flutter", "React"];
const element = (
<ol>
<li>{mArrays[0]}</li>
<li>{mArrays[1]}</li>
<li>{mArrays[2]}</li>
</ol>
);
ReactDOM.render(element, document.getElementById("root"));Example: 3
import React from "react";
import ReactDOM from "react-dom";
const mArrays = ["Android", "Flutter", "React"];
const element = (
<ol>
{mArrays.map((mValues, mIndex) => (
<li key = {mIndex}>{mValues}</li>
))}
</ol>
);
ReactDOM.render(element, document.getElementById("root"));Example: 4
import React from "react";
import ReactDOM from "react-dom";
const mArrays = ["Android", "Flutter", "React"];
const element = (
<div>
<h1>Title</h1>
<ol>
{mArrays.map((mValues, mIndex) => (
<li key={mIndex}>{mValues}</li>
))}
</ol>
</div>
);
ReactDOM.render(element, document.getElementById("root"));Example: 5 (Using javascript)
import React from "react";
import ReactDOM from "react-dom";
const h1 = React.createElement("h1", null, "Header");
const p = React.createElement("p", null, "Description");
const myElement = React.createElement("div", null, h1, p);
ReactDOM.render(myElement, document.getElementById("root"));Example: 6
import React from "react";
import ReactDOM from "react-dom";
function One() {
return <h1>Hello</h1>;
}
ReactDOM.render(<One/>, document.getElementById("root"));- Compoenents are the main building blocks of an Application.
- You can see a UI broken down into multiple individual pieces called components and work on them independently and merge them all in a parent component which will be your final UI.
- Two Types -> Functional Component and Class Component.
Example: 1
import React, { Component } from "react";
import ReactDOM from "react-dom";
const mArrays = ["Android", "Flutter", "React"];
class Title extends Component {
render() {
return (
<h1>Title</h1>
);
}
}
class List extends Component {
render() {
return (
<ol>
{mArrays.map((mValues, mIndex) => (
<li key={mIndex}>{mValues}</li>
))}
</ol>
);
}
}
class Main extends Component {
render() {
return (
<div>
<Title />
<List />
</div>
)
}
}
ReactDOM.render(<Main />, document.getElementById("root"));Example: 2
import React, { Component } from "react";
import ReactDOM from "react-dom";
class Title extends Component {
render() {
return (
<h1>{this.props.mString}</h1>
);
}
}
class List extends Component {
render() {
return (
<ol>
{this.props.mArrays.map((mValues, mIndex) => (
<li key={mIndex}>{mValues}</li>
))}
</ol>
);
}
}
class Main extends Component {
render() {
return (
<div>
<Title mString={'Title'} />
<List mArrays={["Android", "Flutter", "React"]} />
<List mArrays={["React", "Flutter", "Android"]} />
</div>
)
}
}
ReactDOM.render(<Main />, document.getElementById("root"));- this keyword points out to the component instance of the class that is being rendered.
Example: 1
- Create the Folder as Components
- Create the File name as Main.js, Title.js and List.js in the above mentioned Folder.
In Main.js
import React, { Component } from "react";
import Title from "./Title";
import List from "./List"
class Main extends Component {
render() {
return (
<div>
<Title mString={"Title"} />
<List mArrays={["Android", "Flutter", "React"]} />
<List mArrays={["React", "Flutter", "Android"]} />
</div>
);
}
}
export default Main;In Title.js
import React, { Component } from "react";
class Title extends Component {
render() {
return (
<h1>{this.props.mString}</h1>
);
}
}
export default Title;In List.js
import React, { Component } from "react";
class List extends Component {
render() {
return (
<ol>
{this.props.mArrays.map((mValues, mIndex) => (
<li key={mIndex}>{mValues}</li>
))}
</ol>
);
}
}
export default List;In index.js
import React from "react";
import ReactDOM from "react-dom";
import Main from "./Components/Main";
ReactDOM.render(<Main />, document.getElementById("root"));-
To install font from online sources,
In stylesheet.css,
@font-face { font-family: 'billabong'; src: url("https://cdn.rawgit.com/milktronics/beaglegr.am/master/public/fonts/billabong-webfont.woff"); }
-
Some of the font properties for heading is given below,
In stylesheet.css,
h1 { font-family: 'billabong'; text-align: center; font-size: 13rem; font-weight:100; margin: 2rem 0; letter-spacing: -1px; color : black; }
- Functional components are simply javascript functions.
- We can create a functional component in React by writing a javascript function.
- These functions may or may not receive data as parameters.
function Demo() { return <h1>Welcome Message!</h1>; }
Example: 1
import React from "react";
import ReactDOM from "react-dom";
function Header() {
return <h1>Header</h1>;
}
function Body() {
return <h1>Decription</h1>;
}
function Footer() {
return <h1>Footer</h1>;
}
ReactDOM.render([<Header/>, <Body/>, <Footer/>], document.getElementById("root"));Example: 2
import React from "react";
import ReactDOM from "react-dom";
function Header() {
return <h1>Header</h1>;
}
function Body() {
return <h1>Decription</h1>;
}
function Footer() {
return <h1>Footer</h1>;
}
function Layout() {
return (
<div>
<Header />
<Body/>
<Footer/>
</div>
)
}
ReactDOM.render( <Layout/>, document.getElementById("root"));Example: 3
In App.js
```ruby
import React from "react";
import ReactDOM from "react-dom";
import Demo from './Demo'
ReactDOM.render( <Demo/>, document.getElementById("root"));
```
In Demo.js
import React from 'react';
function Demo(props){
return(
<p1>Description {props.name}</p1>
)
}
export default Demo;-
The class components are little more complex than the functional components.
-
The functional components are not aware about the other components in your program where as the class components can work with each other.
-
We can pass data from one class component to other class component.
-
We can use javascript ES6 classes to create class based components in React.
class Demo extends React.Component { render(){ return <h1>Welcome Message!</h1>; } }
Example: 1
In App.js
```ruby
import React from "react";
import ReactDOM from "react-dom";
import Demo from './Demo'
ReactDOM.render( <Demo/>, document.getElementById("root"));
```
In Demo.js
import React,{Component} from 'react';
class Demo extends Component
{
render(){
return(
<p1>Description</p1>
)
}
}
export default Demo;- Props are arguments passed into React components.
- Props are passed to components via HTML attributes.
- Props are considered to be read only immutable data it can't be changed overtime.
Example: 1
In App.js
import React from "react";
import ReactDOM from "react-dom";
import Demo from './Demo'
ReactDOM.render(<Demo name = {"by AndroidPillars"}/>, document.getElementById("root"));In Demo.js
import React,{Component} from 'react';
class Demo extends Component
{
render(){
return(
<p1>Description {this.props.name}</p1>
)
}
}
export default Demo;- React components has a built-in state object.
- The state object is where you store property values that belongs to the component.
- When the state object changes, the component re-renders.
- The set state property allows us to update this special state property here and it will then ensure that React gets to know about this update and updates the DOM.
- set state takes an object as an argument and it will merge whatever we define here with our existing state.
class Demo extends React.Component { constructor(){ super(); this.state = { message: "my friend (from state)!" }; } render() { return <h1>Hello {this.state.message}!</h1>; } }
Example: 1
In App.js
import React from "react";
import ReactDOM from "react-dom";
import Demo from './Demo'
ReactDOM.render(<Demo mValue = {"by AndroidPillars"}/>, document.getElementById("root"));In Demo.js
import React,{Component} from 'react';
class Demo extends Component
{
constructor(){
super();
this.state = {
name: "AndroidPillars"
}
}
render(){
const {name} = this.state
return(
<p1>Description {name}</p1>
)
}
}
export default Demo;-
We can use the propType for validating any data we are receiving from props.
npm install --save prop-types
- The constructor is only used to initialize the state of our Component or bind methods to the proper context.
- The componentDidMount method is invoked immediately after the component is being inserted in to the DOM.
- Flow by using componentDidMount method, Constructor -> No Elements -> Render -> ComponentDidMount -> ApiRequest -> UpdateState -> Re-render(i.e)Render.
- The componentWillMount method as is called as the constructor(i.e) before the component is invoked in to the DOM(i.e)before the render method gets invoked.
- The componentDidUpdate method gets called once the component is Re-rendered(i.e) whenever we update the state of our Component trigger a Re-render.
-
We will be using React Router in to a Single Page Application.
-
In Single Page Application, it downloads the entire content in a Single Request.(i.e) A single-page application works inside a browser and does not require page reloading during use.
-
We split React Router in to three components.
- Browser Router
- Link
- Route
-
We have to connect our Browser Router to a link component. Since it is the link component on which the user will press that tells the browser router to update the URL for helping our app to listen URL changes which renders to the right screen.
For Installing the Plugin,
npm install react-router-dom- Browser Component is used to keep track of URL changes.
import {BrowserRouter} from 'react-router-dom' ReactDOM.render(<BrowserRouter><App/></BrowserRouter>, document.getElementById('root'));
- Link Component is used to invoke a change in the URL upon it is being clicked on(ie)it's similar to that of the hyper link.
import {Link} from 'react-router-dom' <Link className="add-icon" to="/add-photo"></Link>
- Based on the URL we are going to have Route which contains the given path, whatever the URL are directed by the Link Component are going to find the proper Route which has the given path associated with the link.
import {Route} from 'react-router-dom'; <Route path="/..." component = {...}/>
- Redux makes our state of the Application more Predictable.
- As our application becomes more complex(i.e) whenever you miss manage the state as a result your are exposed to a lot of Bugs that's what the redux is the good alternative to managing our application state.
- It makes the thing light Easier.
- Redux gives us the way to store our data in a Organised way. All of our app's data is centralised in a single Store.
- Next, State in Redux is Read only, the component cannot never directly change the State it can do only by Action.
- All State changes in a redux is happen in a single place that's what we mentioned Redux makes our state of the Application more Predictable, Easier to keep track of and easier to debug.
- All State is updated one by one in a very strict order.
- The Root Reducer is the only thing that updates the State.
For Installing Redux Framework,
npm install redux
- Finally, Redux has the ability to keep the state predictable, Easy to Manage such that it's centralized in a single store only pure functions called Reducers allow to update the State.
- The three main parts in Redux are Store, Reducer and Action.
- Store where our application state lives. All the data in application lives in the Store.
- State in Redux is read-only. It's immutable.
- The only way to change the State that lives inside our Store is through the pure functions called reducers.
- Reducer is the arguement which we pass in to the createStore. The arguement takes in to the bunch of reducers which all combine in to a single root reducer which will define how data is going to be updated in our Store.
In reducer.jsimport { createStore } from 'redux' import rootReducer from './redux/reducer' const store = createStore(rootReducer) ReactDOM.render(<BrowserRouter><App/></BrowserRouter>, document.getElementById('root'));
const postReducer = function posts(state , action) { return state } export default postReducer
- The Store dispatches an Action and the Action disptaches to the Reducer and the Reducer then gives the Store with its updated State.
For Installing React-Redux,
npm install react-redux
- By Installing react-redux it gives access to the provider.
- The provider provide our Store to it's child Component.
In App.jsimport { createStore } from 'redux' import rootReducer from './redux/reducer' import {provider} from 'react-redux' import App from './Components/App' const store = createStore(rootReducer) ReactDOM.render(<Provider store = {store}><BrowserRouter><App/></BrowserRouter></Provider>, document.getElementById('root'));
In Action.jsimport Main fron './Main' import {connect} from 'react-redux' function mapStateToProps(state) { return { posts: state } } const App = connect(mapStateToProps)(Main) export default App
export function removePost(index) { return { type: 'REMOVE_POST', index: index } }
- By Using React Developer Tools(i.e) Chrome -> Extension -> React Developer Tools -> https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/related -> By Clicking “>>” -> you will find “Components” and “Profiler”.
- Firebase is a technology that allows you to create web and mobile applications without server-side programming, making development faster and easier.
- Visit, https://console.firebase.google.com/u/0/
- Create a project.
- Now Create a new Database and select the Option Realtime Database.
- Now, Go to the Database and make the read and write value as true for disabling the Authentication.
- Go to Project Overview and select Add Firebase to your web app.
- Once you created, Go to settings and copy the config,
For Installing Firebaseconst firebaseConfig = { apiKey: "AIzaSyDcsxmF3vVIgcQ30DR-D6dgyo24qde", authDomain: "photowall-6cd25.firebaseapp.com", databaseURL: "https://photowall-6cd25.firebaseio.com", projectId: "photowall-6cd25", storageBucket: "photowall-6cd25.appspot.com", messagingSenderId: "308221131146", };
npm install firebase
- https://codesandbox.io/ (online Editor)