Material-UI: Get started (Fast!) ⚡ React 16+

Material-UI by Hai Nguyen and Olivier Tassinari
Start the server in development mode

Usage

Basic

Folder structure
  • public ⬅Static files are here.
  • src
    - application/Main.js ⬅The main React.js component.
    - server.js ⬅Serves the minified HTML.
    - client.js, index.js, static.js ⬅”Lower level” scripts (will discuss later).
Source code

📝 Code

Advanced

📝 Code

Build and run

Material-UI

Single route static site generation

Static site generation
  1. A regular Razzle build is created with the static setting (RAZZLE_STATIC=true) baked into the generated server side code.
  2. This build is started in production mode.
  3. The static generator is only executed this time. It performs the steps described before and closes the server.

About the example

Motivation

Material-UI’s checkbox animation
Facebook Searcher

What is Razzle?

Why Razzle?

What’s next?

Deploy with one command

Take away

💌 Newsletter

Work with Erik Engi

--

--

--

Web developer, Ex-Codementor, Creator of Best Arcade Script and Member of the CodersClan. Mentored a developer daily for 3+ months. https://Oengi.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Build a React-based front-end app for your Weaviate neural search

New: Versioned Expo CLI

React “state hook” — Using state in a functional/pure component

Final Progress

21 CRYPTOCURRENCIES TO INVEST/TRADE 2021.

How To Run Next.js App With Nodejs API on Minikube

Check Is Fibonacci Number

Why should one use Angular?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Erik Engi

Erik Engi

Web developer, Ex-Codementor, Creator of Best Arcade Script and Member of the CodersClan. Mentored a developer daily for 3+ months. https://Oengi.com

More from Medium

Create ReactJs Application With NX Workspace

Creating a Dynamic Page in Next.js

Build Blog Site using Gatsby JS — Part 3 (Gatsby Plugin Mdx)

WebStorm. How to create your own file templates