Démarré par Bonjour le monde de ReactJS

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

Au fur et à mesure que je continue de publier du code Avant. exemples, je dois faire une mention spéciale : il sera un peu difficile d'apprendre ReactJS pour les débutants, car récemment j'ai écrit du code sur AngularJS. À présent, je dois admettre qu'il y a une grande différence entre eux pour nous aider. faire fonctionner l'interface utilisateur. Je ferai un autre article de blog comparant les principales différences entre eux.

Cependant, à un niveau élevé, voici quelques raisons pour lesquelles j'en ai utilisé des légèrement différentes lors de l'apprentissage de ReactJS "Steep " parcours d'apprentissage :

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 suivant illustre cette

Syntaxe JSX : Il utilise une syntaxe JSX (de type XML) intéressante pour écrire du code. Le convertisseur 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

Délégués d'événements

Syntaxe JSX

Voici 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, userName". Comme cela sera mentionné dans l'article suivant, cette couche div est en fait le composant "HelloText"

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

SayHello : composant composable

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 :

getInitialState

handleNameSubmit

render (il s'agit d'une interface obligatoire, un composant doit définir le rendu pour indiquer à React de répondre Comment pour restituer le composant)

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

handleChange : Utiliser Pour capturer l'événement onChange

render : utilisé pour restituer le composant

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

Composant HelloText Il n'y 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.

Pour plus d'articles sur Hello world of ReactJS, veuillez faire attention au site Web PHP chinois !