I am re-learning React JS after using it for almost two years professionally.

React JS, for me, is the choice of front-end library; I am using daily to build web applications since the beginning of 2019. Before that, I was using the original Angular JS or Angular 1 for 3 years, and before that, I used jQuery for a year.  I feel very comfortable using React JS, but the projects I am building are always following the same concepts, so I thought, why not start re-reading the docs and watch some courses, blogs, and learn some new tricks I could use in my daily work-life.

I feel that I will learn some new tricks

I am a big fan of Pluralsight, so I decided to see what is in the React JS path. Fortunately, there are totally new and up to date courses, so I feel that I will learn some new tricks and tools I can use next week at work.

I will try to make notes and commentary as I discover new and old techniques as if this website would be my university notebook. I will do my research and leave spontaneous notes here and there to make concepts easier for myself and remember later. I won’t copy-paste every bit of code from these courses, but I will leave simple example codes and the references to find the original ones if you want to investigate the topic more deeply.

The course I am following is:

Designing React Components, by Peter Kellner: https://app.pluralsight.com/library/courses/react-components-designing/table-of-contents (not sponsored)

I will also read the relevant sections of the official react js documentation: https://reactjs.org/docs/getting-started.html

Let’s see what can we learn today.

In this course we are building an example application using the following technologies:

• Nodejs
• Next.js
• React JS

At first, we create an empty Next.js application, and Peter explains that Next.js is using file based routing. If you never used Next.js before, it is really similar to how basic PHP works without an MVC framework but taking care of the complex parts for you.

We learn that in the Next.js project, under the “pages” folder, all “.js” file is a webpage. I copy-paste here how the code in the index.js looks like to see what we need for a static hello world page:

function Page () {
    return <div>
        <h1>Hello World</h1>
    </div>
}
export default Page;

As you see, we only need to return a function that returns an HTML block.

For static content, like images

For static content, like images, we have to put everything into the “public” folder. For example, if we want to access the “/images/icon01.jpg” from the browser, we have to put it in the project under the “public/images/icon01.jpg” root. It is that simple.

As we start building the React JS components, we create a folder for them, to keep them organized, under: “src/components/YourComponentFolderName”. Of course, the YourComponentFolderName will get replaced by each component’s name you are going to create. I would say that this structure for the components are not set in stone, you can create your own structure if you find something that fits you better.

We still do live in a perfect world

As I am watching the course, we are finally starting to build our first component called: Header.js. As he creates his first JSX code and types <Header /> he points out that although the Header component is only a function, we still have to use capital “H” instead of a lower “h” against the JavaScript convention (as it should be called “header”). He forgets to explain why that is. He says I quote: “We do not always live in a perfect world.” It is not helpful at all. We still do live in a perfect world; we just need to understand the reason behind it.

I will not write down everything that is already explained perfectly in detail (https://reactjs.org/docs/jsx-in-depth.html) but in short:

JSX just provides syntactic sugar for the React.createElement(component, props, …children) function.

From <https://reactjs.org/docs/jsx-in-depth.html>

When an element type starts with a lowercase letter, it refers to a built-in component like <div> or <span> and results in a string ‘div’ or ‘span’ passed to React.createElement. Types that start with a capital letter like <Foo /> compile to React.createElement(Foo) and correspond to a component defined or imported in your JavaScript file.

From <https://reactjs.org/docs/jsx-in-depth.html>

I find it quite amazing

As we start building the demo application, I find it quite amazing how nicely JSX blends into the Next.js page syntax. Since Next.js only needs a default export that returns a function, that again will return an html code when it gets called (see the example code for the index.js above), a page with a React Component looks like this:
 

import HelloWorld from '../src/components/HelloWorld/HelloWorld';

function Page() {
    return <div>
        <HelloWorld />
	   <div>The element above is a react component, but this is a standard HTML element.</div>
    </div>
}
export default Page;

What is nice in the code above is that behind the scene, the react JSX will translate component into a React JS function, which will be called by React js, which will create the HTML. When it is done, JSX will replace the react component with the created HTML without touching the rest of the HTML.

After all that, Next.js will return the generated HTML to the browser.

---

Now I have to stop at 1:55 at this video (https://app.pluralsight.com/course-player?clipId=806ca49d-987a-4829-a9a7-43b6888cf6fc), where we learn why to reuse components and how to achieve more code reusability by utilizing JavaScript’s map method.

If you liked this article and you want to learn more with me, please leave a comment below.

See you next time 🙂