React Introduction and First experience


1.React?

  • React is a JAVASCRIPT library open sourced by Facebook
  • React is a declarative, efficient, and flexible JavaScript library for building user interfaces


2.React

Declarative programming

  • What is declarative programming?
    • It describes the nature of the goal so that the computer understands the goal, not the process
    • Declarative programming is telling the computer what to calculate rather than how to do it
  • Front-end development mode:
    • Declarative programming is the current model for the entire big front-end development: Vue, React, Flutter, SwiftUI
    • It allows us to maintain only our own state
    • When the state changes, React renders our UI based on the latest state

Componentized development

  • Components are an important idea in React
    • It provides an abstraction that allows us to develop a single reusable widget to construct our application
  • Application of componentization idea
    • With componentalization in mind, break the page up into small, reusable components whenever possible
    • This makes our code easier to organize and manage, and also more extensible

Multi-platform adaptation

  • React launched in 2013 as a Web page development app;
  • In 2015, Facebook launched ReactNative, a platform for mobile cross-platform development. (Although Flutter is currently very popular, many companies still use ReactNative);
  • In 2017, Facebook launched ReactVR, a virtual reality Web application; (VR will also be a hot application scenario as 5G becomes ubiquitous


React develop dependencies

  • Developing React must rely on these three libraries:
    • react: Contains the core code required for React
    • react-domReact Renders the core code required for different platforms
    • babel: Converts JSX to React code tools
  • React relies on these three libraries:
    • In fact, the three libraries are each doing their job, the goal is to let each library do its own thing
    • Why break it up?
    • React contains the core code shared by React and React-Native
  • react-domDifferent things can be done for Web and Native:
    • Web side:react-domwilljsxFinally render it realDOMIs displayed in the browser
    • Native client:react-domwilljsxRender to native controls (such as Butto on Android, UIButton on iOS)


4. Know the Bable

  • What is a Babel?
    • Is the front end is used very widely compiler, transcoder
    • You can convert ES6 code to ES5 code for execution in an existing environment
  • ReactandBabelThe relationship between:
    • By defaultReactYou don’t have tobabel
    • But only if we useReact.createElementTo write the source code, it is very cumbersome code readability
    • We can just write the JSX (JavaScript XML) syntax and let Babel help us translate itReact.createElement


5. Introduce React dependencies

  • How to add these three dependencies:
    • Method 1: Direct CDN import
    • Method 2: Add local dependencies
    • Method 3: NPM management
  • For the time being, we’ll introduce it directly through CDN
<script src="https://unpkg.com/react@16/umd/react.development.js" ></script>

<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

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

Copy the code


At the beginning of the React experience

1.React Is used


      

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>At the beginning of the React experience</title>

</head>

<body>

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

  <! Add React dependencies -->

  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>

  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

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



  <! Note: To use JSX, and want JSX code in script to be parsed, you must add type to the script tag.

  <script type="text/babel">

    // 
: JSX code

    ReactDOM.render(<h2>Hello World</h2>.document.getElementById('app'))

  </script>

</body>

</html>

Copy the code
  • React.renderfunction
    • Parameter 1: The content to render, either an HTML element or a React component
    • Parameter 2: Which HTML element to mount the rendered content to
  • We can get through{}Syntax to introduce external variables or expressions


2.React Initial experience of componentized development

  • The whole logic can be viewed as a whole, so we can encapsulate it as a component:
    • We have saidReactDOM.renderThe first argument is an HTML element or a component
    • So we can wrap the previous business logic into a component and pass it inReactDOM.renderThe first argument in the function
  • inReactHow do you encapsulate a component?
  • For the time beingclassThe way to encapsulate components:
    • Defines a class (class name uppercase; component names must be uppercase; lowercase is considered an HTML element) that inherits fromReact.Component
    • That implements the current componentrenderfunction
      • renderAmong the returnedjsxThe content, which React will help us render later
graphic 
// Encapsulate APP components

class App extends React.Component

  render(a){

   return (

    <div>hello</div>

  }

// Render component

ReactDOM.render(<App/>.document.getElementById ('app'))

Copy the code


3. Componentization – data dependency

  • The data in the component can be divided into two categories:
    • Data participating in interface updates: When data variables are used, the content rendered by the component needs to be updated
    • Data that does not participate in interface updates: When data variables are used, there is no need to update the content that will be rendered
  • The data that participates in the interface update is defined in the current objectstateProperties of the
    • We did this throughIn the constructor: This. state = {defined data}
    • When ourWhen the data changes, we callthis.setState 来Update the dataAnd,Notify the React to updateoperation
      • On update, the render function is called again and the interface is rendered using the latest data
graphic 


// Encapsulate APP components

class App extends React.Component

  constructor(a){

    super(a)

   // Define data

 this.state = {message: 'hello world'}

    // Use data

 render() {

   return (

  <div>

    <h2x{this.state.message}</h2>

  </div> 

    )}

}

Copy the code


4. Componentization – event binding

  • In the Reactevent: Defined in the labelOn + Event name
    • Such as:<button onClick={this.changeText}> changeText </button>
  • The currentWho does this point to in this function?
    • The default is undefined
    • This time around, because React isn’t rendered directly into the real DOM, the button we wrote was just a syntactic sugar, essentially a React Element object
    • So react is binding to our function while we’re listening herethis.The defaultThe next one isundefined
  • We may want to use the current object in a bound function, such as executethis.setStateDelta function, you have toGet the this of the current object
    • We need to bind this directly to the function when we call it
    • <button onClick={this.changetext.bind (this)}> changeText </button>