React basic study notes

Introduction and preparation

Create a React project

To create a React project, you need to install a lot of things, React itself, and some necessary tools, such as Babel for compiling JavaScript, and webpack for packaging..

create-react-app This small tool can prepare all the resources we need to create a React project... Make sure you have installed node and npm on your computer..

Then use npm to install create-react-app ..

npm install -g create-react-app

Then use it to create a react project... first go to the place where you want to save the project.. such as my desktop.. create-react-app followed by the name of the project..

create-react-app my-app

This tool will automatically download the resources we need..

After completion, go to the directory of the created project...

cd my-app

Execute it again

npm start

This command can start the created react project... Then it will automatically open the created project on the browser... Now what you see is a simple React project..

Introduction to React

React is something that creates display components. After creating components, they will be displayed according to your design. When the data on the components changes, they will automatically update the changes in a very efficient way..

Structure of a React application

node_modules stores here some things that the project depends on.. react itself.. webpack.. babel, and some other things they depend on... The project's dependencies are clearly stated in the package.json file..

Development depends on here, there is only one react-scripts, and all the tools needed by the react project will be clearly stated in this package..

dependencies is the project's dependencies.. here is react... and react-dom...

Under this project, there is a public directory. Generally, public resources will be placed under this directory.. Now there is a favicon.ico... and an index.html..

src means source, the source of the application..

index.js is the entry file of the application... The head of the document first imports some things... such as React, ReactDOM... These are some things that must be used in general React projects..

The App below is a well-defined React component... and then imports a css file...

The render method of ReactDOM is used below to display a component... which is the App component imported above...

Open this App.js again

A component called App is defined in this file... The components displayed on the browser..

At the beginning of the file, two things are imported, one is React, and the other is Component, which is needed to define React components..

Let's import a logo.svg...it's this React logo here...

Below it, another css file is imported.. In this file, some css styles that need to be used in the component are defined...

Continue to look at this App.js

A React component can be a class.. This class inherits from Component in React…

In this class, the render method is used...it returns something to be displayed in the component..

Here you will see something like html, but there are some differences, such as adding css class on top of html, using class, here is className... because these are not html.. It is a special format , called JSX.. React will convert them to normal JavaScript...

At the end of the file, export the React component defined above... so that you can import and use this React component in other places..

Compile a React application for production

npm run build

The compiled application will be placed under the build directory of the project..
static contains the css, js and some media files required by the application..

We can also run the compiled application locally..

Install pushstate-server first..

npm install -g pushstate-server

Execute it again

pushstate-server build

Then open localhost:9000 on the browser

Shown here is a React app compiled for production...

components

Define components - Component

React allows us to divide the things to be displayed into different components, and then combine these components together for use.

import React from 'react';//导入 react 模块 .. 导入进来可以叫它 React ..

//定义的组件可以是一个类，先用一个 class .. 然后是组件的名字 .. CommentBox .. 让它去继承 React 的 Component ..
class CommentBox extends React.Component{
    
    
//render() 方法，在这里去定义组件要显示的东西,返回的就是要显示的东西
    render(){
    //在这个 return 的后面添加一组括号 .. 这样你可以在多行去定义要显示的东西
        return(
            //这些要显示的东西可以直接使用类似 html 的形式 .. 一般这些属性跟在普通的 html 上是一样的
            //因为 class 是 javascript 保留的关键词 .. 所以这里我们可以用一个 className 来表示在 html 上的 class
            <div className="ui comments">
                <h1>评论</h1>
                <div className="ui divider"/>
            </div>
            //. 这里我们定义的要显示的东西用的是 jsx 的格式 .. 它会被转换成普通的 javascript
        );
    }
}

//在文件的底部可以把它作为这个模块默认的东西导出来 .. 这样在其它的地方我们可以导入这个组件的功能 ..
export { CommentBox as default }

show-reactdom-render

Use the style of semantic ui

cnpm install semantic-ui-react --save-dev
cnpm install semantic-ui-css --save

Modify index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import 'semantic-ui-css/semantic.min.css';
import CommentBox from './comment/CommentBox';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<CommentBox />, document.getElementById('root'));
registerServiceWorker();

Modify index.html

   <div class="ui container" style="padding:30px">
   <div id="root"></div>
   </div>

Composite components

CommentBox.js

import React from 'react';
import CommentList from './CommentList';
import CommentForm from './CommentForm';

class CommentBox extends React.Component{
    
    
    render(){
        return(
            <div className="ui comments">
                <h1>评论</h1>
                <div className="ui divider"/>
                <CommentList/>
                <CommentForm/>
            </div>
          );
    }
}

export { CommentBox as default }

CommentForm.js

import React from 'react';

class CommentForm extends React.Component{
    
    
    render(){
        return(
            <form action="" className="ui reply form">
                <div className="field">
                    <input type="text" placeholder="姓名"/>
                </div>
                <div className="field">
                    <textarea name="" id="" cols="30" rows="10" placeholder="评论"/>
                </div>
                <button type="submit" className="ui blue button">
                    添加评论
                </button>
            </form>
        );
    }
}

