Front End-"learning experience"-react2

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" >

});

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