【英文】React学习笔记

Posted on 2021-07-30 Edited on 2023-12-09 In 前端学习指北 Views:

Preface

React (sometimes called React.js or ReactJS) is an open-source JavaScript library for rendering data as HTML views. React views are typically rendered using components that contain other components defined by custom HTML tags. React provides a model for programmers where child components cannot directly affect outer components (“data flows down”), allowing for efficient updates to the HTML document when data changes and clean separation of components in modern single-page applications. (Wikipedia)

JSX File

JSX is an extension of JavaScript (JS) and its essence is still JS.
JSX files are compiled using the babel compiler.

Syntax Format of JSX File

Before compilation, the syntax is the same as HTML.

1	<div>hello</div>

After compilation, it is essentially a JS file.

1	React.createElement("div", null, "hello");

Introduction of Compiler

Import the babel compiler into the html file to automatically compile the JSX syntax code.

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script type="text/babel">
  let html = <div>hello</div>;
</script>

Manually Compile JSX File

Manually compile the JSX file using the babel compiler.

Project Initialization

1	npm -y init

Download Scaffold

Download the babel scaffold @babel-cli.

1	npm install --save-dev @babel/core @babel/cli @babel/preset-react

Create a Babel Configuration File

Create a babel.config.js or .babelrc file.

babelrc

1
2
3

{
  "presets": ["@babel/preset-react"]
}

Use Scaffold

Use the scaffolding to compile the .jsx file.

<input>: The .jsx file before compilation.
<output>: The .js file after compilation.

1	npx babel <input>.jsx -o <output>.js

JSX Expression

JSX itself is an expression.
Whether it is in JSX content, attribute, or JSX itself, JSX expressions can be used.

1
2
3

let name = "";
let jsx = <div>{name}</div>;
let jsx = <div name={name}></div>;

className

class cannot be used in JSX to add class names to elements because JSX is essentially JS and class is a keyword in JS. Therefore, className should be used instead of class to add class names to elements.

1	let jsx = <div className="div"></div>;

Automatic Expansion of Arrays

JSX automatically iterates through arrays.

let arrs = [
    <div key="1">1</div>,
    <div key="2">2</div>,
    <div key="3">3</div>
]
let jsx = <div>{arrs}</div>
ReactDOM.render(jsx, document.getElementById("app"));

Operators

JSX syntax also supports operators.
Display data dynamically based on boolean values.

Ternary Operator

1
2
3

let bool = true;
let jsx = <div>{bool?<div>hello</div>:null}</div>;
ReactDOM.render(jsx, document.getElementById("app"));

AND Operator

1
2
3

let bool = true;
let jsx = <div>{bool&&<div>hello</div>}</div>;
ReactDOM.render(jsx, document.getElementById("app"));

Loops

In JSX, loops should not use for, but should use map.

let arrs = [
  {id: 1, name: "zhangsan"},
  {id: 2, name: "lisi"},
  {id: 3, name: "wangwu"}
];
let jsx =
  <div>
    <ul>
      {
        arrs.map(function(p, index) {
          return <li key={index}>{p.name}</li>
        })
      }
    </ul>
  </div>;
ReactDOM.render(jsx, document.getElementById("app"));

Events

Add events to components using on+event name.
This writing style automatically passes the event object as a parameter.

function fn(event) {
  console.log("hello");
}
let jsx = <button onClick={fn}>按钮</button>;
ReactDOM.render(jsx, document.getElementById("app"));

Passing Custom Parameters

Using Arrow Functions

An arrow function can be used to pass a custom parameter.
In this case, the second parameter is the event object.

function fn(e, event) {
  console.log(e);
}
let jsx = <button onClick={()=>{fn("hello")}}>按钮</button>;
ReactDOM.render(jsx, document.getElementById("app"));

Using bind Function

The bind function can also be used to pass custom parameters. The custom parameters passed should be defined on the second parameter.

function fn(e) {
  console.log(e);
}
let jsx = <button onClick={fn.bind(null, "hello")}>按钮</button>;
ReactDOM.render(jsx, document.getElementById("app"));

Introduction of React

Importing via CDN

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

Hello World

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>

<div id="app">

</div>

</body>
<script type="text/babel">

  let html1 = <div>hello world</div>;
  ReactDOM.render(html1, document.getElementById("app"));

</script>
</html>

React Functions

Creating a Label

A component can also be created directly through JSX code.
Returns a virtual object.

First parameter: tag name
Second parameter: tag attributes
Third parameter: tag content

1	React.createElement("div", null, "hello");

翻译结果:

Preface

React (sometimes called React.js or ReactJS) is an open-source JavaScript library that renders data into HTML views. React views are usually rendered using components that include other components defined by custom HTML tags. React provides a model for programmers where child components cannot directly influence outer components (“data flows down”), enabling effective updates to the HTML document when data changes and clean separation between components in modern single-page applications. (Wikipedia)

JSX Files

JSX is an extension of JavaScript (JS) and its essence is still JS.
JSX files are compiled using the babel compiler.

Syntax Format of JSX Files

Before compilation, the syntax is similar to HTML.

1	<div>hello</div>

After compilation, it essentially becomes a JS file.

1	React.createElement("div", null, "hello");

Importing Compiler

Import the babel compiler into the HTML file to automatically compile JSX syntax code.

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script type="text/babel">
  let html = <div>hello</div>;
</script>

Manually Compiling JSX Files

Manually compile JSX files using the babel compiler.