Started by Hello world of ReactJS

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.

As I continue to publish Before some code examples, I have to make a special mention: it will be a little difficult to learn ReactJS for beginners, because recently I have been writing code on AngularJS. By now, I need to admit that there is a big difference between them in helping us do UI work .I will make another blog post comparing the main differences between them.

However, at a high level, here are some reasons why I used slightly " "Steep" learning route:

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 following code demonstrates this

JSX Syntax: It uses an interesting JSX (XML-like) syntax to write code. The JSX converter (a precompiler) is used to convert this syntax structure into explicit JavaScript

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

The following is Some key concepts shown in the code:

Component

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". It will be mentioned in the following article that this div layer is actually the "HelloText" component

The following is how it is designed. Additionally, please find code that represents the concepts below.

SayHello: Composable component

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:

getInitialState

handleNameSubmit

render (this is a required interface, a component needs to define render to tell React to respond How to render the component)

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

UserName component has the following two methods:

handleChange: used to capture onChange event

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 Used for rendering components

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 hung the code on the github hello-reactjs page. Please feel free to comment or give suggestions.

For more articles related to Hello world of ReactJS, please pay attention to the PHP Chinese website!