Posted on: March 02, 2020 12:51 PM

Posted by: Renato

Categories: front-end rest react reactnative reactjs

Views: 433

1. Create React App

# Install package
$ npm install -g create-react-native-web-app
 
# Run create-react-native-web-app <project-directory>
$ create-react-native-web-app myApp

# cd into your <project-directory>
$ cd myApp
 
# Run Web/Ios/Android development
# Web
$ npm run web

# IOS (simulator)
$ npm run ios
 
# Android (connected device)
$ npm run android

2. Material Kit React

• Installing the Material Kit

npm install @material-ui/core

• Implementation

import React from 'react';
import Button from '@material-ui/core/Button';

const App = () => (
  <Button variant="contained" color="primary">
    Hello World
  </Button>
);

3. Shards React

This modern React UI kit has been built from scratch to achieve fast performance.

# Yarn
yarn add shards-react

# NPM
npm i shards-react

4. Styled Components

This efficient CSS tool helps build small, reusable components that are responsible for an app's visual interface. With traditional CSS, you can accidentally overwrite the selectors used in other places on the website, but Styled Components can help you completely avoid this problem by using a CSS syntax directly inside your components.

npm install --save styled-components

• Implementation

const Button = styled.button`
  background: background_type;
  border-radius: radius_value;
  border: abc;
  color: name_of_color;
  Margin: margin_value;
  padding: value;

5. Redux

Redux is a state-management solution for JavaScript applications. While it is mostly used for React.js, you can also use it for other React-like frameworks.

• Installation

sudo npm install redux
sudo npm install react-redux

• Implementation

import { createStore } from "redux";
import rotateReducer from "reducers/rotateReducer";

function configureStore(state = { rotating: value}) {
  return createStore(rotateReducer,state);
}

export default configureStore;

6. React Virtualized

Installation

npm install react-virtualized

Implementation

import 'react-virtualized/styles.css'
import { Column, Table } from 'react-virtualized'
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer'
import List from 'react-virtualized/dist/commonjs/List'
{
  alias: {
    'react-virtualized/List': 'react-virtualized/dist/es/List',
  },
  ...rest
}

7. React DnD

ReactDnD is responsible for the creation of complex drag-and-drop interfaces. Installation

npm install react-dnd-preview

Implementation

import Preview from 'react-dnd-preview';

  const generatePreview = ({itemType, item, style}) => {
    return <div class="item-list" style={style}>{itemType}</div>;
  };

  class App extends React.Component {
    ...

    render() {
      return (
        <DndProvider backend={MyBackend}>
          <ItemList />
          <Preview generator={generatePreview} />
          // or
          <Preview>{generatePreview}</Preview>
        </DndProvider>
      );
    }
  }

8. React Bootstrap

This UI Kit library replaces Bootstrap's JavaScript with React, giving you more control over the functions of each component. Because each component is built to be easily accessible, React Bootstrap can be beneficial for frontend framework building. There are thousands of bootstrap themes to choose from.

npm install react-bootstrap bootstrap

Implementation

import 'bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

9. React Suite

npm i rsuite --save

Implementation

import { Button } from 'rsuite';
import 'rsuite/styles/less/index.less';
ReactDOM.render(<Button>Button</Button>, mountNode);

10. PrimeReact

npm install primereact --save
npm install primeicons --save

Implementation

import {Dialog} from 'primereact/dialog';
import {Accordion,AccordionTab} from 'primereact/accordion';
dependencies: {
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-transition-group": "^2.2.1",
    "classnames": "^2.2.5",
    "primeicons": "^2.0.0"
}

11. React Router

React Router is quite popular in the React Native developer community because it is very easy to start working with.

npm install --save react-router

Implementation

import { Router, Route, Switch } from "react-router";

// using CommonJS modules
var Router = require("react-router").Router;
var Route = require("react-router").Route;
var Switch = require("react-router").Switch;

12. Grommet

O Grommet é usado para criar aplicativos Web móveis e responsivos e acessíveis. A melhor coisa sobre essa estrutura JavaScript licenciada pelo Apache 2.0 é que ela oferece acessibilidade, modularidade, capacidade de resposta e temas em um pequeno pacote. Talvez esse seja um dos principais motivos pelos quais é amplamente usado por empresas como Netflix, GE, Uber e Boeing.

• Installation for yarn and npm

npm install grommet styled-components --save

13. Onsen UI

Onsen UI is another mobile app development framework that uses HTML5 and JavaScript and offers integration with Angular, Vue, and React. It is licensed under Apache 2.0.

npm install onsenui

Implementation

(function() {
    'use strict';
    var module = angular.module('app', ['onsen']);

    module.controller('AppController', function($scope) {
      // more to come here
    });

})();

Fontes:

• https://gist.github.com/lucenarenato/3bd0d6844bcd092223d6f7fcbf716762

• https://opensource.com/article/20/1/react-javascript-frameworks

• https://github.com/facebook/create-react-app

• https://github.com/creativetimofficial/material-kit-react

• https://github.com/DesignRevision/shards-react

• https://github.com/styled-components/styled-components

• https://github.com/reduxjs/redux

• https://github.com/bvaughn/react-virtualized

• https://github.com/react-dnd/react-dnd/

• https://github.com/react-bootstrap/react-bootstrap

• https://github.com/rsuite/rsuite

• https://github.com/primefaces/primereact

• https://github.com/ReactTraining/react-router

• https://github.com/grommet/grommet

• https://github.com/OnsenUI/OnsenUI

• Renato Lucena 2020.

Renato

Developer

No comments yet! Be the first to comment