top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

About React Toolbox?

0 votes
431 views

What is React Toolbox?

React Toolbox is a set of React components that implements Google Material Design specification. It's built on top of some the trendiest proposals like CSS Modules (written in SASS), Webpack and ES6. The library harmoniously integrates with your Webpack workflow and it's easily customizable and very flexible.

Bootstrap your application with beautiful Material Design Components

React Toolbox uses CSS Modules by default to import stylesheets written in SASS. In case you want to import the components already bundled with CSS, your module bundler should be able to require these SASS modules.

Although we recommend webpack, you are free to use whatever module bundler you want as long as it can compile and require SASS files located in your node_modules. If you are experiencing require errors, make sure your configuration satisfies this requirement.

Node Installation

 npm install --save react-toolbox

In this minimal example, we import a Button with styles already bundled:

import React from 'react';
import ReactDOM from 'react-dom';
import { Button } from 'react-toolbox/lib/button';

ReactDOM.render(
  <Button label="Hello World!" />,
  document.getElementById('app')
);

Video Tutorial

References

http://react-toolbox.com
posted Dec 14, 2016 by Manish Tiwari

  Promote This Article
Facebook Share Button Twitter Share Button LinkedIn Share Button


Related Articles

Discussion About MUI - React.Js?

What is MUI?

The MUI React library is designed from the ground up to be fast, small and developer-friendly. Using the MUI React library you can add MUI components to your React apps and switch seamlessly between MUI CSS/JS and MUI React even within the same app.

Bower Install

bower install mui

NPM Install

npm install --save muicss

The MUI React library is designed to be used server-side or with your build system via the muicss NPM package.

 

Video for MUI Layouts
https://www.youtube.com/watch?v=8I2YS7OCkpQ​

 READ MORE
About React MDL?

What is React MDL?

React-MDL is the React implementation of the already popular Material Design Light framework by google.

MDL is a light weight material design CSS framework which aims on bringing concepts of material design while keeping the UI lightweight.

The current implementation of React-MDL (v1.x) uses the entire MDL library provided by Google. This includes both the MDL css and the MDL javascript. 

Node Commends:

npm install --save react-mdl

Simple Code for Button

npm install --save react{/* Colored FAB button */}
<FABButton colored>
    <Icon name="add" />
</FABButton>

{/* Colored FAB button with ripple */}
<FABButton colored ripple>
    <Icon name="add" />
</FABButton>-mdl

Video for React MDL
https://www.youtube.com/watch?v=qHALhAY93Xc

 READ MORE
About React Foundation?

What is React Foundation?

React Foundation Apps is a react port of Foundation Apps. Foundation Apps is a new framework for building web apps. It has awesome new features like flexbox based grid, motion-ui, and several core components for building web apps. But, javascript components of foundation-apps are built with angular.

The goal is to wrap every part of Foundation into re-usable React components following the framework's best practices. The primary focus is ease-of-use and extensibility. We use pure render components, also known as stateless components, whenever possible to keep the memory usage to a minimum. Stateful components are only used for larger components, such as ResponsiveNavigation, where state is actually necessary. All components are unit-tested to ensure their quality.

Here is a list of the available components:

  • Badge
  • Breadcrumbs
  • Button
  • ButtonGroup
  • Callout
  • CloseButton
  • FlexVideo
  • Grid
  • Icon
  • Label
  • MediaObject
  • Menu
  • Pagination
  • Progress
  • ResponsiveNavigation
  • Switch
  • Tabs
  • Thumbnail
  • TopBar

Example Code for Creating a Button

<div className="button-basics-example">
  <Link>Learn More</Link>
  <Link>View All Features</Link>
  <Button color={Colors.SUCCESS}>Save</Button>
  <Button color={Colors.ALERT}>Delete</Button>
</div>

 

Video for React Foundation

https://www.youtube.com/watch?v=SZI3ezctqH0

 

 READ MORE
About React Bootstrap?

What is React Bootstrap?

React-Bootstrap is a library of reusable front-end components. You'll get the look-and-feel of Twitter Bootstrap, but with much cleaner code, via Facebook's React.js framework. 

React-Bootstrap is a complete re-implementation of the Bootstrap components using React. It has no dependency on either bootstrap.js or jQuery.

You can consume the library as CommonJS modules, ES6 modules via Babel, AMD, or as a global JS script.

React-Bootstrap is compatible with existing Bootstrap themes. Just follow the installation instructions for your theme of choice.

Because React-Bootstrap completely re-implements the JavaScript bits of Bootstrap, it's not automatically compatible with themes that extend the default JavaScript behaviors.

The Bootstrap code is so repetitive because HTML and CSS do not support the abstractions necessary for a nice library of components. That's why we have to write btnthree times, within an element called button.

The React.js solution is to write directly in Javascript. React takes over the page-rendering entirely. 

NPM:

$ npm install react-bootstrap --save

BOWER: 

$ bower install react react-bootstrap

Example Code: For Rending Button

var button = React.DOM.button({
  className: "btn btn-lg btn-success",
  children: "Register"
});

React.render(button, mountNode);

Video Tutorials:

https://www.youtube.com/watch?v=Ob6xHzmTpig

 READ MORE
...