DEV Community: Xiaomin Zhu

Learning By Doing— Use Gatsby to Create your First Site

Xiaomin Zhu — Tue, 20 Jul 2021 11:59:36 +0000

Last week, our company launched a new project, it is set up with Gatsby — React (frontend), Laravel (backend), SQL (database).

In the beginning, I thought I would have a headache because, with my 1-year coding experience, I had only heard about GatsbyJS but never really worked with it deeply. But after reading the official docs patiently, I found that it was not as complicated as I imagined.

I want to share the basic steps in this article because everything must start with building a solid foundation.

From a technical point of view, GatsbyJS is a hybrid system of React, react-router, webpack, babel, and GraphQL to achieve a complete separation of the data - and the UI layer to create a fast website without losing the modern front-end development model of SEO.

1) Install Gatsby CLI via npm globally by running

npm install -g gatsby-cli

2) Create a Gatsby site from a starter

gatsby new hello-world https://github.com/gatsbyjs/gatsby-starter-hello-world

3) Go to director and Start the development mode

The command gatsby develop starts a development server.

Open up your browser and navigate to http://localhost:8000/

🙌🏻 Yup!🙃

In your code editor, take a look at the different directories and files contained in the ‘HELLO-WORLD’ directory (sorry about my screenshot with the half-hidden text). It should look something like this:

VS code screenshot

Now go to pages/index.js and change “Hello world!” to “Hello you!”, save the file and you should see that changes are reflected almost instantly in the browser.

Gatsby uses hot reloading to speed up your development process. Essentially, when you’re running a Gatsby development server, the Gatsby site files are being “watched” in the background — any time you save a file, your changes will be immediately reflected in the browser.
Let’s add an image, this page is too boring 🌨

In this case, a random image from Unsplash

Save the file:

This is what you should see ⭐️

Yeah! A small success! 🌸

Now, let’s using Page components（🌈 The premise is that you are familiar with the basic structure of React).

