Posts

How To Deploy Single Page Applications Bootsraped by Create React App to surge.sh

Image
Have you heard about surge.sh ? If someone ask me that question 2 days ago, my answer, for sure, is "Nope".  I just found this surge.sh yesterday when I tried to publish a simple todo list app built with React JS, React Router and Redux to GitHub project pages. Unfortunately, the application router didn't work smoothly under  https://{username}.github.io/{repo-name}. Instead of changing my working code, I decided to find other free static hosting providers. I found surge.sh somewhere on the create-react-app guide. I install it globally using npm, then I typed surge command under the project directory, and boom the app is online on a surge.sh subdomain. It is fast and easy to deploy our static file to surge.sh. So, In this React JS tutorial, I will show how effective deploying our React JS app to surge.sh. Installing the surge.sh cli We will install it locally inside our project dev dependecies using npm: npm i surge --save-dev or yarn: yarn add surge --dev . I
4 comments
Read more

React JS Tutorial : React Router Redux Todo App

Image
React Router and Redux are the most common libraries in React JS ecosystem. They are not officially come with Facebook's React JS, but they are always inside my project's dependencies. In this blog post we will try to create a simple todo app using React Router and Redux. We will also use Material-UI ( Top 10 React JS UI Components ) and lodash uniqueId to generate id for todo item. What we need in this React JS Tutorial: create-react-app (you can install it using npm i -g create-react-app or yarn global add create-react-app ) code editor (I always use Visual Studio Code ) browser (I use Google Chrome) Mockups When we develop  React JS applications, it would be better if we start by designing the application's mockups. The app will have 3 pages: Home Todo, Edit Todo, and Not Found. 1. Home Todo (path: / ) 2. Edit Todo (path: /edit/:id ) 3. Not Found (path: /:something-not-listed-in-the-router ) Bootsrap New Project  First, let's bo
7 comments
Read more

Top 10 React UI Libraries (UI Components)

Image
React is no doubt one of the most popular JavaScript frameworks in the world. We can use it to create modern and beautiful user interface (ui) for web, mobile, and even desktop applications. React is not CSS framework, so it comes without any styles or ready-to-use ui components. Fortunately, React ecosystem is so huge, there are dozens open source projects that provide us React ui library or ui components (I prefer call it as ui components). People are often confused which one should they use in their projects. If you are looking for the best react ui library, here are my top list base on GitHub contributors and stars on December 16th, 2017. 10. rebass Rebass is Functional React UI component library, built with styled-components. GitHub Repo:  https://github.com/jxnblk/rebass GitHub Stars: 3316  GitHub Contributors: 26  Website:  http://jxnblk.com/rebass 9. elemental Elemental UI is A UI Toolkit for React.js Websites and Apps. GitHub Repo: https://github.com
Post a Comment
Read more