Introduction to the React

React Developer tools. CRX download: pan.baidu.com/s/137XB-alp…

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. React effectively updates and renders the correct components when the data changes. The component receives parameters, called props, and returns a display view hierarchy via the Render method. The Render method returns a description of the content you want to render, and React takes that description and renders it to the screen. In particular, Render returns a React element, which is a lightweight description of the rendered content. Most React developers use a special syntax called JSX that makes it easier to write these structures. Each component is encapsulated so it can operate independently, which allows you to build complex UIs from simple components.

Jquery’s bottlenecks:

1) It is normal for a JS file to have thousands of lines

2) Various Ajax callbacks fly randomly all over the source file

3) HTML code and DOM manipulation are arbitrary

1.hello world

<! DOCTYPEhtml>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <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/[email protected]/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      function formatName(user) {
        return user.firstName + ' ' + user.lastName;
      }

      const user = {
        firstName: 'xu'.lastName: 'tongbao'
      };

      const element = (
        <h1>
          Hello, {formatName(user)}!
        </h1>
      );

      ReactDOM.render(
        element,
        document.getElementById('root'));</script>
  </body>
</html>
Copy the code

2. The clock

<! DOCTYPEhtml>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <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/[email protected]/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      function tick() {
        const element = (
          <div>
            <h1>Hello, world!</h1>
            <h2>It is {new Date().toLocaleTimeString()}.</h2>
          </div>
        );
        ReactDOM.render(
          element,
          document.getElementById('root')); }setInterval(tick, 1000);
    </script>
  </body>
</html>
Copy the code

3. Components and properties

<! DOCTYPEhtml>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <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/[email protected]/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      function Welcome(props) {
        return <h1>Hello, {props.name}</h1>;
      }

      const element = <Welcome name="xutongbao" />;
      ReactDOM.render(
        element,
        document.getElementById('root'));</script>
  </body>
</html>
Copy the code

4. Components reference components

<! DOCTYPEhtml>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <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/[email protected]/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      function Welcome(props) {
        return <h1>Hello, {props.name}</h1>;
      }

      function App() {
        return (
          <div>
            <Welcome name="xutongbao" />
            <Welcome name="Xu Tongbao" />
            <Welcome name="Milky Way" />
          </div>
        );
      }

      ReactDOM.render(
        <App />.document.getElementById('root'));</script>
  </body>
</html>
Copy the code

5. Extract components

<! DOCTYPEhtml>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <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/[email protected]/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      function formatDate(date) {
        return date.toLocaleDateString();
      }

      function Avatar(props) {
        return (
          <img className="Avatar"
               src={props.user.avatarUrl}
               alt={props.user.name} />
        );
      }

      function UserInfo(props) {
        return (
          <div className="UserInfo">
            <Avatar user={props.user} />
            <div className="UserInfo-name">
              {props.user.name}
            </div>
          </div>
        );
      }

      function Comment(props) {
        return (
          <div className="Comment">
            <UserInfo user={props.author} />
            <div className="Comment-text">
              {props.text}
            </div>
            <div className="Comment-date">
              {formatDate(props.date)}
            </div>
          </div>
        );
      }

      const comment = {
        date: new Date(),
        text: 'I hope you have fun learning React! '.author: {
          name: 'Xu Tongbao'.avatarUrl: 'http://placekitten.com/g/64/64'}}; ReactDOM.render(<Comment
          date={comment.date}
          text={comment.text}
          author={comment.author} />.document.getElementById('root'));</script>
  </body>
</html>
Copy the code

6. Use state and lifecycle clocks

<! DOCTYPEhtml>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <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/[email protected]/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      class Clock extends React.Component {
        constructor(props) {
          super(props);
          this.state = {date: new Date(a)}; }componentDidMount() {
          this.timerID = setInterval(
            () = > this.tick(),
            1000
          );
        }

        componentWillUnmount() {
          clearInterval(this.timerID);
        }

        tick() {
          this.setState({
            date: new Date()}); }render() {
          return (
            <div>
              <h1>Hello, world!</h1>
              <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
            </div>
          );
        }
      }

      ReactDOM.render(
        <Clock />.document.getElementById('root'));</script>
  </body>
