React Getting Started example

Learning react is not an overnight thing, the introduction seems not so simple. But it's all worth it.

Today brings us a detailed example of react, the example is not difficult, but for beginners, enough to understand the react thinking and writing process. You will benefit greatly from every detail of the example you have completed. Now let's get started.
Code download
Preview
First, let's explain what this example does. This paper realizes the foreground application of a single page personnel Management system. Includes the following features:

A list of basic personnel information;
The entry and deletion of personnel;
View of personnel details;
Edit the personnel information;
Screening according to the person's identity;
Sorting according to some attributes of the person;
According to the person's name, age, identity, gender and other key words for people search.
The page is previewed as follows:

Figure 1

Personnel Management System
Code download
This article constructs the react component the time, uses the ES6 syntax, finally uses the Webpack to pack. It is better to have the basics and I will make a concise statement in the relevant places.

The first step: dividing the UI Component
React is all about modular, composable components.

The react is modular and component-structured. Our first step here is to divide the application into components. I circled the various components we were about to implement on the basis of figure I, figure II. The results are shown in Figure three, figure four:

Figure 3

Figure 4

The components of each loop function as follows, this is the framework of this application, please be sure to see clearly, where Italic is the name of each component:

Managesystem figure three outermost red box, which is the outermost container of the management module, accommodates the whole application;
Staffheader figure three top blue boxes, which receive input from user operations, including keyword search input, filter criteria, and sorting methods;
Staffitempanel The middle blue box, which is used to show all entries based on user actions (keyword search, filtering, sorting);
Stafffooter The bottom blue box, which is used to add new people;
Staffitem the red box in the inner layer of the diagram, which is used to show the basic information of a person, including the buttons for deletion and details operation;
Staffdetail the red box in Figure four, the details of the entry are displayed whenever you click on the Staffitem ' details '. This module is used to display the details of the staff, and also has the function of editing the personnel information.
To show the frame structure more clearly:

Managesystem

    staffheader

    staffitempanel

        staffitem
        staffitem
        staffitem ...

    Stafffooter

    Staffdetail (show only after clicking on the details of an item)

Step two: Build a static version of the React application
In the first step we have divided the components and explained the responsibilities of each component. Next we step through our application, first we do a static version of the react, only for the render UI component, but does not contain any interaction.

This step we only need to refer to figure one, figure two to do it, most of the work is basically to use JSX step-by-Steps to write HTML code. This process does not need to think too much. Only one render () method is included in each component.

It should be noted that the static version of the application, the data is passed down by the parent component down through the props attribute, the State property is not used, remember, State is only for dynamic interaction.

The application of a relatively large number of components, we may wish to adopt a bottom-up approach, starting from the subassembly.

All right, let's get started.

Staffheader
First creates a staffheader.js file, taking Staffheader as an example. is as follows:

import React from 'react';
export default class StaffHeader extends React.Component {

    render () {
        return (
          <div>
              <h3 style = {{'text-align': 'center'}}> Personnel Management System </ h3>
              <table className = "optHeader">
                <tbody>
                  <tr>
                    <td className = "headerTd"> <input type = 'text' placeholder = 'Search ...' /> </ td>
                    <td className = "headerTd">
                        <label for = 'idSelect'> Personnel screening </ label>
                        <select id = 'idSelect'>
                            <option value = '0'> All </ option>
                            <option value = '1'> Director </ option>
                            <option value = '2'> Teacher </ option>
                            <option value = '3'> Student </ option>
                            <option value = '4'> Internship </ option>
                        </ select>
                    </ td>
                    <td>
                        <label for = 'orderSelect'> Arrange method </ label>
                        <select id = 'orderSelect'>
                            <option value = '0'> Identity </ option>
                            <option value = '1'> Age rise </ option>
                            <option value = '2'> Age reduction </ option>
                        </ select>
                    </ td>
                  </ tr>
                </ tbody>
              </ table>
          </ div>
        );
    }
}
This component is mainly used to provide a search box, a personnel filter drop-down box, and an arrangement method drop-down box. That's right, our first step is to build a static version of React. Refer to the blue box at the top of Figure 3 for the appearance. Of course, in order to achieve the final style, the cooperation of css is required. Css is not the focus of this article. The css of this application is also very simple. Check the source code yourself.

StaffItem
StaffItem is the basic information component of each specific staff. It is used to display the basic information of staff and receive the user's delete and click details operations. Create a new StaffItem.js (the component is referenced in StaffItemPanel):

import React from 'react';
export default class StaffItem extends React.Component {

    render () {
        return (
              <tr
                style = ({'cursor': 'pointer'}}
              >
                <td className = 'itemTd'> {this.props.item.info.name} </ td>
                <td className = 'itemTd'> {this.props.item.info.age} </ td>
                <td className = 'itemTd'> {this.props.item.info.id} </ td>
                <td className = 'itemTd'> {this.props.item.info.sex} </ td>
                <td className = 'itemTd'>
                    <a className="itemBtn"> Remove </a>
                    <a className="itemBtn"> details </a>
                </ td>
              </ tr>
        );
    }
}
StaffItemPanel
Next is StaffItemPanel. This component is only used to display the individual personnel items passed in by the parent component.

import React from 'react';
import StaffItem from './StaffItem.js';
export default class StaffItemPanel extends React.Component {

