17-7-25-js Records

First of all, why do you say that every day, Friday, Saturday and Sunday are not updated. Because in Friday, the boss took the initiative to find me to talk about the positive salary 4-4.5k.
Originally wanted to be 6K, and then inquired about a circle company's small partners, are 5-5.5, I set myself to 5 K.
Never thought, only 4-4.5, estimated to be 4.5 then deducted all kinds later, on 4 K.
It's not that you can't live, you feel a little low compared to the small partners around you. So the mood is a little low.
These two days are also playing, as a relaxed mood.
I also went to the internet to find a lap, found that the recent job opportunities a little bit, plus in the company to make assorted, nothing is proficient, so the first good to stay.
Now that you have chosen to stay, do your work and learn something else and increase your job opportunities.
And then this morning still don't want to go to work, and then leave a day. But found that there is nothing to do at home, or study react.
Because the company project will be used in the future. So learn a bit first. Share the react knowledge later.

# Getting Started with react
React is a JS framework that takes a modular structure to quickly load a page locally without having to refresh the entire page every time.
Simply put, it is very useful!
It is also suitable for PC and mobile terminals. A set of code, multi-local use, improve efficiency.

1. First install NPM.
2. ' NPM init '
2. Use NPM to install Webpack (the react is managed using Webpack, and the company is managed using Gulp, although not in-depth research. Go to research tomorrow. ）
3. ' NPM install--save react react-dom '
4. Basic can start, here do not tell the distribution of the document, the general wording of the react.

1. ' Import React from ' React '//(' first is referring to React)
2. ""
Export default class Bodyindex extends React.components
Render () {
Return
)
}
```
Here is to write a class section (ES6, because more and more popular ES6, so all take ES6), Inherit react components
The render inside is the react syntax, that is, what is ready to return, and return is the content to be returned to the page.
3. In return, there will be some comments, if directly using//to comment, it will cause errors, so use {/* ... */} to comment.
4. In Bodyindex's parent JS, if you want to use Bodyindex, you need to use ' Import bodyindex from ' Bodyindex's file path '
5. Then use ' <bodyindex/> ' directly in return to perfect reference, of course bodyindex need to export out.
6. React has several loading states ' Componentsdidmount ', and ' Componentsbeforemount ' can set the events they need in this area.
7. Of course, apart from a few States, react also has independent state and props. State, which can be set at the beginning of ' This.state = {id:111} '
Then in use, if you want to change the state you can use ' This.setstate ({id:222}) ' To re-assign the value to overwrite the original.
8. Props is the way that parent-child pages pass through each other. You can use ' <bodyindex userid={123} ' in the parent page to pass userid=123 to the Bodyindex page,
Then on the Bodyindex page, you can use This.props.userid to get the data from the parent page.
9. After writing function on the current page, if called in a label such as Input-button, you need to write the form "Onclick={this.functionname.bind (This,[args]}") as follows.
Where args is optional, if filled out will be sent to function as arguments, this is the syntax of ES6, which needs to be remembered.
10. The data from the parent page can be verified before use, which is a react method, such as the UserID is a number
' Bodyindex.proptypes = {Userid:React.PropTypes.number} ', this sentence is written on the Bodyindex page for verification.
11. The data from the parent page if not filled out, their own page filled with ' This.props.userid ' will not error, just output empty data.
Of course, we can also write some default values to avoid these embarrassing, if there is a pass over, the use of the value passed, no use of the default value
' Const DEFAULTPRPS = {userid:001}; Bodyindex.defaultprops = Defaultprops '.
12. If you want to pass from the parent page (a) to the grandson page (C) (passing values across an intermediate page (B)), you do not need to write several ' This.props.XX = Xxoo ' in a very complex
Can be directly in the B page, c page of the code where ' {... this.props} ' will be able to send a page of data to C.
13. Back to the CSS section, tomorrow to chat, goodbye.

Yesterday leave did not go to the company, today left a lot of tasks, basically has been engaged in.
But the boss came in early in the morning to overturn the previous two weeks to do things, decided to use the lower part to write the page, rather than directly using others packaged. Then it is the modification, debugging. Finally, because of a little bit of problem, it ended the work of today.
At night, I would like to learn the ' react-router ' part, but it seems that the version is too low or what reason, has been prompted wrong, very irritable.
Just temporarily do not learn, tomorrow to the company has time to debug their own debugging.

# JS Record
1. For ... of method, used to take the value in array
2. For ... in method to take ' key ' in object
3. && | | Will cause a short circuit when executed
4. The switch is determined by the = = = = = = All equals
5. Object can nest obj multiple times, very useful when storing part of the data (JSON format)
6. ' A = [n/a]; A[100] = 10001; A.length = 101; A = [undefined X 97, 10001] '
7. Regardless of whether the function has a formal parameter, you can use arguments in the body of the functions to get the actual incoming parameter collection (array form)
8. In the function declaration, you can use ... args to get the remaining arguments (Funciton a (x, ... args) {}; a (1,2,3,4) + x = 1,args = [2,3,4])

Learning a little bit today ~ play a few games tomorrow to fill up. Bye.

17-7-25-js Records