</html>
Copy the code

7. Events (switch button)

<! DOCTYPEhtml>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <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/[email protected]/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      class Toggle extends React.Component {
        constructor(props) {
          super(props);
          this.state = {isToggleOn: true};

          // This binding is necessary to make 'this' work in the callback
          this.handleClick = this.handleClick.bind(this);
        }

        handleClick() {
          this.setState(prevState= > ({
            isToggleOn: !prevState.isToggleOn
          }));
        }

        render() {
          return (
            <button onClick={this.handleClick}>
              {this.state.isToggleOn ? 'ON' : 'OFF'}
            </button>
          );
        }
      }

      ReactDOM.render(
        <Toggle />.document.getElementById('root'));</script>
  </body>
</html>
Copy the code

8. Conditional rendering (login and exit)

<! DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<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/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class LoginControl extends React.Component {
  constructor(props) {
    super(props);
    this.handleLoginClick = this.handleLoginClick.bind(this);
    this.handleLogoutClick = this.handleLogoutClick.bind(this);
    this.state = {isLoggedIn: false};
  }

  handleLoginClick() {
    this.setState({isLoggedIn: true});
  }

  handleLogoutClick() {
    this.setState({isLoggedIn: false});
  }

  render() {
    const isLoggedIn = this.state.isLoggedIn;
    
    let button = null;
    if (isLoggedIn) {
      button = <LogoutButton onClick={this.handleLogoutClick} />;
    } else {
      button = <LoginButton onClick={this.handleLoginClick} />;
    }

    return (
      <div>
        <Greeting isLoggedIn={isLoggedIn} />
        {button}
      </div>); }}function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

function LoginButton(props) {
  return (
    <button onClick={props.onClick}>
      Login
    </button>
  );
}

function LogoutButton(props) {
  return (
    <button onClick={props.onClick}>
      Logout
    </button>
  );
}

ReactDOM.render(
  <LoginControl />.document.getElementById('root'));</script>
</body>
</html>
Copy the code

9. Keys

<! DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<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/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Blog(props) {
  const sidebar = (
    <ul>
      {props.posts.map((post) =>
        <li key={post.id}>
          {post.title}
        </li>
      )}
    </ul>
  );
  const content = props.posts.map((post) = >
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );
  return (
    <div>
      {sidebar}
      <hr />
      {content}
    </div>
  );
}

const posts = [
  {id: 1.title: 'name'.content: 'xutongbao'},
  {id: 2.title: 'name'.content: 'Xu Tongbao'}]; ReactDOM.render(<Blog posts={posts} />.document.getElementById('root'));</script>
</body>
</html>
Copy the code

10. Forms (controlled elements)

<! DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<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/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ' '};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Name:
          <input type="text" value={this.state.value} onChange={this.handleChange} />
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
}

ReactDOM.render(
  <NameForm />.document.getElementById('root'));</script>
</body>
</html>
Copy the code

11. Forms (file upload)

<! DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<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/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class FileInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(
      this
    );
  }
  handleSubmit(event) {
    event.preventDefault();
    alert(
      `Selected file - The ${this.fileInput.files[0].name
      }`
    );
  }

  render() {
    return (
      <form
        onSubmit={this.handleSubmit}>
        <label>
          Upload file:
          <input
            type="file"
            ref={input= >{ this.fileInput = input; }} / ></label>
        <br />
        <button type="submit">
          Submit
        </button>
      </form>
    );
  }
}

ReactDOM.render(
  <FileInput />.document.getElementById('root'));</script>
</body>
</html>
Copy the code

12. State promotion (putting common values and methods to change them in the parent component)

In a React application, there should be a “single source” rule for any mutable data. Typically, state is added first to the component that needs it for rendering. Then, if other components also need it, you can elevate the state to their nearest ancestor component. Instead of trying to synchronize state across different components, you should rely on data flow from top to bottom.

<! DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<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/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const scaleNames = {
  c: 'Celsius'.f: 'Fahrenheit'
};

function toCelsius(fahrenheit) {
  return (fahrenheit - 32) * 5 / 9;
}

function toFahrenheit(celsius) {
  return (celsius * 9 / 5) + 32;
}

function tryConvert(temperature, convert) {
  const input = parseFloat(temperature);
  if (Number.isNaN(input)) {
    return ' ';
  }
  const output = convert(input);
  const rounded = Math.round(output * 1000) / 1000;
  return rounded.toString();
}

function BoilingVerdict(props) {
  if (props.celsius >= 100) {
    return <p>The water would boil.</p>;
  }
  return <p>The water would not boil.</p>;
}

class TemperatureInput extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(e) {
    this.props.onTemperatureChange(e.target.value);
  }

  render() {
    const temperature = this.props.temperature;
    const scale = this.props.scale;
    return (
      <fieldset>
        <legend>Enter temperature in {scaleNames[scale]}:</legend>
        <input value={temperature}
               onChange={this.handleChange} />
      </fieldset>); }}class Calculator extends React.Component {
  constructor(props) {
    super(props);
    this.handleCelsiusChange = this.handleCelsiusChange.bind(this);
    this.handleFahrenheitChange = this.handleFahrenheitChange.bind(this);
    this.state = {temperature: ' '.scale: 'c'};
  }

  handleCelsiusChange(temperature) {
    this.setState({scale: 'c', temperature});
  }

  handleFahrenheitChange(temperature) {
    this.setState({scale: 'f', temperature});
  }

  render() {
    const scale = this.state.scale;
    const temperature = this.state.temperature;
    const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature;
    const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature;

    return (
      <div>
        <TemperatureInput
          scale="c"
          temperature={celsius}
          onTemperatureChange={this.handleCelsiusChange} />
        <TemperatureInput
          scale="f"
          temperature={fahrenheit}
          onTemperatureChange={this.handleFahrenheitChange} />
        <BoilingVerdict
          celsius={parseFloat(celsius)} />
      </div>
    );
  }
}

ReactDOM.render(
  <Calculator />.document.getElementById('root'));</script>
</body>
</html>
Copy the code

13. (Children)

<! DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<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/[email protected]/babel.min.js"></script>
<style type="text/css">
.FancyBorder {
  padding: 10px 10px;
  border: 10px solid;
}

.FancyBorder-blue {
  border-color: blue;
}

.Dialog-title {
  margin: 0;
  font-family: sans-serif;
}

.Dialog-message {
  font-size: larger;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-'+props.color} >
      {props.children}
    </div>
  );
}

function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    </FancyBorder>
  );
}

ReactDOM.render(
  <WelcomeDialog />.document.getElementById('root'));</script>
</body>
</html>
Copy the code

14. Combination (multiple placeholders)

<! DOCTYPEhtml>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World</title>
<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/[email protected]/babel.min.js"></script>
<style type="text/css">
html.body.#root {
  width: 100%;
  height: 100%;
}

.SplitPane {
  width: 100%;
  height: 100%;
}

.SplitPane-left {
  float: left;
  width: 30%;
  height: 100%;
}

.SplitPane-right {
  float: left;
  width: 70%;
  height: 100%;
}

.Contacts {
  width: 100%;
  height: 100%; 
  background: lightblue;
}

.Chat {
  width: 100%;
  height: 100%; 
  background: pink;
}

</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function Contacts() {
  return <div className="Contacts" />;
}

function Chat() {
  return <div className="Chat" />;
}

function SplitPane(props) {
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        {props.left}
      </div>
      <div className="SplitPane-right">
        {props.right}
      </div>
    </div>
  );
}

function App() {
  return (
    <SplitPane
      left={
        <Contacts />
      }
      right={
        <Chat />} / >
  );
}

ReactDOM.render(
  <App />.document.getElementById('root'));</script>
</body>
</html>
Copy the code

Related Posts

What is a deadlock? I heard it in the interview

What is a closure?

JS base type and reference type values