Communcation des composants avec ReactJs

Gelton Cruz — Wed, 03 Jul 2019 05:44:27 +0000

Salut, comme je l'ai dit dans l'article précédent, je suis en train d'apprendre à écrire en français, je vais donc essayer d'écrire sur la technologie, un moyen très simple de pratiquer mon écriture en français.

Et, aujourd'hui je vais parler sur comment faire um simple communication des Composants parent à enfant et des Composants enfants à parent e en train de usage de ReactJs.

Cette application fait une allusion a une list d'acheter, une Panier et ses articles pour ajouter à Panier.
Elle est disponible dans (https://github.com/geltoncruz/Panier)

Pour commencer, je veux crois qu tu a dejá installé node,npm et react framework, alors, passon à la première étape du développement.

Dans votre terminal écrivez pour creer la application.

npx create-react-app <app-name>

Es-ce que connaissez-vous le npx?. A prochain je vais ecrit sur cette technologie.

Après crèe l'application, ouvre ton IDE pour travailler et Allons-y.

Tout d'abord je vais effacer archive App.js et creer un nouvelle dossier qu s'appelerais components.
Dans de dossier components je crèe l'archive Panier.jsx

rm src/App.js App.css App.test.js
cd src && mkdir Component && cd Component/
>> Panier.jsx

Dans archive Panier.jsx nous allons creer la classe de composant.

/**
 * @author Gelton Cruz
 * @file Panier.jsx
 */
import React from 'react'

export default class Panier extends React.Component {

}

Aprés nous allons evoluer, pour ajouter le method render

/**
 * @author Gelton Cruz
 * @file Panier.jsx
 */
import React from 'react'

export default class Panier extends React.Component {

    render() {
        return (
            <div>
                <h1>List d'achet':</h1>
                <ul>
                    <li>1 - Fejão - $2.5<button>Panier</button></li>
                    <li>2 - Macarrão - $3.5<button>Panier</button></li>
                    <li>3 - Acuçar - $4.5<button>Panier</button></li>
                    <li>4 - Pera - $5<button>Panier</button></li>
                    <li>5 - Morango - $5.5<button>Panier</button></li>
                </ul>
                <p>Prix à payer: $0</p>
                <p>quantité d'articles: 0</p>
            </div>
        )
    }
}

Nous allons maintenant créer une liste statique pour représenter chaque élément de la liste et la charger dans son composant enfant respectif.

constructor(props) {
        super(props)

        this.state = {
            Items: [
                { id: 1, productName: 'Les haricots', price: 2.50 },
                { id: 2, productName: 'Des pâtes', price: 3.50 },
                { id: 3, productName: 'Biére', price: 4.50 },
                { id: 4, productName: 'Pour', price: 5 },
                { id: 5, productName: 'Fraise', price: 5.50 },
            ],
        }
}

Pour créer le nouveau composant, vous devez accéder au dossier des composants et créer le fichier Item.jsx

>> Item.jsx

/**
 * @author Gelton Cruz
 * @file Item.jsx
 */
import React from 'react'

export default class Item extends React.Component {

    render(){
        return(
            <li>1 - Fejão - $2.5<button>Panier</button></li>
        )
    }
}

Pour ajouter le nouvelle composant dans le Panier est très simple. il suffit d'importer le composant et mettre dans le panier.

/**
 * @author Gelton Cruz
 * @file Panier.jsx
 */
import React from 'react'
import Item from './Item'

export default class Panier extends React.Component {

    render() {
        return (
            <div>
                <h1>List d'achet':</h1>
                <ul>
                    <Item />
                </ul>
                <p>Prix à payer: $0</p>
                <p>quantité d'articles: 0</p>
            </div>
        )
    }
}

Pour faire la repetition j'ai utilisé le méthod map().
La manière que nous allons envoyer les données pour le composant Item serais à travérs de une props item.

//Panier.jsx
                <ul>
                {
                 this.state.Items.map((item, i) => (
                   <Item key={i.toString()} item={item} />
                      ))
                    }
                </ul>

Dans de composant Item nous devons recevoir les données de remplir le template de composant.

/**
 * @author Gelton Cruz
 * @file Item.jsx
 */
import React from 'react'

export default class Item extends React.Component {

    render(){
        return(
            <li key={this.props.item.id}>
                {this.props.item.id} - {this.props.item.productName} - ${this.props.item.price} 
                <button>Panier</button>
            </li>
        )
    }
}

Si vous suivez toutes les étapes, votre écran ressemblera à ceci:

La dernière étape sera:

Appuyez sur le bouton panier pour ajouter l'article au panier.
Modifier le nombre d'articles dans le panier tant que vous avez un article.
mettre à jour le prix total du panier.

1.

Creer le event click et ajoutez le method anonyme, pour invoque le method que toi vá creer avec le item en tant que parametre RecevoirItem(item);

// Item.jsx
<button onClick={()=> this.props.recevoirItem(this.props.item)}>Panier</button>

2.

Tout d'abord, nous devons ajouter le «panier» de structures pour sauver les donnés
Après, Le composant parent, "panier" doit recevoir le item

//Panier.jsx

this.state = {
             ...
            Panier: []
        }

//Panier.jsx

        recevoirItem  = item => {
        this.state.Panier.push(item);
        this.setState({Panier: this.state.Panier})
}

//Panier.jsx

render(){

...
<ul>
...
  <Item key={i.toString()} item={item} recevoirItem={this.recevoirItem} />

    }

//Panier.jsx
...

render(){

...
<p>quantité d'articles: {this.state.Panier.length <= 0 ? `Panier vide` : this.state.Panier.length}</p>

3.

Utilisez la méthode _reduce()) pour accéder à chaque prix et additionner le total:


<p>Price à payer: $ { parseFloat(this.state.Panier.reduce((acc,prx) => acc + prx.price, 0)) }</p>

Et pour finir tu doit importer le composant panier dans le ficher index.js et utilisér le composant.

// index.js
import Panier from './Component/Panier'

ReactDOM.render(<Panier />, document.getElementById('root'));

En suite, le code complete de les trois fichiers:

/**
 * @author Gelton Cruz
 * @file index.js
 */
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import Panier from './Component/Panier'

ReactDOM.render(<Panier />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

/**
 * @author Gelton Cruz
 * @file Panier.jsx
 */
import React from 'react'
import Item from './Item'

export default class Panier extends React.Component {

    constructor(props) {
        super(props)

        this.state = {
            Items: [
                { id: 1, productName: 'Les haricots', price: 2.50 },
                { id: 2, productName: 'Des pâtes', price: 3.50 },
                { id: 3, productName: 'Acuçar', price: 4.50 },
                { id: 4, productName: 'Pour', price: 5 },
                { id: 5, productName: 'Fraise', price: 5.50 },
            ],
            Panier: []
        }
    }

    recevoirItem = item => {
        this.state.Panier.push(item);
        this.setState({ Panier: this.state.Panier })
    }

    render() {
        return (
            <div>
                <h1>List d'achet':</h1>
                <ul>
                    {
                        this.state.Items.map((item, i) => (
                            <Item key={i.toString()} item={item} recevoirItem={this.recevoirItem} />
                        ))
                    }
                </ul>
                <p>Prix à payer: $ {parseFloat(this.state.Panier.reduce((acc, prx) => acc + prx.price, 0))}</p>
                <p>quantité d'articles: {this.state.Panier.length <= 0 ? `Panier vide` : this.state.Panier.length}</p>
            </div>
        )
    }
}

/**
 * @author Gelton Cruz
 * @file Item.jsx
 */
import React from 'react'

export default class Item extends React.Component {
    render(){
        return(
            <li key={this.props.item.id}>
                {this.props.item.id} - {this.props.item.productName} - ${this.props.item.price} 
                <button onClick={()=> this.props.recevoirItem(this.props.item)}>Panier</button>
            </li>
        )
    }
}

Excuse-moi pour mon français et merci á tous!

webAPI avec Sailsjs et Mongodb

Gelton Cruz — Wed, 12 Jun 2019 02:49:58 +0000

Bien, il’y a une petit peut de temp que je veux meilleurer ma escriture en langue francaise, mais je n’ai sais pas o quoi je doit ecrire. Alors j’ai pensé: Je vais commencer pour les articles que sons plus facile pour moi.

Je pense en faire une series de tutoriel sur développment logiciel et aujourd’hui je vais parler sur le SAILSjs et la combination de SAILSjs avec mongoDB.

Alors, Qu’est-ce Sails ?

SAILSjs est une populaire framework MVC javascript, en NODEjs plus pratique pour develloper API et applications évolutives.

Meme aussi tu peut encore se demander: “Porquoi je dois choiser le SAILSjs?”

Le plus grand advantages, qu je pense, sur utiliser le SAILSjs sont sas caracteristiques d’etre 100% javascript, soutien quelquer base donnée, completament facilie pour cree RESTs API, compatible avec les principaux framework frontend et platforms comment: Android, IOS, Browser (Vue, Angular, React), Integration avec websockt et soutien profissionel.

Et le mongoDB?

Le mongodb est un base donné NoSQL, plus populaire, que donne soutien a moderm model d’applications based en document. Pour savoir plus sur mongodb.

Laisser commencer:

Pour commencer nous devons installer les packages en train de utiliser le node npm:

Pour installer mongodb ouvrer ton terminal e ecrite:
Aprés d’installations et management vous devez commercer le mongodb
Pour creer une Database vous devez utilizer le commande

npm install -g mongodb
mongo
use <NomDedatabase>

Mon base de donnée s’appellerais entreprise et le colletion employe.

use entreprise
db.createColletion('employe')

Aprés nous devons commencer notre travail avec le framework SAILSjs.
La primière pas est installer le framework et en suite installer le packge pour utilizé le mongodb avec SAILSjs.

npm install -g sails
npm install sails-mongo

Maintenant nous allons gerer le projet et le controller pour l’endpoint avec le CRUD est très simples.

sails new <nomDeProjet> --no-frontend
sails generate api employe

Mais pour relationner ta application avec le ta colletion besoins de configures le datastores in: config/datastore.js

adapter: 'sails-mongo',
url: 'mongodb://127.0.0.1:27017/employe'

Pour finir, il suffit de commencer le sails

sails lift

DEV Community: Gelton Cruz