What is React? Introduction to JavaScript Library for Building User Interfaces and Applications
What React does really well is speak a common language between developers and browsers that allows developers to declaratively describe user interfaces, and to model the state of these interfaces and not the transactions on them. This means you can focus on building your application's logic without worrying about how it's rendered in the browser.
For example, consider a simple React component that displays a list of items:
function ItemList({ items }) {
return (
<ul>
{items.map((item) => (
<li key={item.id}>{item.name}</li>
))}
</ul>
);
}
In this example, we're using React to declaratively describe the structure of our user interface. We're not worrying about how it's rendered in the browser; instead, we're focusing on building the logic for our application.
React excels precisely because it minimizes the amount of React-specific knowledge you need. You don't need to learn about templates or controllers or complex patterns. Instead, most of the code you write will be JavaScript combined with standard HTML.
Understanding the Origins of React: A Brief History
In 2010, Angular was the MVC framework of choice for top developers. It's the most popular of all, and it offers impressive features out of the box. However, this changed in 2015 when Facebook engineers released React. React started to claim a big portion of the market, with huge players like Netflix, Yahoo, and Airbnb adopting it.
Frameworks are not flexible, as they want us to code everything a certain way. React, on the other hand, is a small program that does one thing and does it well. The buzz around its virtual DOM performance is nice, but what React really excels at is speaking a common language between developers and browsers. This allows developers to declaratively describe user interfaces and model their state, rather than transactions.
React taught us and the machines a new language.
The Philosophy Behind React: Component-Based Architecture
React doesn't come with a templating system. Instead, it pushes you to use the full power of JavaScript to build your user interface. This forces you to think about how to architect your app and consider concepts like immutability. You will become better at JavaScript because React doesn't abstract away data management.
React teaches us and machines a new language that allows developers to declaratively describe user interfaces, model the state of these interfaces, and not the transactions on them. This is the most important aspect of React: it makes you think about how to structure your code in a way that's maintainable and scalable.
import React from 'react';
function Greeting(props) {
return <h1>Hello {props.name}!</h1>;
}
const element = <Greeting name="Alice" />;
React is a small program that does one thing, and it does it really well. It doesn't try to be everything to everyone. React is not trying to solve every problem; it's just trying to make building UIs easier and more enjoyable.
What is JSX in React? The Role of XML Syntax in Building UI Components
JSX is actually not HTML. Unlike some languages like Python, the whitespace doesn’t change how the computer interprets the code. Instead, JSX is an enhancement of JavaScript to allow for syntax that looks like HTML. We can use it in the return statement of a component’s render function.
Let’s consider the example of creating an email input field interface. The desired HTML would be:
<form>
<label htmlFor="email">Email:</label>
<input type="email" id="email" className="form-control" />
</form>
This is in contrast to using React.createElement:
React.createElement("form", null, React.createElement("label", { htmlFor: "email" }, "Email:"), React.createElement("input", { type: "email", id: "email", className: "form-control" }))
Or, we can write it in plain JavaScript without JSX at all:
React.createElement("form", null, React.createElement("label", { htmlFor: "email" }, "Email:"), React.createElement("input", { type: "email", id: "email", className: "form-control" }))
JSX is completely optional, and not required to use React. However, it does make the code easier to read and write, especially for those familiar with HTML syntax.
Key Concepts in React: Virtual DOM, State, and Props
React is a JavaScript library for building user interfaces. It uses a virtual DOM (Document Object Model) to optimize rendering performance. The virtual DOM is a lightweight in-memory representation of the real DOM. When your app's state changes, React updates the virtual DOM, and then efficiently updates the real DOM by comparing the two and only making the necessary changes.
In React, state refers to an object that holds the component's data. State is used to store information that can change over time, such as user input or API responses. When state changes, React re-renders the component with the new state.
Props (short for "properties") are immutable read-only values passed from a parent component to its children. Props allow you to customize your components and make them reusable.
Here is an example of how you can use props:
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
const App = () => {
return (
<div>
<Greeting name="Alice" />
<Greeting name="Bob" />
</div>
);
};
In this example, the Greeting component receives a name prop and uses it to display a personalized greeting.
Components in React: Function vs Class Components
React components are modeled after functions. We can use a vanilla JavaScript function to write pure components. For example:
var ClickableImage = props => (
<a href={props.href}>
<img src={props.src} />
</a>
);
When we use a function component, we're not creating an instance from a component class; rather, the function itself represents what would be the render method in a regular component definition. If we design our application in a functional and declarative way, most of our components could just be simple stateless function components.
Stateless function components can't have any internal state, they don't expose any lifecycle methods, and we can't attach any refs to them. If we need any of these features (which I will explain in later chapters), we will need a class-based component definition.
For example:
var ClickableImage = props => (
<a href={props.href}>
<img src={props.src} />
</a>
);
On the other hand, React has an official API to define stateful components using the React.createClass method. This allows us to set up our code and start putting together components in React.
Let's create a class-based component that extends the base React Component class:
class ProductList extends React.Component {
render() {
return (
<div className='ui unstackable items'>
Hello, friend! I am a basic React component.
</div>
);
}
}
In this example, we're creating an independent React component by extending the base React Component class. We'll add methods and use the render function to show data.
Props and State Management in React: Understanding the Flow
Handling Events and Interactions in React Applications
When it comes to handling events and interactions in React applications, you can use event handlers to respond to user actions. These event handlers are triggered when a user interacts with your application, such as clicking a button or submitting a form.
To handle an event in React, you need to add an event listener to the relevant DOM element. This is typically done by attaching an event handler function to the element's onClick, onChange, or other relevant event.
For example, let's say you want to create a simple button that increments a counter when clicked:
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
In this example, the onClick event handler is triggered when the button is clicked. The event handler function (setCount) increments the count state variable by one.
Similarly, you can handle other types of events, such as form submissions or mouse movements. By using React's synthetic event wrapper and adding event listeners to your components, you can create dynamic and responsive user interfaces that respond to user interactions.
Dealing with State Changes: ShouldComponentUpdate and componentWillReceiveProps
When dealing with state changes in React, you may need to use two lifecycle methods: shouldComponentUpdate and componentWillReceiveProps. The first method is used to determine if your component needs to update when its props or state change. The second method is used to receive new props before the component is re-rendered.
For pure components, you can safely compare the previous and next props or state using a function like notEqual, which checks for inequality between two objects. This allows you to short-circuit the update process when there are no changes.
As an example, consider a Date component that takes a timestamp prop and renders the date part of it. You can use shouldComponentUpdate to prevent unnecessary updates by comparing the previous and next timestamps:
class Date extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
return this.props.timestamp.toDateString() !== nextProps.timestamp.toDateString();
}
}
In this example, the component will only update when the date part of the timestamp changes.