npm  i -g create-react-app

 create-react-app message-app

 npx i -g create-react-app

  .. .
Succès !  Créé React-App sur C:    Users    mike    projects    github    application de message
Dans ce répertoire, vous pouvez exécuter plusieurs commandes:

   fil  début
    Démarre le serveur de développement.

   fil  build
    Regroupe l'application dans des fichiers statiques  pour la production .

   test du fil   
    Démarre le coureur de test  .

   fil   éjection 
    Supprime cet outil et copie les dépendances de construction, les fichiers de configuration
    et des scripts dans le répertoire de l'application. Si vous  faites  cela, vous ne pouvez pas revenir en arrière ! 

Nous vous suggérons de commencer par taper:

   cd  message-app
   fil  début

Bon piratage ! 

  cd  message-app
 npm  début

  ..  .. 

Compilé avec succès ! 

Vous pouvez maintenant afficher react-app  dans  le navigateur.

  Local: http: // localhost: 3000
  Sur votre réseau: http://192.168.56.1:3000

Notez que la version de développement n'est pas optimisée.
Pour créer une version de production, utilisez la version  yarn .

 {
   "name" :   "message-app" 
   "version" :   "0.1.0" 
   "private" :   true 
   "dependencies" :   {
     "@ testing -library / jest-dom ":  " ^ 4.2.4 "
    " @ testing-library / react ":  " ^ 9.3.2 "[19659033]
     "@ testing-library / user-event" :   "^ 7.1.2" 
     "react" :   "^ 16.13.1 "
    " react-dom ":  " ^ 16.13.1 "
    " react-scripts ":  " 3.4.3 " 
  } 
   "scripts" :   {
     "start" :   "react-scripts start" 
     "build ":  " react-scripts build "
    " test ":  " react-scripts test "
    " eject " :   "react-scripts eject" 
  } 
   "eslintConfig" :   {
     "extend" :   "react-app" 
  } 
   "liste des navigateurs" :   {
     "production" :   [
       "> 0,2%" 
       "not dead "
      " not op_mini all "
    ] 
    " development ":   [
      " last 1 chrome version "[19659112] "1 dernière version de Firefox" 
       "1 dernière version de safari" 
    ] 
  } 
} 

 import   React   from   'react' ; 

 export   default   function    App   ()   {
   const  message  =   <  h1 >  Je suis un titre  </  h1 >  ;   
   return   ( message  ]) ; 
} 

 import   React   de   'react' ; 
 import   ReactDOM   from   'react-dom' ; 

 ReactDOM .  render  ( < h1 >  Bonjour   Monde  < /  h1 >   document  ].  getElementById  ( 'root' ) ) ; 

 const  element  =   < div >  Hello   World  < /  div > ; 
 ReactDOM .  render  ( element   document .  getElementById  (  'racine' ) ) ; 

 const  element  =   < span  ]>  Bonjour  < /  span >   < span >  Jane  < /  span > ; 

 const  element  =   < div > 
     < span >  Bonjour [19659217] < /  span > 
     < span >  Jane  < /  span > 
     <  /  div > ; 

 const  name  =   "Jane" ; 
 const  element  =   < p >  Bonjour   { nom }  < /  p > 

 const  user  =   {
  firstName :   'Jane' 
  lastName :   'Doe' 
} 
 const  element  =   < p >  Bonjour   { utilisateur .  firstName }   { user .  lastName }  < /  p > 

 import   React   {  Component  }   from   'react' ; [19659306] class   App   extend   Component   {

   render  ()  {
     return   (
       < div > 
         Hello   World   Again ! 
       < /  div > 
    ) 
  } 
} [19659150] export   par défaut   App ; 

. Ensuite, mettez à jour src / index.js avec le code suivant afin de voir les changements reflétés dans le navigateur:

 import   React   from   'react'  ; 
 import   ReactDOM   de   'react-dom' ; 

 import   App   from   './ App' ; [19659186] ReactDOM .  render  ( < App  / >   document .  getElementById  ( 'racine' ) ) ; 

Nous importons d'abord le composant App . Ensuite, nous rendons App en utilisant le format JSX, comme ceci: . Ceci est nécessaire pour que JSX puisse le compiler en un élément qui peut être poussé vers le React DOM . Après avoir enregistré les modifications, jetez un œil à votre navigateur pour vous assurer qu'il affiche le bon message.

Ensuite, nous verrons comment appliquer le style.

Styling JSX Elements

Il y a ] différentes manières de styliser les composants React . Les deux que nous allons examiner dans ce didacticiel sont:

1. Style en ligne JSX
2. Feuilles de style externes

