React Tutorial
React is a JavaScript library for building user interfaces.
React is primarily used for building UI and is considered by many as the "V" in MVC (Model-View-Controller).
React originated from an internal project at Facebook, used to build the Instagram website, and was open-sourced in May 2013.
React boasts high performance and simple code logic, attracting increasing attention and adoption.
React Features
-
1. Declarative Design - React uses a declarative paradigm, making it easy to describe applications.
-
2. Efficiency - React simulates the DOM to minimize interactions with it.
-
3. Flexibility - React works well with known libraries or frameworks.
-
4. JSX - JSX is an extension of JavaScript syntax. While not mandatory, we recommend using it in React development.
-
5. Components - Building components with React allows for easier code reuse, suitable for large-scale projects.
-
6. Unidirectional Data Flow - React implements a unidirectional data flow, reducing redundant code and simplifying traditional data binding.
Prerequisites for This Tutorial
Before starting to learn React, you should have a basic understanding of:
First React Example
In each section, you can edit examples online and click a button to view the results.
This tutorial uses React version 16.4.0. You can download the latest version from the official website https://reactjs.org/.
React Example
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
Alternatively, you can use the create-react-app tool (introduced in the next chapter) to create a React development environment:
Example
import React from "react";
import ReactDOM from "react-dom";
function Hello(props) {
return <h1>Hello World!</h1>;
}
ReactDOM.render(<Hello />, document.getElementById("root"));
When you open http://localhost:3000/ in your browser, it will display:
Hello World!