From Reactjs's Hello World to the basics

This article provides examples of code and high-level concepts in react.js, a JavaScript library developed by a Facebook engineer to build the user interface. These concepts will be published in detail in the following article. Here, I must be prompted if you are a REACTJS expert and feel that the code needs to be changed Good, please write the proposal to me, I will update this article/code timely and appropriately.

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:

1. Getinitialstate
2. Handlenamesubmit
3. Render (This is a required interface, a component needs to define render to tell react how the response renders the component)

Username components

The username component has the following two methods:

1. HandleChange: Used to capture onchange events
2. Render: For rendering components

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

 Render: Contains the code
 
var hellotext = React.createclass ({
  render:function () {return
  (
  <) that shows the contents of the Hellotext component. 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.