Maison > Article > interface Web > 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 !