Front End-"learning experience"-react2

Source: Internet
Author: User

Label:

Today is New Year's Eve, first of all to wish you happiness. The new year is indeed a happy one, leaving it behind in the past year and looking forward to a better year.

OK, let's continue our react tour.

Our interface is made up of a number of simple components, just as our bodies are made up of various organs. We want to make a reusable interface that defines its name Commentbox, which defines the composition of the box as a title, list item, and form component. Headings we write directly in Commentbox, which are not cell-level for list items and forms, so define them as components.

Set to Component list

Commentlist

var commentlist = React.createclass (

{render:function () {return (<div classname= "Commentlist" > Hello, world! I am a commentlist. </div>); }

});

Defining forms

var commentform = React.createclass ({render:function () {return (<div classname= "Commentform" > Hello, world! I am a commentform. </div>);}

});

In fact, these two are very simple, the purpose here is to illustrate the concept of component.

Finally look at the complete box

var commentbox = React.createclass (

{render:function () {return (

<div classname= "Commentbox" > <h1>Comments</h1> <commentlist/> <commentform/> </div >); }

});

You can see the mix of components and HTML tags here

The tutorial code above is all from the official website tutorial.

Sometimes I would like to learn whether we should start from the highest level of the overall framework, first understand what we are going to do, and then learn how to do, but now the learning style seems to be the first to teach you how to do, your own to find out what to do, of course, this is only my personal opinion, but no matter how, We should all tirelessly pursue what we do not understand but want to know. In any case, the pursuit of their favorite things are right, if you do not like the concept of money supremacy, but can not get rid of the secular view, then you do what you like on the line. Like Forrest Gump, of course, it is very good to make money, isn't it.

Front End-"learning experience"-react2

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

Tags Index: