Expliqué par Hello World of ReactJS_Basic Knowledge

Cet article fournit des exemples de code et des concepts de haut niveau dans React.js, une bibliothèque Javascript développée par les ingénieurs de Facebook pour créer des interfaces utilisateur. Ces concepts seront publiés en détail dans l'article suivant. Par conséquent, je dois vous rappeler que si. vous êtes un expert ReactJS et pensez que ces codes doivent être améliorés, veuillez m'écrire avec vos suggestions et je mettrai à jour cet article/code de manière appropriée en temps opportun

.

Avant de continuer à publier quelques exemples de code, je dois spécifiquement mentionner : il sera un peu difficile pour les débutants d'apprendre ReactJS, car récemment j'ai écrit du code sur AngularJS. À présent, je dois admettre qu'ils m'aident. à nous de créer l'interface utilisateur Il y a une grande différence en matière de travail. Je ferai un autre article de blog comparant les principales différences entre eux

.

Cependant, à un niveau élevé, voici quelques raisons pour lesquelles j'ai choisi le parcours d'apprentissage légèrement « plus raide » lors de l'apprentissage de ReactJS :

• Orienté composant : ReactJS est orienté composant, ce qui signifie que vous devez traiter les éléments de l'interface utilisateur comme des composants. Fait intéressant, les composants sont composables. Cela signifie qu'un composant peut avoir un ou plusieurs composants internes. Le code ci-dessous le démontre
• Syntaxe JSX : Il utilise une syntaxe JSX (de type XML) intéressante pour écrire du code. Un traducteur JSX (un précompilateur) est utilisé pour convertir cette structure syntaxique en JavaScript explicite

Modèle de proxy d'événement : il suit le modèle de délégation d'événements pour capturer les événements

Voici quelques concepts clés présentés dans le code :

• Composants
• Agent événementiel
• Syntaxe JSX

Ce qui suit est une brève description de ce que le composant a implémenté

- Élément de zone de saisie où l'utilisateur peut saisir son nom d'utilisateur. Comme cela sera mentionné dans l'article suivant, cette zone de saisie est en fait le composant "UserName"

- élément de couche div, utilisé pour afficher "Bonjour, nom d'utilisateur". Comme cela sera mentionné dans l'article suivant, cette couche div est en fait le composant "HelloText"

Voici comment il est conçu. De plus, veuillez trouver le code qui représente les concepts ci-dessous.

SayHello : Composants composables

SayHello est un composant parent qui contient deux composants. Ce composant parent est composé de deux composants internes. Un composant est UserName, qui est utilisé pour fournir aux utilisateurs la fonction de saisie de noms, et l'autre composant est HelloText, qui est utilisé pour afficher du texte, tel que Hello, world. Ce composant parent définit les trois API différentes suivantes :

1. getInitialState
2. handleNameSubmit
3. render (il s'agit d'une interface obligatoire, un composant doit définir le rendu pour indiquer à React comment restituer le composant en réponse)

/
 // 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>
  );
 }
 });

Composant UserName

Le composant UserName a les deux méthodes suivantes :

1. handleChange : utilisé pour capturer l'événement onChange
2. render : utilisé pour rendre les composants

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>
  );
 }
 });

Composant HelloText

Le composant HelloText n'a qu'une seule méthode pour rendre le composant

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

Si vous souhaitez obtenir le code complet, j'ai posté le code sur la page github hello-reactjs. N'hésitez pas à commenter ou à faire des suggestions.