React.js Learning Road One

Today, the new boss came, we have to learn his use of the framework React.js, now is a smear, for me this front-end rookie, is the real start, good, do not say so much, began to casually record my study, and then organize the content.

(1) For react, any UI changes are done through the overall refresh, that is, every bit of interface updates can be considered to refresh the entire page (how to feel a bit like the canvas), as to how to make a partial update to ensure performance, it is the react framework to complete things. For react, I don't have to worry about the addition of the DOM to the DOM tree every time, I just need to care about the whole data, how the UI changes between the two data, and give it to the framework, which reduces the difficulty of logic processing.

(2) What is a component?

A component is a packaged, self-contained UI part, and react recommends component-based thinking of the UI composition, defining the module as a component of each functionally separate function on the UI, and then building the overall UI by composing or nesting the small components into large components.

React that a component should have the following characteristics:

1. Composable: can be combined or nested with other components to form a larger scale component

2. Reusable: Each component has a separate function that can be used in multiple UI scenarios

3. Maintainable: Each small component contains only its own logic, easy to understand and maintain

(3) Code component

1. First introduce the react.js and jsxtransformer.js libraries, let them load first, jsxtransformer.js the role is to convert JSX syntax into JavaScript syntax.

2. What is the React.render method: React.render is React's most basic method for translating a template into an HTML language and inserting a specified DOM node.

React.render (parameter 1, parameter 2): Parameter 1, is the content to be written, parameter 2, the insertion of the specified DOM node position, where parameter 2 must use the native getElementById method, cannot use JQ to get the DOM node.

One of the most annoying is that the new version with the update, but many of the old tutorial has not been changed, for example, Jsxtransformer.js in the new version has been deprecated, instead of browser.js but a lot of the version has not been updated, I this new learning has followed the error, the amount ... (Be sure to note)

Original version:

<script src= ". /build/react.js "type=" Text/javascript "charset=" Utf-8 "></script>
<script src= ". /build/jsxtransformer.js "type=" Text/javascript "charset=" Utf-8 "></script>

<script type= "text/jsx></script>

New version:

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

<script type= "Text/babel" ></script>

(4) Reactjs components

React allows the code to be encapsulated as a component (component) and then, like a normal HTML tag, to insert the component into a Web page, the React.createclass method is used to generate a component class.

Attention:

1. Gets the value of the property with the This.props. Property name

2. The first letter of the created component name must be capitalized

3. To add a CSS class to an element, use the classname

4. How to set the Style property of the component to write Style={{width:this.state.width}}

Various precautions in use:

1. When using attributes to change styles in JSX, you cannot use class, instead classname

<div classname= "Div" ></div>

2. Use {{}} instead of "" when using inline styles in JSX

<div style={{color: "Red", Margin: "20px"}}>*****</div>

TIP:

When using the Style property directly on the label, Write style={{}} is two curly braces, the outer brace is to tell JSX here is the JS syntax, and the real DOM is different, the property value can not be a string and must be an object, it is important to note that the property name also requires the Camel name method. That is, Margin-top is written as margintop, and the attributes are separated by commas.

3. Using variables

JSX the contents of the two curly braces {...} Rendered into dynamic values, curly braces indicate a JavaScript context ———— anything you place in curly braces is evaluated.

The tentative understanding of the react construction object may now be biased against the correct understanding, but I now understand that:

For example:

var hellomessage = React.createclass ({

Render:function () {

Return:

}

});

var Lucy = {

Name: "Feng",

Votes: "25"

}

Reactdom.render (

document.getElementById ("Example")

);

Lucy can be seen as the JSON object we used previously, {This.props.name} is equivalent to getting the key value of name in JSON, other similar;

and the following Reactdom.render () in the previous function name, is a component, when the template is inserted, will automatically generate an instance of HelloMessage;

Noun Explanation:

1.

The effect of the Render method: It is used primarily for output components, and all component classes must have their own render method for outputting components.

In the face of HTML tags, with <p>,<div> on the HTML rules parsing, encountered code block {} with the JS rule parsing;

2.

About Status State:

When a component interacts with a user, react the component as a state machine, initially having an initial state, and then interacting with the user, causing the state to change, triggering a re-rendering of the UI;

3.

Getinitialstate: Used to define the initial state, which is an object that can be read by the This.state property. When the user clicks on the component, resulting in a state change, the This,setstate method modifies the state value, after each modification, the son Oh to that call This.render method, render the component again.

4.

This,props and this.state are used to describe the characteristics of a component, which can be confusing. This.props represents features that, once defined, are no longer changed, and this.state change as users interact;

Like what:

The Color,padding,margin in the style attribute is no longer changed, and there is the defined object content, which is this.props

This.state users to express and user interaction properties, such as clicks, color changes Ah ... It's all this.state.

React.js Learning Road One