qu'est-ce que le croquis de réaction

react sketch est un outil permettant de rendre des composants React en esquisse. Il s'agit d'une bibliothèque open source. Elle peut écrire des composants React conformes aux spécifications du document Sketch et fournit un moyen plus pratique de gérer les composants. global skpm" à installer.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 17.0.1, ordinateur Dell G3.

Qu'est-ce que React Sketch ?

React Sketch App est un outil qui restitue les composants React dans Sketch. La gestion des actifs d'un système de conception dans Sketch est complexe, sujette aux erreurs et prend du temps. Sketch est scriptable, mais l'API change fréquemment. React fournit le wrapper idéal permettant aux développeurs JavaScript de créer des documents réutilisables de manière familière.

React - SketchApp est une bibliothèque open source conçue pour les systèmes de conception. Il comble le fossé entre la conception et le développement en restituant les éléments React dans Sketch.

Cette étonnante bibliothèque open source offre aux concepteurs un nouveau flux de travail de conception : concevoir avec du code sous le framework frontal React le plus populaire et le restituer dans Sketch en temps réel pour révision. Si l'on y réfléchit bien, Sketch, très populaire dans le milieu du design, représente la moitié des noms de bibliothèques open source, mais en fait elle ne joue que le rôle d'un navigateur. Les documents de conception qui sont réellement laissés sur place deviennent du code.

Installation

npm install --global skpm

Créez un projet basé sur le modèle

skpm create my-app --template=airbnb/react-sketchapp 
cd my-app

Utilisez

pour modifier src/manifest.json

  "commands": [
    {
      "name": "My App Name: Sketch Components"
      "identifier": "main",
      "script": "./main.js"
    }
  ],
  "menu": {
    "isRoot": true,
    "items": [
      "main"
    ]
  }
  }

Créez un fichier de bibliothèque Sketch, ce qui est défini ici dans src/manifest. json est ./ main.js

import * as React from 'react';
import * as PropTypes from 'prop-types';
import { render, StyleSheet, View } from 'react-sketchapp';
import chroma from 'chroma-js';
import { times } from 'ramda';
const styles = StyleSheet.create({
  container: {
    width: 480,
    height: 480,
    flexDirection: 'row',
    flexWrap: 'wrap',
    alignItems: 'center',
  },
});
const Document = ({ colors, steps }) => {
  const color = chroma.scale(colors);
  return (
    <View style={styles.container}>
      {times((i) => color(i / steps).hex(), steps).map((val, i) => (
        <View
          name={val}
          key={val}
          style={{
            backgroundColor: val,
            margin: 2,
            // prettier-ignore
            height: 96 - (2 * i),
            // prettier-ignore
            width: 96 - (2 * i),
            borderRadius: 2 * i,
          }}
        />
      ))}
    </View>
  );
};
Document.propTypes = {
  colors: PropTypes.arrayOf(PropTypes.string),
  steps: PropTypes.number,
};
export default () => {
  render(
    <Document colors={[&#39;#01FFD8&#39;, &#39;#C137E3&#39;, &#39;#8702ED&#39;]} steps={50} />,
    context.document.currentPage(),
  );
};

Execution

npm run render

Apprentissage recommandé : "tutoriel vidéo React"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!