- Abhinay Bathina
- Kaushik Rishi
React.js fundamentals
What is React.js?
What is React.js?
- Developed by Facebook
- React is a view layer library
- It's not a framework like VueJS, Angular
Why was React developed?
Why was React developed?
- Complexity of two-way data binding
- A lot of data on a page changing over time
- Complexity of Facebook's UI architecture
- Shift from MVC mentality to FLUX (discussed later)
Who uses React?
React in the wild:
React: the good
Easy to understand what a component will render
- Declarative code → predictable code
- You don't really need to study JS in the view file in order to understand what the file does
Easy to mix HTML and JS
function UserCard() {
return (
<div>
{isLoading ? (
<LoadingIcon />
) : (
<div>
<UserProfilePhoto />
<UserInfo />
</div>
)}
</div>
);
}
Uses full power of JS
- Decoupling templates from logic does not rely on the templates’ primitive abstractions, but uses full power of JavaScript in displaying views
No complex two-way data flow
- Uses simple one-way reactive data flow
- Easier to understand than two-way binding
- Uses less code
React is fast!
- Real DOM is slow
- JavaScript is fast
- Using virtual DOM objects enables fast batch updates to real DOM, with great productivity gains over frequent cascading updates of DOM tree
Why should I use React?
Why should I use React?
- Easy to read and understand views
- Concept of components is the future of web development
Fundamentals
Most important terms in React
Component
Component
- Components are self-contained reusable building blocks of web application.
- They describe your UI at any point in time, just like a server-rendered app.
Component
- We will be studying about Functional Components
- The only required method is render()
- Inserted into DOM using ReactDOM.render(component, DOMelement)
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
);Props
Props
- Passed down to component from parent component and represents data for the component
- accessed via props
- it is immutable
function App() {
return <Welcome name="rishi" />
}
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}State
State
- Represents internal state of the component
Accessed via state variable used in useState destructuring
- When a component's state data changes, the rendered markup will be updated by re-invoking render() method
import React, { useState } from 'react';
function Example() {
// Declare a new state variable, which we'll call "count"
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}JSX
JSX
- Arguably, one of the coolest things in React
- XML-like syntax for generating component's HTML
- Easier to read and understand large DOM trees
- Translates to plain JavaScript using babel
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}
Virtual DOM
Virtual DOM
- The virtual DOM is used for efficient re-rendering of the DOM
- React aims to re-render the virtual tree only when the state changes
- Uses 2 virtual trees (new and previous) to find differences and batch update real DOM
- Observes data changes (setState) and does dirty-checking to know when to re-render component
- Whenever possible, does not update entire component in real DOM - only computes a patch operation that updates part of the DOM