Material-UI study Chapter One
Article Directory
Understanding Material-UI
The most popular React UI framework in the world.
Material-UIIt is Material Designan implementation.
What is the Material Design?
Material Design by Google developed design language. Extended to [the Google Now] (https: //zh.m.wi (when ipg-Bo) of the "card" design, materials and design layout based on a grid, in response to the transition animations, fill, depth effect (e.g., light and shadows ).
We can see, the design of old beautiful! (Who dares to oppose Google I blow his dog's head). Use React + Material-UI PWA can be built in a mobile terminal application, the user will get immersive experience. Material and performance on the PC side is also very brisk.
Material provides a considerable number of component implementation, using the results they want to build can be arbitrary.
Material-UI and other UI framework
Choice is always painful, but we have a profound analysis of the advantages and disadvantages of each frame, and compare their visual effects, and other performance parameters under different scenarios.
Ant-Design
Domestic popular language, produced by the ants gold dress. Ant-Design in the design belongs to quite satisfactory, with no real feeling of bright spots in the design, but it can not be said to be simple.
This service targets related to Ant, Ant is mainly to build large-scale enterprise-class background of the page, these pages often require a large amount of interactive information display rendering. For large-screen PC side, the eye-catching design adequate but will make people unable to concentrate on their operations. And Ant for custom components also friendly enough, as we can not use it to design custom habit input, maybe you do not understand, but if you've used Material you will understand.
However, we have to explain its advantages. Of course, most people know people, Ant complete documentation, improve assembly demo, and even change how you do not, you can take over with. So using Ant development efficiency is very fast.
Bootstrap
As a veteran player UI community, the strength is obvious, enlightening and created a lot of layout, design method widely circulated. For this old hero, I really do not want to nitpick, it really is great, groundbreaking.
If you really want to prick that my humble opinion Shi, BT it is too broad, and we can see it anywhere, so there will always be fatigued.
Material
Material is a Google-led design language, Google developed, we are more at ease, from the design of the various components of view, Google is indeed a design style, from behind the code to see a group of people constantly on the components review. Continue to decouple, we can finally use the Material to build our various styles of custom styles.
The new version of the Material also joined the many advanced features, such as JSS, React Hook and other functions. These features let Material better, but also brought a lot of development problems.
If you use Ant, problems encountered in the development of a custom form, then you just open the document, the Form component can find the perfect solution, but in the Material, the problem may be dispersed in various locations, which is Material about the design philosophy, because it is constantly decoupling, and constantly broken down components, there are some problems, we can not be accurate and fast positioning.
Let me describe for Material document is a book, you can find something to use any component, but not learn Material of design, specification, but you can find them, they hide in the document, but in the main do not see their shadow.
The official also said the novice looking documents with its better to see direct YouTube video above to get started faster.
start to learn
The more fragrant the more difficult nut to crack, as the outstanding cerebral palsy developer, I have to step on a step on the pit.
Pre-knowledge
- React
- TypeScript it is JavaScript superset. If you have previously contacted the Java, C ++ , then you do not need to go directly to the school, we will learn in detail of.
- CSS3
Preparing the Environment
- Node.JS me use the v12.8.1
- create-react-app
- We do not need to download it, because we can directly
npxuse it. - First of all, we first
npmsource to replace Ali npm config set registry https://registry.npm.taobao.org
- We do not need to download it, because we can directly
- A nice compiler VScode
- An advanced browser Chrome
Create a project
In the workspace, use create-react-appto create TypeScriptproject
npx create-react-app learn-material --typescript
cd learn-material
npm start
The above command will open directly in the browser after we finished running localhost:3000the url react projects.
Delete unnecessary files
Remember, we want to remove learn-material/scrall the files inside.
Do not execute the following command in the root directory.
If you do not know the command line, you can manually delete srcall the files in the folder below.
cd src
rm *
Create your own file
In the scrlower path, create index.tsx, App.tsx.
// index.tsx
import {render} from 'react-dom'
import {App} from './App'
import React from 'react'
const el=document.querySelector("#root")
render(<App />,el)
// App.tsx
import React from 'react'
const App:React.FunctionComponent = () =>{
return <>
Hello World!
</>
}
export default App;
Ok, now we run the project, you will see in the browser Hello World!words.
Installation Material-UI
npm install @material-ui/core -S
npm install @material-ui/icons -S
Because, ui certainly use in a production environment, so we use the -S option to install.
The first line installs core library, this is a must.
The second line installed SVG icon support, this is not necessary.
use
Modify our App.tsxfile
// App.tsx
import React from 'react'
import {Card,Typography} from '@material-ui/core'
const App:React.FunctionComponent = () =>{
return <>
<Card>
<Typography align="center" variant="h1">
Hello World!
</Typography>
</Card>
</>
}
export default App;
npm start
Now we can see, the above occur Card Material style of Hello World！words, it is very exciting, because we started learning our way Material-UI of the!
Agriculture is purely self cerebral palsy code if wrong, please correct me hope to learn together grateful