export { CommentForm as default }

CommentList.js

import React from 'react';

class CommentList extends React.Component{
    
    
    render(){
        return(
            <div className="ui comments">
                评论列表
            </div>
        );
    }
}

export { CommentList as default }

Attributes

attribute-props

React elements are all just DOM tags:

const element = <div />;

React elements can also be user-defined components:

const element = <Welcome name="Sara" />;

When React encounters an element that is a user-defined component, it passes the JSX properties to that component as a single object called "props".

Parent component passes value to child component: jsx attribute
Child component receives data: this.props

Add Comment.js

import React from 'react';

class Comment extends React.Component {
    
    
formatDate = (date) => {
        return date.toLocaleDateString();
    }
    render() {
        return (
            <div className="comment">
                <a className="avatar">
                    <img src={
   
   this.props.author.avatarUrl}  alt={
   
   this.props.author.name}/>
                </a>
                <div className="content">
                    <a className="author">{
   
   this.props.author.name}</a>
                    <div className="metadata">
                        <span className="date">{
   
   this.formatDate(this.props.date)}</span>
                    </div>
                    <div className="text">{
   
   this.props.text}</div>
                    <div className="actions">
                        <a className="reply">Reply</a>
                    </div>
                </div>
            </div>
        );
    }
}

export {Comment as default}

Use this component in CommentList, then CommentList is the parent component, and Comment is the child component

import React from 'react';
import Comment from './Comment';

const comment1={
    date:new Date(),
    text:'天气真好',
    author:{
        name:'宝宝',
        avatarUrl:'http://placekitten.com/g/64/64'
    }
}
const comment2={
    date:new Date(),
    text:'出去玩呀',
    author:{
        name:'小小',
        avatarUrl:'http://placekitten.com/g/61/61'
    }
}

class CommentList extends React.Component{
    
    
    render(){
        return(
            <div className="ui comments">
               <Comment
                   date={comment1.date}
                   text={comment1.text}
                   author={comment1.author}/>
               <Comment
                   date={comment2.date}
                   text={comment2.text}
                   author={comment2.author}/>
            </div>
        );
    }
}

export { CommentList as default }

get data from dad

Component data.. These data should generally come from the server.. You can request data from the server through some methods.. Let’s
simulate it first

Define a variable representing comment data in index.js. The name is comments. Its value is a data in json format or a js object. In this render method, pass this data to the CommentBox component. Add a data attribute. . In this way, you can get the value of the attribute data in the CommentBox

Key value: Because when processing data later, it should be traversed as an array.
Each child in an array or iterator should have a unique “key” prop.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import 'semantic-ui-css/semantic.min.css';
import CommentBox from './comment/CommentBox';
import registerServiceWorker from './registerServiceWorker';

// var comments = [
//     {
//         "key":"1",
//         "date": new Date(),
//         "text": "天气真好",
//         "author": {
//             "name": "小小",
//             "avatarUrl": "http://placekitten.com/g/61/61"
//         }
//     },
//     {
//         "key":"2",
//         "date": new Date(),
//         "text": "出去玩呀",
//         "author": {
//             "name": "宝宝",
//             "avatarUrl": "http://placekitten.com/g/64/64"
//         }
//     }
//
// ]
var comments = [
    {
        key:'1',
        date: new Date(),
        text: '天气真好',
        author: {
            name: '小小',
            avatarUrl: 'http://placekitten.com/g/61/61'
        }
    },
    {
        key:'2',
        date: new Date(),
        text: '出去玩呀',
        author: {
            name: '宝宝',
            avatarUrl: 'http://placekitten.com/g/63/61'
        }
    }

]


ReactDOM.render(<CommentBox data={comments} />, document.getElementById('root'));
registerServiceWorker();

In the CommentBox component.. it embeds the CommentList component, use this.props.data in the render method to get the passed data, and then give it to the CommentList component

import React from 'react';
import CommentList from './CommentList';
import CommentForm from './CommentForm';

class CommentBox extends React.Component{
    
    
    render(){
        return(
            <div className="ui comments">
                <h1>评论</h1>
                <div className="ui divider"/>
                <CommentList data={
   
   this.props.data}/>
                <CommentForm />
            </div>
          );
    }
}

export { CommentBox as default }

CommentList .. Let's transform its render method again.. You can process the passed data in a loop

import React from 'react';
import Comment from './Comment';

class CommentList extends React.Component{
    
    
    render(){
        let commentNodes = this.props.data.map( comment => {
            return (
                <Comment
                    key={comment.key}
                    date={comment.date}
                    text={comment.text}
                    author={comment.author}/>
            );
        });

        return(
            <div>
                {commentNodes}
            </div>
        );
    }
}

export { CommentList as default }