Voici un exemple de la façon dont nous pouvons implémenter le style en ligne JSX:

 render  ( )   {
   const  headerStyle  =   {
    couleur :   '# ff0000' 
    textDecoration :   'underline' 
  } 
   return   (
     < div > 
       < h1 style  = [19659033] { headerStyle } >  Bonjour   Monde   Encore !  < /  h1 > 
     <  /  div > 
  ) 
} 

Le style React ressemble beaucoup au CSS classique, mais il y a quelques différences clés. Par exemple, headerStyle est un littéral d'objet. Nous ne pouvons pas utiliser de points-virgules comme nous le faisons normalement. De plus, un certain nombre de déclarations CSS ont été modifiées afin de les rendre compatibles avec la syntaxe JavaScript. Par exemple, au lieu de text-decoration nous utilisons textDecoration . Fondamentalement, utilisez la casse camel pour toutes les clés CSS à l'exception des préfixes de fournisseur tels que WebkitTransition qui doit commencer par une majuscule.

Nous pouvons également implémenter le style de cette façon:

 return   ( 
   < div > 
     < h1 style  =  { { color :  '# ff0000' [19659033] textDecoration :   'underline' } } >  Hello   World   Again !  < ] /  h1 > 
   < /  div > 
) 

La deuxième méthode utilise des feuilles de style externes. Par défaut, les feuilles de style CSS externes sont déjà prises en charge. Si vous souhaitez utiliser un préprocesseur tel que Sass, veuillez consulter la documentation pour savoir comment le configurer.

Dans le dossier src créez un fichier nommé App.css et tapez le code suivant:

 h1   {
   font-size :   4  rem ; 
} 

Ajouter l'instruction d'importation suivante à src / App.js en haut du fichier:

 import   './ App.css' ; 

Après l'enregistrement, vous devriez voir le contenu du texte de votre navigateur changer considérablement de taille. Vous pouvez également utiliser des classes CSS comme celle-ci:

  .header-red    {
   font-size :   4  rem ; [19659426] couleur :   # ff0000 ; 
   texte-décoration :  underline ; 
} 

Mettez à jour src / App.js comme suit:

 < h1 className  =  "header-red" >  Bonjour   Monde   Encore une fois !  < /  h1 > 

Nous ne pouvons pas utiliser l'attribut HTML class car il s'agit d'un mot clé JavaScript réservé. À la place, nous utilisons className . Voici le résultat attendu.

Maintenant que vous avez appris à ajouter du style à votre projet React, allons-y et découvrons les composants React sans état et avec état. [19659464] Composants sans état ou avec état

Un composant sans état, également appelé composant muet, est simplement un composant qui affiche des informations. Il ne contient aucune logique pour manipuler les données. Il peut recevoir des événements de l'utilisateur, qui sont ensuite transmis au conteneur parent pour traitement.

Créez le fichier message-view.js et copiez-y l'exemple de code suivant. Voici un exemple parfait d'un composant stupide (bien que techniquement il s'agisse plus d'un composant statique):

 import   React   from   'react' ; 

 class   MessageView   extend   React .  Component   {
   render  ()   {
     return  (
       < ] div className  =  "message" > 
         < div className  =  "field" > 
           < span className  =  "label" >  From :   < /  span > 
           < span className  =  "value" >  John   Doe  < /  span > 
         < /  div > 
         < div className  =  "field" > 
           < span className  =  "label" > [19659191] État :   < /  span > 
           < span className  =  "value" >   Non lu  < /  span > 
         < /  div > 
         < div className  =  "champ content "> 
           < span className  = " label ">  Message :   < /  span > 
           < span className  =  "value" >  Passez une bonne journée  !  < /  ] span > 
         < /  div > 
       < /  div > 
    ) 
  } 
} 

 export   par défaut   MessageView ; 

Ensuite, ajoutez un style de base à src / App.css avec le code suivant:

 body   {
   background-color :   # EDF2F7 [19659033]; 
   couleur :   # 2D3748 ; 
   font-family :  -apple-system  BlinkMacSystemFont [19659040] 'Segoe UI'  Roboto  Oxygen  Ubuntu  Cantarell   'Open Sans' [19659033]  'Helvetica Neue'  sans-serif ; 
} 

 h1   {
   font-size :   2  rem ; 
} 

  .container    {
   width :   800  px ; 
   margin :   0  auto ; 
} 

  .message    {
   background-color :   # F7FAFC [19659033]; 
   width :   400  px ; 
   margin-top :   20  px ; 
   border- top :  solid  2  px   #fff ; 
   border-radius :   8  px ; [19659426] padding :   12  px ; 
   box-shadow :   0   10  px   15  px [19659428] -3  px   rgba  ( 0   0   0   0.1 )    0   4  px   6  px   -2  px   rgba  ( 0 [19659428] 0   0   0,05 )  ; 
} 

  .field   {[19659426] affichage :  flex ; 
   justify-content :  flex-start ; 
   margin-top :   2  px ; 
} 

  .label    {
   font- weight :  bold ; 
   font-size :   1  rem ; 
   width :   6  rem ; 
} 

  .value    {
   color :   # 4A5568 ; 
} 

  .content   .value    {
   font-style :  italic ; 
} 