    render () {
        let items = [];

        if (this.props.items.length == 0) {
            items.push (<tr> <th colSpan = "5" className = "tempEmpty"> No users yet </ th> </ tr>);
        } else {
            this.props.items.forEach (item => {
                items.push (<StaffItem key = (item.key) item = (item) />);
            });
        }

        return (
          <table className = 'itemPanel'>
            <thead>
                <th className = 'itemTd'> Name </ th>
                <th className = 'itemTd'> Age </ th>
                <th className = 'itemTd'> Identity </ th>
                <th className = 'itemTd'> Gender </ th>
                <th className = 'itemTd'> Operation </ th>
            </ thead>
            <tbody> {items} </ tbody>
          </ table>
        );
    }
}
The functionality of this component is relatively simple, where

 if (this.props.items.length == 0) {
            items.push (<tr> <th colSpan = "5" className = "tempEmpty"> No users yet </ th> </ tr>);
        } else {
            this.props.items.forEach (item => {
                items.push (<StaffItem key = {item.key} item = {item} />);
            });
        }
It is to give a corresponding prompt when there is no entry, as shown below:
Getting started with React
Figure 5

StaffFooter
The function of StaffFooter component is to add new staff and create a new StaffFooter.js file:

import React from 'react';
export default class StaffFooter extends React.Component {

    render () {
        return (
          <div>
            <h4 style = {{'text-align': 'center'}}> Add personnel </ h4>
            <hr />
            <form ref = 'addForm' className = "addForm">
                <div>
                  <label for = 'staffAddName' style = {{'display': 'block'}}> name </ label>
                  <input ref = 'addName' id = 'staffAddName' type = 'text' placeholder = 'Your Name' />
                </ div>
                <div>
                  <label for = 'staffAddAge' style = {{'display': 'block'}}> Age </ label>
                  <input ref = 'addAge' id = 'staffAddAge' type = 'text' placeholder = 'Your Age (0-150)' />
                </ div>
                <div>
                  <label for = 'staffAddSex' style = {{'display': 'block'}}> Gender </ label>
                  <select ref = 'addSex' id = 'staffAddSex'>
                    <option value = 'Male'> Male </ option>
                    <option value = 'Female'> Female </ option>
                  </ select>
                </ div>
                <div>
                  <label for = 'staffAddId' style = {{'display': 'block'}}> Identity </ label>
                  <select ref = 'addId' id = 'staffAddId'>
                    <option value = 'Director'> Director </ option>
                    <option value = 'Teacher'> Teacher </ option>
                    <option value = 'student'> student </ option>
                    <option value = 'Internship'> Internship </ option>
</ select>
                </ div>
                <div>
                  <label for = 'staffAddDescrip' style = {{'display': 'block'}}> personal description </ label>
                  <textarea ref = 'addDescrip' id = 'staffAddDescrip' type = 'text'> </ textarea>
                </ div>
                <p ref = "tips" className = 'tips'> Submission succeeded </ p>
                <p ref = 'tipsUnDone' className = 'tips'> Please enter complete personnel information </ p>
                <p ref = 'tipsUnAge' className = 'tips'> Please enter the correct age </ p>
                <div>
                  <button> Submit </ button>
                </ div>
            </ form>
          </ div>
        )
    }
}
The code looks long, but it is actually an html form. This step is basically an operation that does not require much thought. The code does not have any difficulty in understanding. Remember, we are now going to put the entire framework together and make it a static Version of the application. Similarly, to render the final style, some css is needed, and you can refer to the source code yourself. The appearance is shown in the bottom blue box in Figure III.

StaffDetail
Normally, this component is not displayed. Only when the user clicks on the details of an item, I use an animation effect to ‘emerge’ the component. The method is to set the z-index of the component to a large value in the css, such as 100, and then achieve the emerging effect through the animation of gradually changing the background transparency. At present, we only need to do a static version of React, which has not yet realized the user's click operation interaction, so here only need to create the following js file, and set the .overLay display to none in the css, the css file in the source code has been it is done.

import React from 'react';
export default class StaffDetail extends React.Component {

    render () {
      let staffDetail = this.props.staffDetail;
      if (! staffDetail)
        return null;

      return (
          <div className = "overLay">
            <h4 style = ({'text-align': 'center'}}> Click 'Finish' to save changes, click 'Close' to discard unsaved changes and exit. </ h4>
            <hr />
            <table ref = "editTabel">
              <tbody>
                <tr>
                  <th> Name </ th>
                  <td> <input id = 'staffEditName' type = "text" defaultValue = {staffDetail.info.name}> </ input> </ td>
                </ tr>
                <tr>
                  <th> Age </ th>
                  <td> <input id = 'staffEditAge' type = "text" defaultValue = {staffDetail.info.age}> </ input> </ td>
                </ tr>
                <tr>
                  <th> Gender </ th>
                  <td>
                    <select ref = 'selSex' id = 'staffEditSex'>
                      <option value = "Male"> Male </ option>
                      <option value = "female"> female </ option>
                    </ select>
                  </ td>
                </ tr>
                <tr>
                  <th> Identity </ th>
                  <td>
                    <select ref = "selId" id = 'staffEditId'>
                      <option value = "Director"> Director </ option>
                      <option value = "teacher"> teacher </ option>
                      <option value = "student"> student </ option>
                      <option value = "Internship"> Internship </ option>
                    </ select>
                  </ td>
                </ tr>
                <tr>
                  <th> Personal description </ th>
                  <td> <textarea id = 'staffEditDescrip' type = "text" defaultValue = {staffDetail.info.descrip}> </ textarea> </ td>
                </ tr>
              </ tbody>
            </ table>