From Helloworld of ReactJS

This article mainly introduces the Helloworld programming and related knowledge of ReactJS. React is a JS framework developed and open-source by Facebook, and its popularity is rising rapidly, you can refer to this article to provide code examples and React. javascript (a Javascript library developed by a Facebook engineer to build a user interface. these concepts will be detailed in the following article. here, I must remind you that if you are a ReactJS expert and feel the code needs to be improved, please write me your suggestion and I will update this article/code as soon as possible.

Before I continue to describe some code examples, I must note that it will be a little difficult for beginners to ReactJS, because I have been writing code on AngularJS recently. so far, I have to admit that there are many differences between them in helping us do the UI work. I will post another blog post to compare the main differences between them.

However, at a high level, the following are some reasons why I used a slightly steep learning path when learning ReactJS:

Component-oriented: ReactJS is component-oriented, which means you need to regard the UI element as a component. Interestingly, components can be combined. This means that a component can have one or more internal components. The following code demonstrates this point.

JSX Syntax: it uses an interesting JSX (XML) Syntax to write code. The JSX converter (a pre-compiler) is used to convert this syntax structure to an obvious JavaScript

Event proxy model: it follows the event Delegate model to capture events

The following are some key concepts displayed in the Code:

Components

Event proxy

JSX syntax

The following is a brief description of the implemented components.

-Input box element. You can enter the user name. As mentioned in the following article, the input box is actually a "UserName" component.

-P Layer Element, used to display "Hello, userName ". As mentioned in the following article, the p layer is actually a "HelloText" component.

Here is how it is designed. In addition, find the code that represents the following concepts.

SayHello: component that can be combined

SayHello is a parent component that contains two components. This parent component is composed of two internal components. One component is UserName, which is used to provide users with the input name function, and the other component is HelloText, which is used to display text, such as Hello and 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 the React response 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(  
  
    
     
   
  
  ); } });

UserName component

The UserName component has the following two methods:

HandleChange: used to capture onChange events

Render: used 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(    ); } });

HelloText component

The HelloText component has only one method for rendering components.

Render: contains the code var HelloText = React. createClass ({render: function () {return (
Hello, {this. props. data}
);}});

If you want to get all the code, I have hung the code on the github hello-reactjs page. Please comment freely or give suggestions.

For more articles about ReactJS's Hello world, refer to the PHP Chinese website!