Any React component defined in src/pages/*.js will automatically become a page, in our case pages/index.js is the default page.

4) Create a new file “secondPage.js” at src/pages and write some simple code like below, save it.

This is our second page

Let’s say the default page and the second page both got quite large and you were rewriting a lot of things. You can use sub-components to break the UI into reusable pieces. Both of your pages may contain a header — create a component that will describe a Header. 👇

5) Create a “components” folder at /src, then a “Header” folder within it, which contains a “Header.js” file

(I am used to creating files with the same name in each folder, so that it’s simple and clear, for example, Header.js and Header.module.scss inside the Header folder…)

6) Give the Header some text

A very simple Header Component

7) Import this Header from page (/secondPage.js) like below

Import Header Component from page

Now our second page is updated! 💫
Please ignore the inline style here, I generally do not recommend using it. Instead, using scss module for each file would be much better, but in this case, just keep it simple with inline style. ⭐️

Second page contains Header component which we created and imported

🌹 Yeah! Another tiny success! Now let’s play a bit with props in a React way.

8) Give the Header a “title” prop inside pages/secondPage.js like below
Ignore the Link for now.

Give a title prop to Child Header

9) Update Header Component in a React basic way

Using title prop from Parent secondPage

Save and see 🍭

That was easy! Now you could create more pages and sub-components and play around with props! 🔍⏱⏳ …

Remember we had a component which we ignored before at step 8? That is what we want to discover now, it is used to link between pages.

👉 Important! The Gatsby component is for linking between pages within your site. For external links to pages not handled by your Gatsby site, use the regular HTML tag, or you could try it and take a look at the error in the console.

10) Open the index page component (src/pages/index.js), import the component from Gatsby, and give it a “to” property with the value of "/secondPage" for the pathname.

Import Link from Gatsby

Now the default page should look like this ( I gave the Header another title prop which contains “Default page” and pink colour to make it clearer).

Click on the link at the bottom, you will be linked to your second page which we created before

🎢 You can add the Link on your second page which maybe links to the default page, see screenshot at step 8.

Click on the link at bottom, you will be linked to default page

💎 That’s it! We created two simple pages that can be linked to each other, there is not much styling, but that is out of scope in this article.

But wait … just bear in mind, a website has four parts: HTML, CSS, JavaScript, and DATA — “everything that lives outside a React component”.

Often, we want to store data outside components and then bring the data into the component as needed. Data can live in file types like Markdown, CSV, etc. as well as databases and APIs of all sorts.

📝 There are many options for loading data into React components, one of the most popular and powerful of these is GraphQL which I’m learning currently.

The following are some of my thoughts in the current in-depth study. Below is just a brief introduction. I will try to introduce their usage in the next article.
There are two commonly used configuration files:

📍 /gatsby-config.js is basically used to configure two things:

siteMetadata puts some global information, which can be obtained through GraphQL on every page, like a constent title …
plugins configuration plugins, this can be obtained according to the plugin documentation when used

📍 /gatsby-node.js can call Gatsby node APIs to do some automation.

There are generally two common scenarios:

📍 Add additional configuration, such as generating a custom path for Markdown articles.

📍 Generate page files other than /src/pages, such as generating page files for each Markdown article.

The purpose of sharing those steps was to make my thoughts clearer and understand the basic usage of Gatsby, and I am still continuing to learn.

Thank you very much for taking the time to read this article！

If there is something that needs to be corrected, please contact me, I will be very glad to improve them!

Prevent line breaks with CSS

Xiaomin Zhu — Fri, 09 Jul 2021 12:29:18 +0000

A CSS trick in a React component🧚

Recently I encountered an interesting problem, let’s say, there are some list items to display using the basic React code like below 👇

a very simple <ul><li> …

✨ Notice those items should be side by side (inline and of course without any line breaks) like the result below👇

responsive lists view

I wrote some simple css:

I want that the items are side by side 👉display: inline

And the Result was 💥

Ops, line breaks 🙅‍♀️

See the line breaks? Ugly enough…
🤞 Here comes my simple solution:

prevent line breaks

That’s it! 🌸

The white-space CSS property sets how white space inside an element is handled, it collapses white space, but it does not allow wrapping.

The overflow CSS shorthand property sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions.

The text-overflow CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis ('…'), or display a custom string.

That was a quick simple css trick, hope you enjoy it! 💫

Thanks for reading!

My top 5 favourite React Hook libraries

Xiaomin Zhu — Tue, 29 Jun 2021 15:24:11 +0000

A junior’s advice — give it a try.

I have been in contact with React for nearly 10 months and my opinion is that React hooks not only make code cleaner but also improves readability and reduces the amount of the code. For juniors like me who don’t have much experience, getting started is not difficult.

If you haven’t used hooks yet, you should try and add them to your project, because it can really make your programming simple and interesting.

In this blog, I would like to share 5 React hook libraries with you which I tried in some projects.

1. useMedia ✂️

This hook provides a simple way to track CSS media queries and it plays a vital role in responsive websites, it is helpful for rendering different components at different viewports.

For example, you might have a hamburger icon which you want to show with a dropdown list field only on smaller screens, but hide them on larger screens. useMedia provides a quick solution to help solve this problem.
Code example:

Resize the screen and trigger different content.

2. React-hook-form 📋

Link

No one likes to create and recreate complex forms with validation, including React developers.

React-hook-form is a hook about forms:

“Performant, flexible and extensible forms with easy-to-use validation”

With its simpler syntax, speed, less re-rendering, and better maintainability, it started to reach the top in GitHub.

To use react-hook-form, we only need to call the useForm hook, when we do this, we will get an object from which we will deconstruct the register property.

Register is a function, it will accept the input value entered by the user and verify it, it will also pass each value to a function, which will be called when the form is submitted, so we need to connect it to each input as a ref.

In order for register to work properly, we need to provide an appropriate “name” attribute for each input. For example, for user name input, its name is “username”, the reason for this is that when we submit the form, we will get all the input values on a single object.
Code Example:

The attributes of each object will be named according to the input name attribute we specified.

In order to handle submitting the form and receiving input data, we will add an onSubmit to the form element and connect it to the local function of the same name.

From useForm, we will get a function named handleSubmit, we wrap it around onSubmit as a higher-order function, the handleSubmit function will be responsible for collecting all the data entered into each input, and we will receive an object named data in onSubmit.
Code Example:

With console.log(data), we can see what we entered in each input of the same attribute.

To validating the form and adding constraints for each input value, we only need to pass the information to the register function.

The first attribute is required. By default, it is set to false, but we can set it trueto ensure that the form is not submitted when the form is not filled out.

To apply this verification, username value is required, we can set the value length greater than 6 characters but less than 24 characters.

If we use number for this input (assuming this input is about the age of a person), we will use the attributes min and max instead of minLength and maxLength.

3. React router📍

Link
React router is one of the most popular React libraries, it is used for routing and obtaining application URL history records.

The most eye-catching hooks provided are:

useHistory
useLocation
useParams
useRouteMatch

Its name speaks for itself:

useHistory will get the method of application history data.
Code Example:

Click on the button, page will be navigated to “home” page.

useLocation will return an object representing the current URL.

Trigger a new “page view” event whenever a new page loads.

UseParams will return the object of the key-value pairs of the URL parameters of the current route.

In this way, with “: id” you can access the parameters of the current route’s URL.

useRouteMatch will try to match the current URL with the given URL, which can be a string or an object with different options.

“match” is an object which contains current path, url…

4. Redux hooks 🛒

Link
Redux is used as a global state manager throughout the application. A few months after the Hook was released by the React community, Redux added Hook support. This Hook can be used to replace the previous high-level component method connect().

The most eye-catching hooks provided are:

useSelector
useDispatch
useStore

useSelector allows you to extract data from the Redux store state, using a selector function, may return any value as a result, not just an object.

useDispatch returns a reference to the dispatch function from the Redux store. You may use it to dispatch actions as needed.

useStore returns a reference to the same Redux store that was passed into the component.

My personal opinion is, the documentation is good but a bit complicated, to start using it, you still have to read the documentation, 🧩 until now I’m only in the elementary stage.

5. usePortal 🖼

Link
usePortal makes it easy to create drop-down menus, modal boxes, notification pop-up windows, bubble prompt boxes, etc…
It provides a way to create elements outside the DOM hierarchy of the application.
Code Example:

With “Open” button you can open Portal with a “Close Portal” button, hit ESC or click outside to close it.

The examples above is just my personal suggestion. I have added a link below each hook title where you can directly refer to the original site, if you find anything that can be improved or corrected, please contact me.

Thank you very much for reading!

From Music to Web Development -My Path

Xiaomin Zhu — Wed, 09 Jun 2021 11:22:36 +0000

From being a musician of a symphony orchestra to a web developer.

Since I was a child, my parents focused on cultivating my music literacy. My father is a famous musician and my mother is a doctor. Yes, I am also talented, my ears are born with absolute hearing. I can tell the exact pitch with closed eyes when people press any key on the piano. It would make sense that music should be my future career, right?

Going to a foreign country to continue music studies

After high school, I was admitted to the Shanghai Conservatory of Music where I studied hard for 4 years to obtain a diploma. In the second week, after receiving the certificate, I decided to visit Vienna, the famous city of music in Austria, because I didn’t want to stay at home for a career under the cover of my parents like a child forever. So I packed my bags and boarded a plane.

In Vienna, I passed the entrance exams to get into a Master's course. “Don’t be idle anyway and give it a try” I thought. I signed up and came to the examination room. The result was very pleasant, I didn’t speak a word of German but I was admitted. Yes, I was proud of myself.

The studying journey in Vienna allowed me to make many friends, speak German fluently, co-operate with orchestras, whom I often performed with abroad. It was around the time I was about to graduate, that I met my husband.

The world is sometimes so wonderful. On the night of our wedding, I had to perform in the world-famous Golden Hall in Vienna. It was so stressful that after our concert and dinner I fell asleep while walking.

The second turning point: Become a store manager assistant in a luxury company

Less than a year after marriage, my husband and I noticed that, although we live together, we rarely see each other. The reason was that I often traveled to other cities or even other countries to perform. So I made the decision, to have a normal 9–5 job.

I experienced different jobs like filmset catering, concert performer just for one day, and finally as a store manager assistant of a luxury goods company. There I faced a variety of different orders every day and was able to arrange the warehouse inventory, dealing with customers from different countries, and collaborating with fashion designers.

My motivation were simple: 1. The job has fixed working hours; 2. I could meet people in various industries.

The third turning point: Start learning Web Development

Time goes by fast and my enthusiasm became less and less after I became an Austrian citizen. I was now determined to enter the third turning point in my life.

I have to thank my previous company as it allowed me to come into contact with a lot of amazing web pages and different celebrity blogs, which acted as a catalyst. On a whim I asked myself, can I create one? Let me Google how to make one.
In the beginning, I just wanted to create a simple page for fun. After I learned HTML by myself, I found that it would be cool if I could change some styles... So I started to learn CSS.

My husband was very supportive of my decision and he introduced me to a developer colleague in his company. Since then, we’ve met and he helped me to get in touch with GIT, understand DOM… I mean the most basic knowledge. Can you say that I have just stepped into the web development branch? Not sure, because everyone says “HTML is not a language.”

Since I came into contact with JavaScript for 3 weeks, my head was turned by some small achievements. I heard about React, so why don’t I give it a try? However, after learning React by myself after 2 weeks, I noticed that when I review the code which I wrote a few days ago, I was lost... I noticed that I had learned so much but forgot almost everything which made me want to give up.

At that point, by chance, I ran into a friend who had a similar experience. She told me that it might be too early for me to learn React because I haven’t mastered the basic knowledge yet, so, with the idea of giving myself a second chance, I jumped back to JavaScript and continued with the basics.

After one month, another whim came to my mind. How about a course? Maybe it will help me with a learning direction? In fact, my mind was still in chaos at that time. Thanks to my husband for his continued support, I found a Bootcamp and signed up.

The Bootcamp

It was a 12-week Web Development Bootcamp Link and on the second day, we started to get familiar with Node.js. It was like a fantasy for me, I understood almost nothing. I often could only sleep for 4 hours a night (down from my usual 7 hours). My feeling was: This kind of learning method is crueler than a war.

In fact, I have to say that you need to go into the bootcamp with the right mentality and focus. You will not be an expert by the end. You will still have plenty of questions. However, it’s a start and you must accept that not all the learnings will stick.

I remember that there were nine people in that class. Three of them gave up in second, fourth and fifth weeks but I persisted until the end. After doing a few small projects the Bootcamp colleges were prepared us for a job search(what? after weeks of learning?). In fact, for me, it would be satisfying to get an internship because my feeling was I KNOW NOTHING and I was not confident at all.

The Interview

The first remote interview (because of covid-19) was an experience I will never forget. The CTO of the company gave me a sentence after asking me a bunch of skill questions: “It doesn’t matter if you don’t know everything, I will send you a TEST…”, I was speechless because I didn’t understand what he was asking for.

A few days later, I received an email which contains a TEST with attached: “Normally this test will take 2.5 hours, since you are a junior, you can complete it in 7 hours, but after you opened the test, you should finish it without a break”...

I opened and it requested that the camera be turned on. From the moment I turned on the camera I knew that the next result should only be known to God, because there were so many “Terminology” which I never heard before and didn’t know where to start with those questions.

I completed the assignment in 4 hours. Unfortunately, I didn’t pass the test. What was disappointing was that I didn’t receive feedback or a response from the company. I politely wrote an email explaining the situation and expressed my apologies that I did not meet their requirements. That I will continue to improve my skills and so on. The result was that I still haven’t received any response — — maybe I really did that terrible. It was hard, but I’m not the type of person who gives up easily, not in this case.

The Final turning point

One week later, I had the Bootcamp graduation presentation with my final project that I created with Next.js. It was a funny App about dog adoption. I believe people liked it because I got several requests from companies that were looking for a junior developer. After I went through interviews, I was lucky enough to get a chance from a company and started with my first IT position.

That was my road to web development. I hope this article can inspire you whether you have similar experiences or ideas or intention. Nothing is impossible and it’s never too late to be a beginner.

Thank you for reading my first article!