“This is the first day of my participation in the Gwen Challenge in November. See details of the event: The last Gwen Challenge in 2021”.

What is the React

React is a JS library (not a framework) whose main purpose is to build user interfaces

It breaks down complex user interfaces into embedded and reusable components and splices them together.

React itself does not deal with routing, styling, or data fetching. If you need the above functionality, consider the Nextjs framework

Other frameworks include:

  • Gatsby React+GraphQL
  • Razzle is similar to Next-js, but with more freedom in configuration.

What does React do

As mentioned above, React’s main function is to build the user interface from a single button to an entire app.

React Native can also be used to create Android, iOS apps or Windows and macOS software

The React team provides the React developer tool to check whether a page has React development. If yes, the corresponding button on the toolbar will light up.

React development requires Javascript

React is a Javascript framework, if you want to use it, you need to know Javascript, and provide two modern JavaS cript and MDN Chinese fixes.

React Hello World

React Hello World Hello World React Hello World Hello World

function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

export default function App() {
  return <Greeting name="world" />
}
Copy the code

You can view and edit the source code online here

Learning the React

React builds the user interface through components. A component can be as simple as a button or as complex as an entire page.

Take a look at the image, which is a very common user profile picture list module

This list can be split into 3 x Profile + a Gallery component (used to wrap 3 Profile components and text).

React is implemented as follows

function Profile() {
  return (
    <img
      src="https://i.imgur.com/MK3eW3As.jpg"
      alt="Katherine Johnson"
      className="avatar"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

Copy the code

This kind of HTML tag syntax is called JSX. JSX stands for JS+XML. Much of the syntax is the same as HTML, such as the img tag above, with slight differences, such as JSX using className instead of class.

The data above is static, and the three heads are identical. What if I wanted to change it to the following, where the head data is passed in as a parameter to show different content?

In React, the parameters passed by the parent component to its children are called Props, so the Profile component can be changed to the following

function Profile({ name, imageUrl }) {
  return (
    <img
      className="avatar"
      src={imageUrl}
      alt={name}
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile
        name="Lin Lanying"
        imageUrl="https://i.imgur.com/1bX5QH6.jpg"
      />
      <Profile
        name="Gregorio Y. Zara"
        imageUrl="https://i.imgur.com/7vQD0fPs.jpg"
      />
      <Profile
        name="Hedy Lamarr"
        imageUrl="https://i.imgur.com/yXOvdOSs.jpg"
      />
    </section>
  );
}
Copy the code

SRC ={imageUrl} curly braces are used to execute JS code.

The above implementation of Profile component dynamic fetch, but the Gallery is still dead 3. In general, the data of such avatars is returned through the interface, and the quantity is not determined. In order to accommodate dynamic lists, we can change the code as follows

export const people = [{
  id: 0.name: 'Creola Katherine Johnson'.imageId: 'MK3eW3A'
}];

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      {people.map(person => (
        <Profile
          key={person.id}
          name={person.name}
          imageId={person.imageId}
        />
      ))}
    </section>
  );
}
Copy the code

The final display is as follows

Add the interaction

It shows how to display a list, but there is no interaction such as joining the purchased car, toggle, and scrolling to show the next image.

React uses the state variable to record component state. Use the useState function if you want to useState. The function that starts with useXXX is called Hook, and its main function is to turn functions into React components. The useState entry is the initial value of the state variable and returns the state variable and a function that sets the value of the state variable.

const [index, setIndex] = useState(0);
const [showMore, setShowMore] = useState(false);
Copy the code

For example, the useState function is called twice, and the two state variables index and showMore are returned respectively, corresponding to the setIndex and setShowMore update functions.

An x entry in useState(x) can be a primitive type, an object, or an array. Here is a todolist example


export default function List() {
  const [name, setName] = useState("");
  const [artists, setArtists] = useState([]);

  return (
    <section>
      <h1>The great poet</h1>
      <input value={name} onChange={(e)= > setName(e.target.value)}/>
      <button
        onClick={()= >{// Add to list setArtists([...artists, {name: name}]); / / to empty elegantly-named setName (" "); }} > Add</button>
      <ul>} {artists. Map ((artist) => (<li>{artist.name}</li>
        ))}
      </ul>
    </section>
  );
}
Copy the code
  1. Two calls to useState define the state variables name and artists respectively. Name is used to store the input value, and artists is an array that is iterated over to show the value taken
  2. Listen for the input onChange event and assign name by calling setName. Then add the name to the array using the setArtist function
  3. In the ul,{}JSX executes js syntax, iterating through the output list

For other examples, the source code isForm part of theandBy some

Management of the state

The initial value of state can be either a primitive type or an array of objects. In addition to state, we have props.

Therefore, how to better manage state, the core idea of which is to avoid repeated definition of state

The following principles should be followed:

  1. If it is a constant, do not define it in state
  2. If the value is in props, do not define it in state.
  3. If a value can be computed by other attributes, do not define it in state.
  4. Multiple child components have an exclusive operation, promoting state to the parent component.

The first 3 are well understood, mainly the fourth exclusive operation. This is usually the case when a list needs to highlight a row. In order to highlight a line, we must have a variable such as activeIndex that records which line is highlighted. In this case, the activeIndex definition is appropriate in the parent component.

Property calculation examples, you can see here before the modified source code and modified source code

Exclusive operation example source code