Summery Of 6 Days of React and JavaScript Data Structure and Algorithm
React Basics
React is a JavaScript library for building user-interfaces.
React is not a framework, it’s a library. Which means a library has a purpose. It facilitates to show the user interface.
It does not provide all sorts of facilities for building application. For example, react does not provide anything built-in about routing, there is nothing about building fancy UI etc. You have to use external libraries for that.
React Tree Reconciliation
The process of traversing a DOM tree to get the DOM tag elements a React app’s component tree is known as tree reconciliation.
Using browser DOM’s API makes web app run slow. Because JavaScript is single threaded and it makes DOM elements wait to render.
React renders a web app using its own virtual DOM. It compares the previously and currently rendered components and makes changes only where it is necessary. Then it renders component to the browser.
JSX
We write the HTML-ish things inside the components. These are JSX. It is JavaScript Extension.
Babel
Browsers does not understand the JSX. Babel, a transpiler, converts the JSX into traditional JavaScript, so that browsers can work with it.
Components
There are two types of components in React. Functional and Class.
Class components needs to be imported from the named Component. It requires a render method to render elements. Stateful objects needs to be sent to parent class. Hooks cannot be used.
Function component requires just declaration. Just needs to render the component. Hooks can be used.
class Button extends Component {
render() {
return (
<div>
<button>{this.props.label}</button>
<h1>Hello World</h1>
</div>
);
}
}
function Button(){
return (
<div>
<button>{this.props.label}</button>
<h1>Hello World</h1>
</div>
);
}
User-Defined components should be capitalized, otherwise it will clash with built-in JSX syntax.
Props
We can pass data from one component from another using props. In class components props can be used with ‘this.props.name’ and for functional components it is ‘props.name’.
Props can be accessed like an object.
We can set default prop values in React using defaultProps.
function Person(){
return(
<Info age=’25’/>
)
}
class Info extends React.Component{
constructor(props);
render(){
return(
<h1>My name is {this.props.name} and I am {this.props.age} years old.
)}
}
Info.defaultProps={
name:’Raphael’,
age:30
}Info.propTypes = {
name: PropTypes.string
};
We can set property types also
Components vs. Elements
A react component is a template, a blueprint. This can be either a function or a class.
A react element is something that returns from a component. It’s an object that virtually describes the DOM nodes that a component represents.
A component is something that holds some elements. An element is something that is placed inside a component.
React Hooks
Hooks are functions that let you “hook into” react state and lifecycle methods from functional components.
Hooks start with the ‘use’ word upfront.
Reading and Updating State
We can use React hooks to declare state. The process,
const [name, setName]=useState(‘Raphael’);
The name is value of the state and setName modifies the variable.
Managing Side Effects
We can manage lifecycles of a component using useEffect hook. It can handle componentDidMount, compontDidUpdate, componentWillUnmount singlehandedly. It takes a callback function and an array of dependencies as parameters.
useEffect(cb, [dp])
Optimizing Components
This returns a memoized value. Memoization is a process of storing a function return values for later reusing.
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
The parameters are a function and array of dependencies. useMemo will recompute memorized value when one of the dependencies change.
It can just render the component. It does not have lifecycle features like useEffect.
If no dependencies provided, a new value computed in every render.
It does the work of shouldComponentUpdate() lifecycle.
This hook is used for optimization for components in every render, by reducing expensive calculations.
Instance Variable
There is a hook named useRef() which returns a mutable object which has property named current. This is considered as the initial value of an object.
useRef() creates a plain JavaScript object. The only difference between useRef() and creating a {current: …} object yourself is that useRef will give you the same ref object on every render.
const num = useRef();
num.current = 0;
We can also build custom like hook that the structures of the mentioned hooks. We need to the ‘use’ word first to use a function as a hook.
React Fiber
React Fiber is an internal engine that helps break the limit of call stack.
It handles priority of rendering components, updating, starting, destroying components.
React now, pause, resume, restart work of a component. This means lifecycle methods may be fired more than once.
React can have a priority-based update system. This allows the React Team to fine tune the renderer so that React is fastest during the most common use cases.
Unit Testing
As react appllications, are divided into components, it is easy to run tests on them. Test Driven Development with unit tests helps you to write simple, easier to maintain UIs.
Using RITEway unit testing framework, we will test our react apps.
Ways to write better, testable, readable UI components
· Favor pure components for UI code.
· Isolate side-effects
· Isolate business rules/application logic
Optimizing React Application Performance
1. Use production build
2. RollUp
3. Webpack
4. Avoid Reconciliation
Performance Optimization of Hooks
1. Write functions outside component
2. useCallBack()
3. Dependency Array
4. useMemo()
React Best Practices
Some best practices of building React apps,
1. Write function-based components
2. Using DRY(Don’t repeat yourself) principle
3. Using code snippets
4. Capitalize component names
5. Make names of component relevant to how your code functions
6. Keep all components in one folder
Important Class Methods
render() — renders an element
constructor() — Initializes props and state to the class. It also binds the event handler to the class.
componentDidMount() — It is invoked when a component is rendered first time once.
componentDidUpdate() — It is invoked immediately after updating occurs. This method is not called for the initial render.
componentWillUnmount() — It is invoked immediately before a component is unmounted and destroyed.
shouldComponentUpdate() — It is used to render components based on props and state changes. It is used for performance optimization.
setState() — It is used to change the state and tells React the component and its children needs to be re-rendered with the updated state.
componentDidCatch() — catches an error in a component.
Higher Order Component
A higher-order component is a function that takes a component and returns a new component.
We can invoke HOC like this,
const SimpleHOC = higherOrderComponent(MyComponent);
e.g.
const NewComponent = (BaseComponent) => {
// … create new component from old one and update
return UpdatedComponent
}
Accessibility
Accessibility is the design and creation of websites that can be used by everyone.
WCAG — The Web Content Accessibility Guidelines provides guidelines for creating accessible web sites.
WAI-ARIA — Web Accessibility Initiative contains techniques for fully accessible JavaScript widgets.
Semantic HTML — Semantic HTML is like pure HTML. It is the foundation of accessibility of web-applications
JavaScript Data Structures
Data structure is something that stores data while executing a program.
Data structures help us to give understanding of using data while running a program. A strong grasp of data structures will also help you in your day-to-day job as you approach problems.
Stack
Stack is a data structure in which the data enters at last will be removed first. It follow the LIFO principle(Last In First Out).
Stack operations include,
1. Push
2. Pop
3. Peek
Push — Pushing an element to the stack. Takes an element as argument.
Pop — Removes and returns the latest element that is inserted in the stack.
Peek — Returns the latest element that is inserted in the stack.
We can use array as a stack. And array has some built-in methods to make array work like a stack.
push() — pushes one or more elements in an array.
pop() — pops an element from the back of an array.
We can use peek by accessing the last element of an array.
Queue
Queue works on FIFO(First in First Out Principle). Which means the first data to be inserted will be removed first.
Queue has three operations,
1. Enqueue — Entering data to queue.
2. Dequeue — Removing data from queue.
3. Peek — Retrieving the latest inserted data.
Linked List
Linked List is a way of forming connection to scattered data. Here, the data is scattered here and there in memory, and they connected through linked list.
Each linked list have elements name node. Which at least have an element and a reference of the next node.
Every linked list have a head node where the traversing will start.
Hash Tables
Hash Table is something that stores data as a key-value pair. It looks like a JavaScript Object.
You can retrieve, insert or remove a value using a key using hash table. We will use these operations here.
Binary Search Tree
Binary Search Tree is a type of tree which holds two child nodes for one node and the left node value will be the lower than the parent node value and the right node value will be higher than the parent node value.
We need to understand some terms about tree,
Root — The top most node of a tree which does not have any parents.
Parent — A node that is the child of at most two nodes.
Child — A node that is the child of a node, it does not necessarily need to have a child.
Leaves — Nodes those do not have child.
A parent should not have more than two children. Also, the left child and the right child value should be less and more than the parent node value. If these criteria never meets it will not be a binary search tree.
Basic Algorithm Ideas
Factorial
Factorial is a way of calculating the multiplication values from a specific value to 1. e.g, 5!= 5*4*3*2*1=120.
The time complexity of factorial is O(n!)
Fibbonacci
Fibbonacci is mathematical series named after Leonardo Fibbonacci. The first two numbers in this series is 0 and 1. All other numbers are summation of the last two digits. e.g the third digit is 1 because 0+1=1.
The time complexity of factorial is O(n).
Linear Search
Searching all elements to find an element in an array is known as linear search. It’s time complexity is O(n).
Binary Search
Searching an element from a sorted array. It is a divide and conquer algorithm. It’s time complexity is O(logn).
Bubble Sort
Bubble sort is a basic sorting algorithm. It repeatedly swaps elements if they are wrong in order.
It’s time complexity is O(n2).
Insertion Sort
Insertion sort is another simple sorting algorithm. It sorts element from a specific starting index to a specific ending index. It’s time complexity is O(n2).
Selection Sort
Selection sort is another sorting algorithm. It finds the elements lowest to highest and sort them. It’s time complexity is O(n2).