Explained by Hello world of ReactJS_Basic knowledge

This article provides code examples and high-level concepts in React.js, a Javascript library developed by Facebook engineers for building user interfaces. These concepts will be published in detail in the following article. Therefore, I must remind you that if you are a ReactJS expert and feel that these codes need to be improved, please write to me with your suggestions and I will update this article/code appropriately in a timely manner.

Before I continue to post some code examples, I must specifically mention: It will be a little difficult for beginners to learn ReactJS, because recently I have been writing code on AngularJS. By now, I need to admit that they are helping us to make UI There is a big difference when it comes to work. I will make another blog post comparing the main differences between them.

However, at a high level, here are some reasons why I took the slightly "steeper" learning path when learning ReactJS:

• Component-oriented: ReactJS is component-oriented, which means that you need to treat UI elements as components. Interestingly, components are composable. This means that a component can have one or more internal components. The code below demonstrates this
• JSX Syntax: It uses an interesting JSX (XML-like) syntax to write code. A JSX translator (a precompiler) is used to convert this syntactic structure into explicit JavaScript

Event proxy model: It follows the event delegation model to capture events

Here are some key concepts shown in the code:

• Components
• Event Agent
• JSX syntax

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

- Input box element where the user can enter their username. As will be mentioned in the following article, this input box is actually the "UserName" component

- div layer element, used to display "Hello, userName". As will be mentioned in the following article, this div layer is actually the "HelloText" component

Here’s how it’s designed. Additionally, please find code that represents the concepts below.

SayHello: Composable components

SayHello is a parent component that contains two components. This parent component is made up of two internal components. One component is UserName, which is used to provide users with the function of entering names, and the other 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 to render the component in response)

/
 // This is the parent component comprising of two inner components
 // One of the component is UserName which is used to allow user to enter their name
 // Other component is HelloText which displays the text such as Hello, World
 //
 var SayHello = React.createClass({
 // This is used to set the state, "data" which is 
 // accessed later in HelloText component to display the updated state
 // 
 getInitialState: function() {
  return {data: 'World'}
 },
 // It is recommended to capture events happening with any children
 // at the parent level and set the new state that updates the children appropriately
 handleNameSubmit: function(name) {
  this.setState({data: name});
 },
 // Render method which is comprised of two components such as UserName and HelloText
 //
 render: function() {
  return(
  <div>
  <UserName onNameSubmit={this.handleNameSubmit}/>
  <HelloText data={this.state.data}/>
  </div>
  );
 }
 });

UserName component

The UserName component has the following two methods:

1. handleChange: used to capture the onChange event
2. render: used to render 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 component

HelloText component has only one method for rendering the component

 render：包含了展示HelloText组件内容的代码
 
var HelloText = React.createClass({
  render: function() {
  return (
  <div>
   <h3>Hello, {this.props.data}</h3>
  </div>
  );
  }
 });

If you want to get the full code, I have posted the code on the github hello-reactjs page. Please feel free to comment or give suggestions.