2022 is coming, the front end development is very rapid, now the front end is no longer writing simple pages, with the Web big front end, engineering is becoming more and more hot, there are also many frameworks. Many companies are not only using a single framework, as the front end development of the two most popular frameworks in the country, are necessary to master. Therefore, I decided to learn React at the end of this year when the epidemic was raging, so as to gain more competitiveness in my future job search.

Learning stage, if there is something wrong, welcome to leave a message in the comment area, I timely correction

This article has been serialized, other chapters portal ⬇️

Chapter 2 – Function components and Class components

Chapter 3 — Props and State

Chapter 4 – Event Handling

Chapter 5 -Ref and Refs

Chapter 6 – Life Cycle

Chapter 7 – Communicating Context across Components

Chapter 8 -React Hooks

JSX syntax understanding

Introduction of grammar

JSX is a syntax extension for JavaScript. It allows us to write a nice structure in JS, with react to describe the UI better, similar to a template, but with all the extra functionality of javascript.

Embedded expression

In JSX syntax, any javascript expression can be placed inside curly braces. Operations, functions, variables, if else statements, etc., but to use JSX you need to install Babel first. This is because normal script cannot parse such tags, so you need Babel to parse them.

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script type="text/babel"> // You must write type type
    const name = 'Josh Perez';
    const element = <h1>Hello, {name}</h1>;
<script>
Copy the code
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script type="text/babel"> // You must write type type
	const obj = {
		name: 'zhangsan'.age: 18
	};
	const element = <h1>I am {obj.age + 2} years old</h1>;
<script>
Copy the code
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script type="text/babel"> // You must write type type
	const getName = (name) = > {
		return name
	};
	const element = <h1>I am {getName(' xiaoming ')}</h1>;
<script>
Copy the code

Conditions apply colours to a drawing

JSX syntax is flexible, and unlike vue’s template template, we can incorporate JS into JSX syntax as much as possible. React is used as an example

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>

  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script type="text/babel">
    class Demo extends React.Component {
      constructor() {
        super(a)this.state = {
          stauts: true}}render() {
        return(
          <div>
            if(status) {
							<h1>Rendering the h1</h1>
						} else {
							<h2>Rendering the h2</h2>
						}
          </div>
        )
      }
    }
    ReactDOM.render(<Demo/>.document.querySelector('#app'))
  </script>
</body>
</html>
Copy the code

Attribute name and attribute value

The property name

In JSX we can write tags and add attributes to tags. Unlike native, attribute names in JSX are mostly small hump names to avoid conflicts with native HTML

<! -- class class name -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script type="text/babel"> // You must write type type
	const name = 'Josh Perez';
	const element = <h1 className="app">Hello, {name}</h1>;
<script>
Copy the code
<! -- Bind events -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script type="text/babel"> // You must write type type
	const name = 'Josh Perez';
	const element = <h1 onClick={this.handleClick}>Hello, {name}</h1>;
<script>
Copy the code
<! -- style attribute -->
<! {{}} double curly braces are used here because the outer curly braces stand for expressions, and the inner curly braces stand for style itself. {} -->
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<script type="text/babel">// You must write type const name = 'Josh Perez'; const element =<h1 style={{color: "red"}}>Hello, {name}</h1>;
<script>
Copy the code

Attribute values

The value of an attribute in JSX syntax is either a string literal or a JavaScript expression, both of which cannot exist at the same time, i.e. “” and {} can have only one oh ~