Giter Club home page Giter Club logo

react-foundation-integration's Introduction

Proyecto creado para integrar create-react-app [Instalación 06-06-2017].

  1. Crear un proyecto desde create-react-app. $ create-react-app <nombre_del_proyecto>

  2. Agregar foundation-sites como dependencia del proyecto. $ npm install foundation-site --save

  3. Incluir los estilos de foundation dentro del archivo CSS principal index.css.

@import "../node_modules/foundation-sites/scss/foundation";
@include foundation-everything;
  1. Debido a que foundation está estructurado con Sass es necesario incluir un
    preprocesador de estilos dentro del proyecto y así compatibilizarlos, para esto nos ayudamos con la documentación que ya trae el kit de react e instalamos node-sass-chokidar $ npm install node-sass-chokidar --save-dev

  2. Luego incluimos en package.json los scripts correspondientes para generar CSS desde SASS.

"scrips": {
    "build-css": "node-sass-chokidar src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
    ...
}
  1. Renombramos los archivos de estilo que queremos procesar, en este caso index.css a index.scss y ejecutamos npm run build-css para testear que funciona correctamente.

Ya podemos ejecutar nuevamente npm start y notar que ya no arroja error con SASS.

  1. Es posible automatizar la generación de los archivos CSS desde SASS al ejecutar npm start incluyendo la siguiente dependencia. $ npm install npm-run-all --save-dev

  2. Luego es necesario modificar los scripts contenidos en package.json

"scripts": {
    ...
    "start-js": "react-scripts start",
    "start": "npm-run-all -p watch-css start-js",
    "build": "npm run build-css && react-scripts build",
    ...
}
  1. Ahora es posible agregar la dependencia de Foundation para react. $ npm install react-foundation --save

  2. Como ejemplo es posible agregar un botón al estilo Foundation y revisar que este se vea correctamente, eso lo realizamos en App.js.

<Button color={Colors.SUCCESS}>Testing Foundation</Button>

  1. Para que este ejemplo funcione, es necesario importar al mismo archivo los componentes de Foundation al botón insertado.

import { Button, Colors } from 'react-foundation';

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.