(Still in progress)

I recently stumbled on this free ebook by Mike Mangialardi and immediately fell in love with it. So I decided to document most of the things I learnt from reading this book on my blog for future reference purposes. If you are also interested in reading the book, here is a direct link to it 👉 (ReactJS for  the visual learner). That being said, here are the lessons I learned from the ebook chapter by chapter

~ Chapter 1

The first chapter was all about the introduction to the book and what to expect. The author explained that the ebook is a compilation of blogposts which was originally written on Medium (makes me think if I will be an author soon too 😛). The best thing about this chapter was his honesty about his journey to learning programming and how difficult it was for him to grasp a couple of concepts and almost gave up even though he had a bachelor's degree in computer science. I really love how open and honest he was & tbh, that made me feel about my own journey & also an assurance that I'm not alone. He also explained the approach he will be using to teach in the book (visual approach) and added that he will be sharing a couple of personal stories while at it. I really enjoyed the first chapter and was eager to read the next. 

~ Chapter 2

This chapter talks about what react is and why it is so cool. Some of the lessons from this chapter are

  • A web application consists of a backend and a frontend. There is a server-side and a client-side. The backend passes data to the frontend. In modern web development, JavaScript on the frontend takes the data from the backend and converts it to HTML.
  • A single-page application refers to an application that is composed of multiple views but only a single page. Each time a new view is needed, a single page containing all possible views is loaded up-front and the active view can be dynamically toggled.
  • React is a JavaScript library for building user interfaces (The best part - he explained that a library has a collection of books that has been arranged/sorted for you & when you need to borrow a book, you just need to locate where it is). A library does most of the heavy lifting work which can be related to a Javascript library specifically React where there is already a prepackaged code available for us that we can use to make views for user interfaces.
  • With React, we can create single-page applications by creating views for each state in our application (home page, login page, etc.) and dynamically toggle on and off the views depending on the state.
  • Views refer to the content that traditionally appears on a separate page on multi-page applications.
  • One of the main features of React is that it is component-based.
  • With React we can create single-page web applications consisting of views that contain a hierarchy of components.
  • The summary of this chapter is that: React is a JavaScript library that allows us to construct user interfaces that are component-based and that can be dynamically updated depending on the state of an application. This allows us to create intentional, complex, and yet organized user interfaces that fit nicely into the current state of modern web development.

~ Chapter 3

This chapter was more into setting up the React application for practice and explaining some basic javascript concepts. Codepen was the online IDE used but I prefer CodeSandbox, so I will be using that to follow along. That being said, some of the lessons from the chapter are:
  • Getting more familiar and comfortable with online editors such as Codepen and CodeSandbox
  • React Core is used to define the encapsulation of a React component.
  • ReactDOM is the bridge between taking an encapsulated component and rendering it as HTML.
  • In this chapter, I discovered that the class component was introduced first which is always a great way to start React but I will be implementing all my examples with the functional components which I'm currently using. One major difference between the class and functional components is syntax. The functional component is like a plain javascript that returns JSX while the class component extends React.Component which has a render method. A detailed explanation with more reasons and differences can be found here
  • JSX was also introduced here. The full meaning of JSX is Javascript XML. It basically just allows us to write HTML in React.
  • The first react component was rendered here as well which you may already know "Hello World".
  • Since this book was based on visual learning, a couple of illustrations were done here using things around such as houses, blocks, villages, amongst others to explain how components can be broken down to smaller parts and what it means. The first project in this chapter was using pure CSS to build a Koala image using React components. For my own project, I used Styled components and functional components to achieve the same thing. The link to my Sandbox project can be found here

~ Chapter 4

In this chapter, we finished with the Koala image project that was started in the Chapter 3 (see the final image below).

  • CSS was to make this Koala image and I learnt a lot from it. As mentioned earlier, I used functional component to build mine and styled component for styling. 
  • The major lesson in this chapter is learning how to implement nested components and breaking down problems into smaller bits.

~ Chapter 5

In this chapter, we dived more into awesome stuff that can be encapsulated into React components such as handling props, managing state, and setting up lifecycle hooks amongst others. At this point, we were like halfway down the book and I was still loving it.

Some of the lessons from this chapter are:

  • There are seven data types - Boolean, Null, Undefined, Number, String, Symbol (now in ES6) & Object but we focused more on Number, String, Boolean, and Object 
  • Number is an integer or a floating-point number. String represents textual data. Boolean is any of two values: true or false and, Object is key-value pairs collection of data
  • Data types can be encapsulated into React components and this can be done either by props or state.
  • We created a simple button sample here that will have some information that can be passed around as props. In this project, I applied some of my knowledge of Antd and styled-components.
  • What are props? Props is a short form of properties and it is used to encapsulate properties of a certain data type. We can define props like so: <Person hair = {"brown"} /> . This prop can be specified anywhere the person component is used. Props are data and we can use any data type.
  • I created two mini projects here to practice props. The first project was a profile card that had some information on it. Props was used to pass the information to the card. The second mini project was two buttons with different texts on it using props. This was a fun project and gave a clearer understanding of the meaning of props.
  • One big lesson from props is that, props is used for data that is never updated.
  • Which led us to state. State is used for data, that is updated.
  • State can be used to update data in a props.
  • The mini project I did earlier was updated here with event handlers to handle clicks and update the state as a user clicks.

~ Chapter 6

~ Chapter 7

~ Chapter 8

~ Chapter 9

~ Chapter 10

SHARE 0 comments

Add your comment