vvlnote.github.io


Save images in react components

My react app needed to display images on one web page. We all know how to import images inside the React componet by using (img src={image_name}). However, if those images are not from the internet, but you like to save them with your app, where should those images be saved? And how to retreive them to display on the web page?


Final Project - React, Redux, and Rail

Final project

Time is flying, the couses are all finished, time for us to put all our knowledge what we learned from the past few months into the final project. It should be a fun journey!


Basic RegEx

This blog will display the general rules of RegEx. There are some notations may different among different progamming languages. please refer to that particular languages for the details.

Why I would like to write about this topic?

I have seen so many applications/shell commands that need to use RegEx to produce the needed information. However, I know that I still can use other way to get the needed infomration. In bottom of my mind, sooner or later, if I would like to have clean codes in some area, (for example, validate the email address, phone number, IP address… etc.) RegEx would be a better choices to make the code lean and clean. The last section (Bonus section) of my first week curriculum is RegEx. This is a good oppertunity for me to dive deep into this topic, and make myself be familiar with it. I know I will be benifit from it in the near future. I also like to use this blog to track how I learn this, what the issues that I encountered, and etc…

What is RegEx? What is pos and con to use RegEx?

RegEx stands for “Regular Expression”.

How to form a pattern? (any good practice that can be followed?)

  • Match Literal String
    1. exact match => this is limitted to only one pattern Search a word in a string, paragraph, aritical, etc… this is the basic idea behind RegEx. Explicitly to spell out the searched key word surrounded by //. Note: the case of searched key impack the search result.

    2. with Different Possibilities => this can be used to search for multiple patterns using the alternation or OR orperator :
    3. Ignore the serached keyword case by using flag - i flag Note: the flag(s) is appended // note: you can append multiple flags after //. For example /search_key_word/ig
    4. wild card
      • . (dot or period) => use this wild card to match all the characters
    5. Match single character with multiple possibilities by using character classes => this allow you to define a group of characters you wish to match by placing them inside square brackes ([]) Note: inside the character classes, you can use hyphen (-) to define a range of characters to match, and includes both ends
      1. Match single characters not speicifed by using negated character sets => place (^) after the opening square bracket and before the characters you do not want to match
      2. Match characters that occur one or more times => use + to check it

My first very simple React app

I am pretty exicted to learn about the React. This is a very popular framework in recently. The reason from what I understand, it could make the code more modulized, so the code can be easily to maintain and developed for the big project.


Rails with JavaScript project

This assignment, I was asked to modify my previous Rails project, add dynamic features that are only through JavaScript and JSON APIs. And the JSON data is getting from the rails controller and appending the data from JSON to the DOM.