Enfin, modifiez src / App.js pour que le fichier entier ressemble à ceci:

 import   React   {  Component  }   de   'react' ; 

 import   './ App.css' ; 
 import   MessageView   from   './ message-view '; 

 class   App   extend   Component   {
   render  ()  {
     return [19659052] (
       < MessageView   / > 
    ) 
  } 
} 

 export   default   App ; 

À présent, le code devrait être assez explicite, car j’ai déjà expliqué les concepts impliqués jusqu’à présent. Jetez un œil à votre navigateur maintenant, et vous devriez avoir le résultat suivant:

Nous avons mentionné précédemment que React offre à la fois des composants basés sur les classes et des fonctions. We can rewrite MessageView using functional syntax like this:

import React from 'react';

export default function MessageView() {
  return (
    <div className="message">
      <div className="field">
        <span className="label">From: </span>
        <span className="value">John Doe</span>
      </div>
      <div className="field">
        <span className="label">Status: </ span>
        <span className="value"> Unread</span>
      </div>
      <div className="field content">
        <span className="label">Message: </span>
        <span className="value">Have a great day!</span>
      </div>
    </div>
  );
}

Take note that I’ve removed the Component import, as this isn’t required in the functional syntax. This style might be confusing at first, but you’ll quickly learn it’s faster to write React components this way.

Also, with the advent of React hooksthis style of writing React components is becoming increasingly popular.

Passing Data via Props

You’ve successfully created a stateless React Component. It’s not complete, though, as there’s a bit more work that needs to be done for it to be properly integrated with a stateful component or container. Currently, the MessageView is displaying static data. We need to modify it so that it can accept input parameters. We do this using something called props — data which we’re going to pass down from a parent component.

Start off by altering the MessageView component like so:

import React from 'react';

class MessageView extends React.Component {
  render() {
    const message = this.props.message;

    return(
      <div className="message">
        <div className="field">
          <span className="label">From: </span>
          <span className="value">{message.from}</span>
        </div>
        <div className="field">
          <span className="label">Status: </span>
          <span className="value">{message.status}</span>
        </div>
        <div className="field content">
          <span className="label">Message: </span>
          <span className="value">{message.content}</span>
        </div>
      </div>
    )
  }
}

export default MessageView;

The main thing to be aware of here is how we’re defining the message variable. We’re assigning it a value of this.props.messagewhich we’ll pass down from a stateful parent component. In our JSX we can then reference our message variable and output it to the page.

Now let’s create a parent component for our MessageView. Make a new file message-list.js and add the following code:

import React, { Component } from 'react';
import MessageView from './message-view';

class MessageList extends Component {
  state = {
    message: {
      from: 'Martha',
      content: 'I will be traveling soon',
      status: 'read'
    }
  }

  render() {
    return(
      <div className="container">
        <h1>List of Messages</h1>
        <MessageView message={this.state.message} />
      </div>
    )
  }
}

export default MessageList;

Here, we’re using state to store an object containing our message. Part of the magic of React is that when the state object changes, the component will re-render (thus updating the UI).

Then, in our JSX, we’re passing the message property of our state object to the MessageView component.

The final step is to update our App component to render our new stateful MessageList component, as opposed to the stateless MessageView component:

import React, { Component } from 'react';
import MessageList from './message-list';

import './App.css';

class App extends Component {
  render(){
    return (
      <MessageList />
    )
  }
}

export default App;

After saving the changes, check your browser to see the result.

Take a moment to make sure you understand what’s happening. We’re declaring a state object in our (stateful) MessageList component. A message property of that object contains our message. In our render function, we can pass that message to our (stateless) child component using something called props.

In the (stateless) MessageView component, we can access the message using this.props.message. We can then pass this value along to our JSX to render to the page.

Phew!

Prop Checking

As your application grows and data is being passed back and forth as props, it will be useful to validate that components are receiving the type of data they’re expecting.

Luckily, we can do this with the prop-types package. To see a quick example of this in action, change our MessageView component as follows:

import React from 'react';
import PropTypes from 'prop-types';

class MessageView extends Component {
  
]

MessageView.propTypes = {
  message: PropTypes.object.isRequired
}

export default MessageView;

This will cause your React app to complain if the message prop is missing. It will also cause it to complain if the component receives anything other than an object.

