Material UI React tutorial.
In this tutorial, we are going to learn about how to use the Material UI framework in React apps.
Material design is developed by Google in 2014, it uses the grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows.
Material design is inspired by the physical world objects and its textures how they reflect light and cast shadows.
What is Material UI?.
Material UI is one of the famous React UI frameworks with 6 million monthly npm downloads and 43k GitHub stars.
Material UI provides us React components that implement google material design.
Getting started.
First, we need to set up and install the new react app by using the create-react-app command line tool.
Open your terminal and run following commands.
Next, we need to change our working directory by using below commands.
npm start is used to run the development server.
It’s time to install the Material UI framework by using below commands.
Adding Nav barLet’s add the Navbar to our Header.
create a new file called navbar.js in your src folder.
In this tutorial, we are going to learn about how to use the Material UI framework in React apps.
Material design is developed by Google in 2014, it uses the grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows.
Material design is inspired by the physical world objects and its textures how they reflect light and cast shadows.
What is Material UI?.
Material UI is one of the famous React UI frameworks with 6 million monthly npm downloads and 43k GitHub stars.
Material UI provides us React components that implement google material design.
Getting started.
First, we need to set up and install the new react app by using the create-react-app command line tool.
Open your terminal and run following commands.
npx create-react-app react-materialcd react-material
npm startIt’s time to install the Material UI framework by using below commands.
npm install @material-ui/core
Now open your react-material app folder by using your favorite code editor or vsc.
Navigate to your public folder and open index.html and add the below highlighted link tag.
Now in App.js file we are importing <AppBar> component from the ‘@material-ui/core/AppBar’.
In AppBar component we passed two props color and position
Now you can see a Header with primary color is rendered on the screen.
Let’s replace our h1 element with Material UI TypoGraphy Component.
Navigate to your public folder and open index.html and add the below highlighted link tag.
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" /><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" /> <title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
App.js
import React, { Component } from 'react';
import AppBar from '@material-ui/core/AppBar';
class App extends Component {
render() {
return (
<div>
<AppBar color="primary" position="static">
<h1>My header</h1>
</AppBar>
</div>
);
}
}
export default App;Now you can see a Header with primary color is rendered on the screen.
Let’s replace our h1 element with Material UI TypoGraphy Component.
App.js
import React, { Component } from 'react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar'
import TypoGraphy from '@material-ui/core/Typography'
class App extends Component {
render() {
return (
<div>
<AppBar color="primary" position="static">
<Toolbar>
<TypoGraphy variant="title"
color="inherit"
>
My header
</TypoGraphy>
</Toolbar>
</AppBar>
</div>
);
}
}
export default App;Adding Nav barLet’s add the Navbar to our Header.
create a new file called navbar.js in your src folder.
Rails is basically a web application framework, which is consist of everything needs to create database baked web application. It helps the developers to create websites and applications by providing structures for all codes written by them. Moreover, common repetitive tasks are simplified with the help of this technology.
ReplyDeleteruby on rails software house
Popular rails gems and APIs
Websites made with ruby
Best ruby gems 2019
React native and React Js