Ramp sur React / React Native en moins d’un mois / blogs / perficient

J’ai eu de nombreuses occasions de guider les développeurs nouveaux dans les cadres natifs React et React. Bien que tout le monde soit différent, je voulais fournir un guide structuré pour aider à amener un nouveau développeur dans le pli React.

Condition préalable

Cette introduction à React est destinée à un développeur qui a au moins une certaine expérience avec JavaScript, HTML et des pratiques de codage de base.

Idéalement, cette personne a codé au moins un projet en utilisant JavaScript et HTML. Cette expérience aidera à comprendre la syntaxe des composants, mais tout développeur en herbe peut également en tirer des leçons.

Niveaux

Il existe plusieurs niveaux pour les programmeurs de niveau débutant qui souhaitent apprendre React et recherchent quelqu’un comme vous pour les aider à se mettre à la vitesse.

Débutant avec peu de connaissances de JavaScript et / ou HTML

Pour un développeur comme celui-ci, je recommanderais Connaissances de JavaScript et HTML d’introduction. Peut-être un simple exercice de programmation ou des instructions en ligne, avant de les présenter à réagir. Vous pouvez comparer JavaScript à une langue qu’ils connaissent et couvrir les concepts de base. Un guide en ligne de base devrait être suffisant pour les mettre en service avec HTML.

Junior / intermédiaire avec une certaine connaissance de JavaScript et / ou HTML

Je passerais en revue quelques bases de JavaScript et de HTML pour m’assurer qu’ils en ont assez pour saisir la syntaxe et les terminologies utilisées dans React. UN cours supplémentaire ou le guide en ligne peut être bon pour un recyclage avant de les présenter aux concepts modernes.

Développeur chevronné qui n’a pas utilisé React

Même s’ils n’ont pas beaucoup utilisé JavaScript ou HTML, ils devraient pouvoir accélérer rapidement. Lecture Réagir la documentation devrait être suffisant pour relancer le processus d’apprentissage.

Conseils et directives

Vous pouvez commencer leur réaction et réagir le voyage indigène avec les directives suivantes:

Réagir la documentation

La documentation du développeur React est un excellent point de départ si le développeur n’a absolument aucune expérience ou commence. Il fournit un contexte significatif dans les différences entre JavaScript standard et HTML et comment React les gère. Il fournit également une référence précieuse sur les fonctionnalités disponibles et ce que vous pouvez faire dans le cadre.

Conseil de pro: je recommande de les commencer tout de suite composants fonctionnels. Ils sont plus largement utilisés et ont souvent de meilleures performances, en particulier avec les crochets. Je les trouve personnellement plus faciles à travailler avec.

Composant de classe:

function MyButton() {
    return (
        <button>I'm a button</button>
    );
}

Composant fonctionnel:

const MyButton = () => {
    return (
        <button>I'm a button</button>
    )
}

La différence avec un si petit exemple n’est pas très évidente, mais elle devient très différente une fois que vous introduisez des crochets. Crochets Vous permettez d’extraire les fonctionnalités dans un conteneur réutilisable, cela vous permet de garder la logique séparée ou de l’importer dans d’autres composants. Il existe également plusieurs crochets intégrés qui facilitent la vie. Crochets toujours Commencez par «utiliser» (UseState, Useref, etc.). Vous pouvez également créer des crochets personnalisés pour votre propre logique.

Concepts

Une fois qu’ils ont compris les concepts de base, il est temps de se concentrer sur les concepts de réaction avancés. La gestion de l’État est un facteur important de React qui couvre les états des composants et à l’échelle de l’application. L’apprentissage des packages largement utilisés pourrait être utile. Je recommande Volie à outils redux Comme il est facile à apprendre, mais extrêmement extensible. Il est idéal pour les grands et les petits projets et offre des fonctionnalités de gestion des États simples à complexes.

Maintenant, c’est le moment idéal pour souligner les principales différences entre React et React Native. Ils sont très similaires avec quelques ajustements mineurs:

Tic-tac-toe

Je suivrais les concepts React avec un exemple de projet. Cela permet au développeur de voir comment un projet est structuré et comment coder dans le cadre. Tic-tac-toe est un excellent exemple pour un nouveau développeur React pour essayer de voir s’ils comprennent les concepts de base.

Débogage

Le débogage dans Chrome est extrêmement utile pour des choses comme les journaux de console et d’autres journalisations qui sont bénéfiques pour les défauts. L’inspecteur de style est un autre outil obligatoire pour React qui vous permet de voir comment les styles sont appliqués à différents éléments. Pour React Native, la documentation contient utile links aux outils utiles.

Travail de projet

Attribuez le nouveau développeur REACT Developer Bogs de bas niveau ou les améliorations des fonctionnalités à aborder. La surveillance étroitement de leurs progrès via la programmation des paires a été extrêmement bénéfique dans mon expérience. Cela offre la possibilité de poser des questions en temps réel auxquelles le développeur expérimenté peut offrir des conseils. Cela offre également l’occasion de corriger les erreurs ou les mauvaises pratiques avant qu’elles ne soient enracinées. Les demandes de fusion doivent être examinées ensemble avant l’approbation pour garantir la qualité du code.

De clôture

Ces conseils et outils donneront à une nouvelle réagir ou à réagir le développeur indigène les compétences qu’ils peuvent développer pour contribuer aux projets. De toute évidence, la transition vers React Native sera beaucoup plus fluide pour un développeur familier avec React, mais tout développeur familier avec JavaScript / HTML devrait être en mesure de ramasser les deux rapidement.

Merci pour votre temps et je vous souhaite la meilleure des chances avec l’intégration de votre nouveau développeur sur votre projet!

Pour plus d’informations sur l’expertise de Perficient, à notre blog ou à notre équipe de solutions mobiles aujourd’hui!