This is the 15th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

📢 Hello everyone 😪, I’m Xiao Cheng. Recently, I’ve been learning React, small programs, reading JS elevation, and organizing notes of Node. This is the first article about React, and also the first framework for my learning

📢 may your life be bright and lovely

Please attach the React official website first. Many problems need to be solved by checking the official documents. You should learn to check the documents ~

1. React

1. About the React

A few interview questions to understand the ~~

What is React?

React is a JavaScript library for building user interfaces.

  • Is an open source JS library that renders data as HTML views
  • It follows a component-based approach and helps build reusable UI components
  • It is used to develop complex interactive Web and mobile UIs

What’s the characteristic of React?

  1. Use a virtual DOM instead of a real DOM
  2. It can be rendered from the server
  3. It follows one-way data flow or data binding
  4. efficient
  5. Declarative coding, componentized coding

What are the main advantages of React?

  1. It improves application performance
  2. It can be easily used on the client and server side
  3. Because of JSX, the code is more readable
  4. With React, writing UI test cases becomes very easy

2. Hello React

First of all, I need to introduce a few React packages, I directly use the teacher to download good

  • React core library, React extension library to manipulate DOM, Babel library to convert JSX to JS

const VDOM = <h1>Hello,React</h1>
ReactDOM.render(VDOM,document.querySelector(".test"))
Copy the code

3. Two methods for creating the virtual DOM and the real DOM

3.1 Creating a virtual DOM in JS

//1. Create a virtual DOM and create a DOM with nested formats
const VDOM=React.createElement('h1', {id:'title'},React.createElement('span', {},'hello,React'))
//2. Render the virtual DOM to the page
ReactDOM.render(VDOM,document.querySelector('.test'))
Copy the code

3.2 Jsx Creates a virtual DOM

//1. Create virtual DOM
	const VDOM = (  /* Do not use quotation marks here, because it is not a string */
    	<h1 id="title">
			<span>Hello,React</span>
		</h1>
	)
//2. Render the virtual DOM to the page
	ReactDOM.render(VDOM,document.querySelector('.test'))
Copy the code

Js writing method is not commonly used, commonly used to write JSX, after all, JSX is more in line with the habit of writing

JSX syntax

  1. Define the virtual DOM. You cannot use ‘ ‘

  2. Use {} to mix JS expressions in tags

id = {myId.toUpperCase()}
Copy the code

  1. The class name of the style specifies that class cannot be used; className is used

  2. The introverted style uses {{}} wrapping

style={{color:'skyblue'.fontSize:'24px'}}
Copy the code

  1. There cannot be multiple root tags, but only one root tag

  2. The label must be closed, or self-closed

  3. If it starts with a lowercase letter, the tag is converted to an HTML element with the same name. If there is no element in the HTML for the tag, an error is reported. If it starts with an uppercase letter, React renders the corresponding component, or reports an error if it doesn’t

Remember a few

1. The comments

Write it in curly braces

ReactDOM.render(
    <div>
    <h1>Small cheng</h1>{/ * comment... * /}</div>.document.getElementById('example'));Copy the code

An array of 2.

JSX allows you to insert an array into a template, and the array automatically expands to all its members

var arr = [
  <h1>Small cheng</h1>.<h2>classmate</h2>,]; ReactDOM.render(<div>{arr}</div>.document.getElementById('example'));Copy the code

Tip: JSX exercises

Generate Li from dynamic data

const data = ['A'.'B'.'C']
const VDOM = (
    <div>
        <ul>
            {
                data.map((item,index)=>{
                    return <li key={index}>{item}</li>})}</ul>
    </div>
)
ReactDOM.render(VDOM,document.querySelector('.test'))
Copy the code