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!
javascript react material-ui google material
Commentami!