By Reactjs's Hello world.

This article mainly introduces Reactjs's Hello World programming and its related knowledge, react is Facebook development and open source JS framework, popularity in the immediate rise, the need for friends can refer to the

This article provides examples of code and the React.js (a JavaScript library developed by a Facebook engineer to be used to build the user interface) The concept of high level. These concepts will be published in detail in the following article. Here, I must suggest if you are a REACTJS expert and feel that the code needs to be improved, please write to me and I will update this article/code in time.

Before I go on to publish some code examples, I have to make a special point: Beginners Reactjs will be a little difficult, Because lately I've been writing code on ANGULARJS. So far, I need to admit that they are very different when it comes to helping us do the UI work. I'm going to post another blog to compare the major differences between them.

However, at a higher level, here are some reasons why I used a slightly "steep" learning route when learning Reactjs:

Component-oriented: Reactjs is component-oriented, which means that you need to consider UI elements as components. Interestingly, components can be grouped. This means that a component can have one or more internal components. The following code illustrates this point

JSX Syntax: It uses an interesting JSX (XML-style) syntax to write code. The JSX Converter (a precompiled compiler) is used to convert this syntactic structure into a distinct javascript

Event Broker Model: It follows the event delegate model to capture events

Here are some key concepts that are shown in your code:

Component

Event Agent

JSX syntax

The following is a brief description of what the component has achieved

-The input box element in which the user can enter his or her user name. As mentioned in the following article, this input box is actually a "UserName" component

-div layer element, used to show "Hello, UserName". As mentioned in the following article, this div layer is actually a "hellotext" component

Here's how it's designed. Also, find code that represents the following concepts.

SayHello: Components that can be combined

SayHello is a parent component that contains two components. This parent component is composed of two internal components. One of these components is username, which provides users with the ability to enter names, and another component is hellotext, which is used to display text, such as Hello,world. This parent component defines the following three different APIs:

Getinitialstate

Handlenamesubmit

Render (This is a required interface, a component needs to define render to tell react how the response renders the component)

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27-28

///This is the parent component comprising of two inner components//One of the component is UserName which are used to Allow user to enter their name//other component are hellotext which displays the text such as Hello, World//Var Sayhell o = React.createclass ({//This are used to set, "data" which are//accessed later in Hellotext component to disp Lay the updated state//Getinitialstate:function () {return {data: ' World '}},//It's recommended to capture events ha Ppening with the "Children//at the" parent level and set the "new state" that updates the children appropriately handlenames Ubmit:function (name) {this.setstate ({data:name});},//Render method which is comprised of two components to such as User Name and Hellotext//Render:function () {return (<div> <username onnamesubmit={this.handlenamesubmit}/> ; Hellotext data={this.state.data}/> </div>); } });

Username components

The username component has the following two methods:

HandleChange: Used to capture onchange events

Render: For rendering components

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16-17

var UserName = React.createclass ({handlechange:function () {var UserName = This.refs.username.getDOMNode (). Value.trim ( ); This.props.onNameSubmit ({username:username}); This.refs.username.getDOMNode (). Value = '; return false; }, Render:function () {return (<form role= "form" onchange={this.handlechange}> <div classname= "Input-group Input-group-lg "> <input type=" text "classname=" Form-control col-md-8 "placeholder=" type Your Name "ref=" username "/> </div> </form>);}";

Hellotext components

The Hellotext component has only one method for rendering components

?

1 2 3 4 5 6 7 8 9 10 11

Render: Contains the code var hellotext = React.createclass Hellotext component content ({render:function () {return (<div>

If you want to get all the code, I've already hung the code on GitHub Hello-reactjs page. Please feel free to comment or give advice.