Usare Material con React

Mattepuffo's logo
Usare Material con React

Usare Material con React

Materialize è uno dei vari framework CSS disponibili, e si rifà a Google Material.

Questo framework è disponibile anche per React con il nome di Material-UI, ed oggi vediamo come usarlo.

Spostatevi nella directory del vostro progetto React e date questi comandi:

$ npm install @material-ui/core
$ npm install typeface-roboto --save

Il primo installa Material-UI, il secondo il font Roboto sul quale si appoggia.

A questo punto apriamo il nostro App.js; riempiremo una tabella da JSON remoto (qui in dettaglio) ed useremo componenti Material-UI:

import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {withStyles} from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';

const urlFilms = 'http://ferrons.ddns.net/films/films.php';

class App extends Component {

  state = {
    films: []
  }

  componentDidMount() {
    fetch(urlFilms).then(res => {
      return res.json();
    }).then(data => {
      this.setState({films: data});
    }).catch(error => {
      console.log('Error', error.message);
    });
  }

  render() {
    const {films} = this.state;
    return (<Paper className='root'>
      <Table className='table'>
        <TableBody>
          {
            films.map(film => <TableRow key={film.id}>
              <TableCell>{film.nome}</TableCell>
            </TableRow>)
          }
        </TableBody>
      </Table>
    </Paper>);
  }
}

export default App;

Ovviamente dovreste metterlo dentro ad un layout, pensare ad una intestazione della tabella, ecc.

Qui abbiamo visto il minimo.

Infine il nostro index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

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

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

Enjoy!


Condividi

Commentami!