React entry-level detailed notes

1. Basic understanding of React

1. Introduction

React is a JavaScript library for building user interfaces (focusing only on view) open sourced by Facebook

2. Features of React

• Declarative
• Component-Based
• Learn Once, Write Anywhere (supports client and server rendering)
• Efficient
• One-way data flow

3. Reasons why React is efficient

• Virtual DOM, not always directly manipulating DOM
• DOM Diff algorithm, minimize page redrawing

2. Basic Use of React

1. Related js libraries

• `react.js`: React's core library
• `react-dom.js`: provides a react extension library for manipulating DOM
• `babel.min.js`: A library that parses JSX syntax code into pure JS syntax code

2. Import the js library into the page

<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>

3. Coding

<script type="text/babel"> //Must declare babel
  // 1. Create a virtual DOM element const vDom = <h1>Hello React</h1> // Do not add quotes // 2. Render the virtual DOM to the real DOM container of the page ReactDOM.render(vDom, document.getElementById('test'))
</script>

React JSX

1. Virtual DOM

React provides some APIs to create a special general js object

var element = React.createElement('h1', {id:'myTitle'},'hello')

What is created above is a simple virtual DOM object

Virtual DOM objects will eventually be converted into real DOM by React

When we code, we basically only need to operate the virtual DOM related data of react, and react will convert it into real DOM changes and update the interface

2. JSX

• Full name: `JavaScript XML`
• React defines a JS extension syntax similar to XML: `XML+JS`
• Function: Used to create react virtual DOM (element) objects

var ele = <h1>Hello JSX!</h1>

Note 1: It is not a string, nor an HTML/XML tag.

Note 2: It ultimately generates a JS對象

• Any tag name: HTML tag or other tag
• Any tag attribute: HTML tag attribute or other
• Basic grammar rules

When encountering a code starting with <, parse it according to the tag syntax: HTML tags with the same name are converted to HTML elements with the same name, and other tags need special parsing

When encountering code starting with {, parse it with JS syntax: The JS code in the tag must be enclosed in { }

• The role of `babel.js`

The browser cannot parse JSX code directly, and needs to be translated into pure JS code by babel before it can run

Whenever you use JSX, you must add type="text/babel" to declare that it needs to be processed by Babel

3. Rendering virtual DOM elements

grammar:

ReactDOM.render(virtualDOM, containerDOM)

• Parameter 1: virtual dom object created by pure js or jsx
• Parameter 2: The real DOM element object used to contain the virtual DOM element (usually a div)

effect:
Render the virtual DOM elements into the real container DOM in the page for display

4. How to create a virtual DOM

Pure JS method

React.createElement('h1',{id:'myTitle'}, title

The JSX way

<h1 id='myTitle'>{title}</h1>

Code Sample

<div id="app"></div>
const test1 = 'MY TEST 1'
// 1. Create virtual dom: two methods var element = React.createElement('h3',{id:app},test1)
var element2 = <h3 id={test1}>{test1}</h3>
// 2. Render virtual dom
ReactDOM.render(element, document.getElementById('app'))
ReactDOM.render(element2, document.getElementById('app'))

5. Hello World with React

Step 1: Introduce react.js related libraries

<script src="../js/react.development.js"></script>
<script src="../js/react-dom.development.js"></script>
<script src="../js/babel.min.js"></script>

Step 2: Define the root element

<div id="app"></div>

Step 3: Write React code in babel environment

<script type="text/babel">
// 1. Create a virtual DOM element object var vDOM = <h1>Hello W</h1> //Not a string// 2. Render the virtual DOM into the real DOM container of the page ReactDOM.render(vDOM,document.getElementById('app'))
</script>

This is the end of this article about the detailed notes for beginners of React. This article describes the basic concepts and basic usage of React as well as some commonly used js libraries related to React. I hope it can be helpful to you.