The first step of getting started with React

1. What is React?

2. Installation and use of scaffolding

1. Scaffold installation

2. New project

3. Project catalog introduction

4. Plug-in recommendation - Simple React Snippets

5. React Syntax

jsx syntax

template syntax

text rendering

html rendering

conditional rendering

list rendering

incident response

Types of React components

function component

class component

The data state of the component

---

1. What is React?

React is a JavaScript library produced by Facebook for creating user interfaces

Features : component thinking , one-way data flow , virtual DOM nodes

2. Installation and use of scaffolding

1. Scaffold installation

npm i create-react-app -g

2. New project

 Create project:

create-react-app 项目名称

Startup project:

cd 项目名称
npm start

The command line display screen after running:

The page will be opened automatically, and this screen is successful!

3. Project catalog introduction

 

4. Plug-in recommendation -  Simple React Snippets

 Quickly generate code and improve code speed, see the documentation of the plugin for details

 

 

5. React Syntax

jsx syntax

JavaScript nested use html template

Features:

1. There is one and only one root node
2. {} write js
3. class changed to className
4. array can contain html
5. Object styles automatically expand
6. {/* comment */}

 code:

/* App.css */
.myh{
  color: blue;
}

//App.js
import "./App.css";
//创建ap组件
const arr = [<h1 key="a">AAA</h1>, <p key="b">BBB</p>, <h3 key="c">CCC</h3>];
const stl = { fontSize: "24px", color: "#f70" };
function App() {
  //返回一段dom节点
  return (
    <div>
      <h1 className="myh"> hello </h1>
      {arr}
      <p style={stl}>Mewow</p>
    </div>
  );
}
//导出app组件
export default App;

 operation result:

template syntax

 (Currently modified in App.js)

text rendering

const str = "hello Mewow";
function App() {
  return (
    <div>
      <h1> 模板语法 </h1>
      <p> 1. 文本渲染 </p>
      <p> {str} </p>
      <p> {2 + 3} </p>
      <p> {str.split("").reverse().join("")} </p>
    </div>
  );
}
export default App;

html rendering

 Need to use dangerouslySetInnerHTML={ { __html: msg }}

const msg = "<strong>Me</strong>Wow";
function App() {
  return (
    <div>
      <p>2.html渲染</p>
      <p dangerouslySetInnerHTML={
   
   { __html: msg }}></p>
    </div>
  );
}
export default App;

conditional rendering

 With the ternary operator or &&

const score = 80;
let flag = true;
function App() {
  return (
    <div>
      <p>3.条件渲染</p>
      {score}
      {score >= 60 ? "及格" : "再学一遍"}
      {flag && <p>芝麻开门</p>}
    </div>
  );
}
export default App;

list rendering

 With the help of map function

const list = ["react", "vue", "angular"];
function App() {
  return (
    <div>
      <p>4.列表渲染</p>
      {list.map((item, index) => (
        <p key={index}>{item}</p>
      ))}
    </div>
  );
}
export default App;

 The result of running the above code:

incident response

1.  React events are consistent with js events and need to be written in camel case
2. The event needs to respond to a function
3. Parameter passing of event function

function App() {
  function say(str) {
    alert("hi!" + str);
  }
  return (
    <div>
      <h1> 事件 </h1>
      <button onClick={() => alert("hello")}> 按钮 </button>
      <button onClick={say.bind(this, "say1")}> 传参按钮1 </button>
      <button onClick={() => say("say2")}> 传参按钮2 </button>
    </div>
  );
}

export default App;

Types of React components

function component

Features:

1. Simple and fast, no this, no state data, no life cycle
2. Without this/state, the coupling of components is reduced, and the reusability and scalability of components are stronger
3. Applies to display type "View Component"

structure:

function App(){
    retuen(<div>...</div>)
}
export defaule App;

 Shortcut key: ffc+tab

class component

Features: There are this, state, and life cycle, suitable for "container components" that centrally process data

structure:

import React, { Component } from "react";

class  extends Component {
  constructor(props) {
    super(props);
  }
  state = {  }
  render() { 
    return (<div>...</div>);
  }
}
 
export default ;

Shortcut key: imrc+tab ccc+tab

The data state of the component 

Define state state ={num:5}

Change state this.setState ({num:10} )

---