AGRICULTEUR

Constructeur de pages par glisser-déposer et CMS pour React, Vue, Angular et plus

Utilisez vos composants de code et la pile de votre choix. Plus de peur des changements HTML 🙂

Style de code: plus joli
PR bienvenus
Licence
Les types

Exemple de l'éditeur

Choisissez votre cadre:


API REST


GraphQL


Shopify


Code VS




Réagir


Next.js9


Gatsby


vue


Nuxt


Angulaire


Composants Web

Enregistrer les composants Rendu votre contenu créé visuellement
import { Builder } from '@builder.io/react'
 
// Register our heading component for use in 
// the visual editor
const Heading = props => (
  <h1 className={style}>{props.title}</h1>
)
 
Builder.registerComponent(Heading, { 
  name: 'Heading',
  inputs: [{ name: 'title', type: 'text' }]
})
import { BuilderComponent, builder } from '@builder.io/react'
  
builder.init('YOUR_KEY')
  
export default let BuilderPage = () => {
  const [pageJson, setPage] = useState(null)
 
  useEffect(() => { 
    builder.get('page', { url: '/' })
      .promise().then(setPage)
  , [])
 
  return <BuilderComponent model="page" content={pageJson} />
}

Qui utilise Builder.io?

Essayez-le!

Comment ça marche?

  • Intégrez le API ou SDK Builder à votre site Web ou application
  • Créez un compte gratuit sur builder.io et glisser-déposer pour créer et publier des pages et du contenu

Comment le contenu est-il structuré?

Dans Builder, le contenu est structuré en Des modèleset adapté avec Les champs personnalisés et Ciblage

  • Pages du constructeur – Contrôle total par glisser-déposer entre l’en-tête et le pied de page de votre site. l’essayer
  • Sections du constructeur – Faites une partie d’une page visuellement modifiable dans Builder et utilisez la nôtre Ciblage et planification pour décider qui voit quoi. l’essayer
  • Données du constructeur – Récupérez les données structurées de Builder et utilisez-les n’importe où dans votre application (par exemple, éléments de menu, pages structurées). l’essayer

En savoir plus sur le fonctionnement de Builder Ici

Voir Ici Exemples de structuration d’un site avec Builder

Intégrations sélectionnées


Vous ne voyez pas l’intégration que vous recherchez? Notre API HTML, API de contenu, et API GraphQL fonctionne pour toutes les piles et cadres technologiques.

Qu’y a-t-il dans ce référentiel?

Ce repo abrite tous les différents SDK, Exemples d’application, Projets de démarrage, et Plugins.

Premiers pas avec React

Tu ne réagis pas? Consultez notre guide de démarrage pour obtenir des informations sur tous les frameworks et plates-formes Ici

npm install @builder.io/react

Obtenez un compte gratuit sur builder.io et trouvez le vôtre Clé API

Ensuite, créez une nouvelle page dans Builder avec une URL /something et publier.

Puis dans votre code:

import { builder, BuilderComponent } from '@builder.io/react';

builder.init(YOUR_KEY);

Et dans votre routeur

// You can use the url="..." prop to automatically fetch the content for that URL,
// or omit this prop and Builder.io will fetch the corresponding page for the current
// location.pathname, if available
<Route path="/something" render={() => <BuilderComponent model="page" url="/something" />}>

Dans le générateur, créez une nouvelle page avec l’url « / Something » et modifiez le URL d’aperçu à localhost: port / quelque chose (par exemple localhost: 8888 / quelque chose, si votre serveur de développement est sur le port 8888) et éditez!

En savoir plus sur la configuration de votre Aperçu des URL Ici.

Voir aussi le plein Répondez à l’API ici

Utilisez vos composants

regarde ça Exemple de systèmes de conception Pour de nombreux exemples avec votre système de conception + composants personnalisés + livre d’histoires

👉Conseil: souhaitez-vous limiter la création de pages à vos composants uniquement? Tenter Mode composant uniquement

Enregistrer un composant

import { Builder } from '@builder.io/react';

const SimpleText = props => <h1>{props.text}</h1>;

Builder.registerComponent(SimpleText, {
  name: 'Simple Text',
  inputs: [{ name: 'text', type: 'text' }],
});

Puis reviens à tes côtés

import './simple-text'

// ...

<Route path="/something" render={() => <BuilderComponent model="page" url="/something">}>

Ouvrez le tableau de bord et utilisez-le!

Voir nos site de documentation Pour obtenir de l’aide et des informations supplémentaires, ou contactez-nous si vous rencontrez des problèmes ou des questions!

Pour de nombreux exemples d’utilisation des composants React dans Builder, consultez la source de nos blocs de générateur intégrés Ici et widgets Ici

Pages de destination dynamiques

👉Conseil: voir nos guides pour Next.js et Gatsby pour le meilleur support pour ces frameworks

L’une des choses les plus puissantes de Builder est de créer de nouvelles pages pour vous. Voici un exemple simple de la façon de procéder avec le routeur React:

import { BuilderComponent, builder } from '@builder.io/react'

builder.init('YOUR_KEY')

export default let CatchAllPage = () => {
  const [notFound, setNotFound] = useState()

  return notFound ? <NotFound /> : <BuilderComponent
        model="page"
        contentLoaded={(content) => {
          setNotFound(!content);
        }}
      >
        <Loading/>
     </BuilderComponent>

}


// Then in your app.js
export default () => (
  <Switch>
    <Route path="/" component={Home} />
    {/* Your other routes... */}
    <Route component={CatchAllPage} />
  </Switch>
);

Tu ne réagis pas?

Découvrez le nôtre Guide de démarrage rapide pour les options pour de nombreux frameworks, y compris le nôtre API HTML qui fonctionne pour les deux côtés

let page = await request(
  `https://cdn.builder.io/api/v1/html/page?url=${PAGE_URL}&apiKey=${YOUR_KEY}`
);
if (page) {
  let html = page.data.html;
  // Put the html in your page template between your header and footer and you are done!
}

Conseil: Avec vous pouvez créer des composants réutilisables pour vos pages Builder.io Symboles

Structurer votre site

Il existe de nombreuses façons d’utiliser les générateurs sur votre site. Certaines des questions les plus importantes à vous poser – ce qui devrait être dans votre code sur votre site Web par rapport à Builder.

En règle générale, les parties de votre site que vous souhaitez que les non-développeurs gèrent devraient probablement se trouver dans Builder. Les parties complexes avec beaucoup de code devraient probablement se trouver dans votre base de code. Utilisant composants personnalisés Vous pouvez également trouver un bon équilibre dans votre contenu de constructeur

Vous trouverez ci-dessous quelques exemples de structuration de différentes pages de votre site Web, telles que: B. Pour un site Web de commerce sans tête:

Exemples de structuration de votre site web

Modèles de données, composants, référencement et plus

Builder.io vous donne beaucoup plus de puissance et de contrôle que la simple création de pages. Consultez nos guides sur

Prise en charge du framework supplémentaire:

Ainsi que quelques fonctionnalités pratiques telles que:

Comment fonctionne la plateforme Builder.io

Comment ça fonctionne

Génération de code

Vérifier JSX Lite Découvrez comment notre Codegen fonctionne et essayez-le par vous-même!

Codegen GIF

Nous recrutons!

Voulez-vous travailler sur l’avenir du développement de logiciels visuels? Envoyez-moi un e-mail à [email protected] et parlons

Rejoignez la communauté!

Interroger? Demandes? Retour? Discutez avec nous dans notre forum officiel!

Dépannage et commentaires

Problèmes? Demandes? Ouvrir un problème. Nous voulons toujours entendre des commentaires et de nouveaux cas d’utilisation intéressants et sommes heureux de vous aider.



Source link

Recent Posts