A basic front-end project integrated with React, MaterialUI, ReactRouter, Webpack, Babel, NPM.
It looks like that for every single Single-page Application (SPA), you are gonna create a repository for it. Then the installation of node_modules things and further configurations are needed, which could be tedious and should be simplified. Here you can start a SPA right from here, fast and easy. Following shows how.
# Clone this project to a specific folder.
git clone https://github.com/zhanbei/react-materialui-router-webpack-babel-npm-start-here Your-Front-end-Project-Name
# Update the package.json to fit your need.
cd Your-Front-end-Project-Name && npm init
# Install required modules
npm install
It is done and start adding components and building your own SPA now! {>;}
React is a JavaScript library for building user interfaces. It is impressive and powerful(personal opinion :), but also complex. It is not that easy to get started with React and related libraries, like Material UI, React Router, Webpack, and Babel. This repository is also a great place for you to practice and get started with React.
# Clone this project to a specific folder.
git clone https://github.com/zhanbei/react-materialui-router-webpack-babel-npm-start-here React101
# Install required modules
cd React101 && npm install
# Build the project.
# `dist/main.js` will be generated, after it is done.
npm build
Open the dist/index.html
file with your browser to check it out and see what it looks like.
All set and ready for you, and start your trip to the world of React now! {>;}
Having fun!
The front-end is powered by:
- Babel Babel is a JavaScript compiler. Use next generation JavaScript, today.
- MaterialUI A Set of React Components that Implement Google's Material Design.
- NPM NPM is the package manager for JavaScript and the world’s largest software registry.
- React A JavaScript library for building user interfaces.
- React Router React Router is a collection of navigational components that compose declaratively with your application.
- Webpack bundles your assets of a web page.