You can try this out by changing the parent component’s state like so:

 state = {
  message: 'Not an object!'
}

Go back to your browser and open the console. You should see the following logged to the console:

Warning: Failed prop type: Invalid prop `message` of type `string` supplied to `MessageView`, expected `object`.
    in MessageView (at message-list.js:13)
    in MessageList (at App.js:9)
    in App (at src/index.js:6)

Component Reuse

Now let’s see how we can display multiple messages using MessageView instances. This is where React starts to shine, as it makes code reuse incredibly easy (as you’ll see).

First, we’ll change state.message to an array and rename it to messages. Then, we’ll use JavaScript’s map function to generate multiple instances of the MessageView component, each corresponding to a message in the state.messages array.

We’ll also need to populate a special attribute named key with a unique value such as id. React needs this in order to keep track of what items in the list have been changed, added or removed.

Update the MessageList code as follows:

class MessageList extends Component {
  state = {
    messages:  [
      {
        _id: 'd2504a54',
        from: 'John',
        content: 'The event will start next week',
        status: 'unread'
      },
      {
        _id: 'fc7cad74',
        from: 'Martha',
        content: 'I will be traveling soon',
        status: 'read'
      },
      {
        _id: '876ae642',
        from: 'Jacob',
        content: 'Talk later. Have a great day!',
        status: 'read'
      }
    ]
  }

  render() {
    const messageViews = this.state.messages.map(
      message => <MessageView key={message._id} message={message} />
    )

    return(
      <div className="container">
        <h1>List of Messages</h1>
        {messageViews}
      </div>
    )
  }
}

Check your browser to see the results:

As you can see, it’s easy to define building blocks to create powerful and complex UI interfaces using React.

Refactor to Use React Hooks

Hooks are a recent edition to React, but they’re taking the React world by storm. In simplistic terms, they make it possible to take a React function component and add state (and other features) to it.

I’m going to finish this tutorial by refactoring our MessageView component to make it a function component, which manages its state with React hooks. Please note this is only possible when using React v16.8 and above.

import React, { useState } from 'react';
import MessageView from './message-view';

export default function MessageList () {
  const initialValues = [
    {
      _id: 'd2504a54',
      from: 'John',
      content: 'The event will start next week',
      status: 'unread'
    },
    {
      _id: 'fc7cad74',
      from: 'Martha',
      content: 'I will be traveling soon',
      status: 'read'
    },
    {
      _id: '876ae642',
      from: 'Jacob',
      content: 'Talk later. Have a great day!',
      status: 'read'
    }
  ];

  const [messages] = useState(initialValues);
  const messageViews = messages.map(
    message => <MessageView key={message._id} message={message} />
  );

  return (
    <div className="container">
      <h1>List of Messages</h1>
      {messageViews}
    </div>
  );
}

In the above example, I’ve replaced the state object with the useState React hook. As the name suggests, this allows you to manage a component’s state.

Using hooks will help you avoid something called prop drilling when working on large projects. Prop drilling sees you passing props through multiple components (that ultimately have no need of that data) just to reach a deeply nested component.

We can also convert our MessageView component to a function component:

import React from 'react';
import PropTypes from 'prop-types';

const MessageView = ({ message }) => {
  const { from, status, content } = message;

  return(
    <div className="message">
      <div className="field">
        <span className="label">From: </span>
        <span className="value">{from}</span>
      </div>
      <div className="field">
        <span className="label">Status: </span>
        <span className="value">{status}</span>
      </div>
      <div className="field content">
        <span className="label">Message: </span>
        <span className="value">{content}</span>
      </div>
    </div>
  );
};

MessageView.propTypes = {
  message: PropTypes.object.isRequired
}

export default MessageView;

Notice how we now receive the message prop in our component:

const MessageView = ({ message }) => {
  ...
}

This utilizes a technique called object destructuringwhich allows you to extract individual items from arrays or objects and place them into variables using a shorthand syntax.

We employ the same technique here, to grab the values we need from the message object and avoid prefixing everything with message:

const { from, status, content } = message;

And that’s the lot!

I don’t want to go into React hooks any further in this article, but just make you aware that they exist and that they’re becoming increasingly popular among the React community. If you’d like to learn more about hooks, please read our guide to getting started with React Hooks.

Demo

Here’s a live demo you can play with:

See the Pen
React Message App by SitePoint (@SitePoint)
on CodePen.

Where to Go from Here

We’ve now come to the end of this introductory guide. There’s a lot more React concepts that I haven’t been able to cover, such as data fetching, error handling, routing, working with forms, debugging. The list goes on …

The good news is that we have a lot of awesome React content on SitePoint Premiumas well as many great articles on our blog. I encourage you to check them out and build something great.