Understanding React, My Talk at React Con Dhaka

So last week I had the chance to talk at my very first React and JavaScript event. In this talk I shared my journey of learning React + some of the inner workings of this JavaScript framework. If you would like to know more about this event, you can read my post on Medium (Opens in a new tab)

Me at React Con Dhaka

I posted the live recording over at YouTube, you can check it out (The language is Bangla)

Understanding React, Facebook Live

For those who are reading my blog, I am going to share a few pointers which I discussed about Understanding React:

My React Story

I am a traditional web developer.

By this I mean, I learned to make websites with plain HTML, CSS and later with WordPress. I did not go much deeper with JavaScript.

I started my online journey with blogging, then internet marketing, and then web development with WordPress.

It’s only this year in 2018 I quit everything (even WordPress) and focus solely on JavaScript. I started with Node and React.

I heard the buzz word “React” and I was very excited to build apps with it. That time I didn’t even knew what an app is. 

This is a sample React code:

Sample React code

I didn’t had much experience with JavaScript before. So it was overwhelming.

On top of that, react bombarded me with lots of new things like State, Props, Class, import etc.

So I failed.

But a year or so, I went back to React again. 

I tried to find out my “Why” about react. Why should I learn to use React?

I went to their official website, and this is what I realize.

Every page that I click loads instantly.

The page does not refresh or reloads. It was more like using an app but in a browser.

I was hooked! I wanted to have the same functionality for my website.

Development Tools

React has a lot of setup. And I think this turns off most developers like myself.

In the past, you would need just a text file to write JavaScript, but now you need:

  • Node, NPM
  • Git Bash (for windows)
  • VS Code editor
  • create-react-app tool globally installed by npm

After you get past the crucial setup process, you can finally start to work with React.

So you get this sample React file as the main App.js file for your project:

What do you see?

I see some import statements, an import to add style.css, class and inside it we have some html tags.

What’s happening?

Understanding React

So I had to understand how react works before I can make stuff with it.

As I went deeper I realized:

React heavily uses Modern JavaScript: The class syntax you see, are the way to inherit another parent class called React.Component. This is an abstraction to hide the prototypical inheritance of JavaScript. In JS world, they call this abstraction, syntactical sugar. Using class is the easiest way to deal with inheritance in JS.

HTML inside JavaScript? This looks like HTML but it’s not. You are writing JavaScript. This is called JSX which looks and feels like HTML. It makes it easier to write your code with familiar syntax. But behind the scenes, all these HTML are converted into JS:

found at bablejs.io/repl

import/export: These lets you separate your code into multiple files. It’s very convenient to spread your code into many different files and it’s easier to manage this way.

Array, Object methods (map, filter, reduce, forEach): Since we are going to be working with data, we need to manipulate them in various ways. Many of the popular JavaScript array methods like map, filter, reduce are used all the time. So it’s important you know how to use them.

What Happens when you use create-react-app ?

create-react-app is the simplest way to install all the react dependencies and setup a project. Behind the scenes, it will install around 20 different node packages into your project. When I worked with manual installation, here’s what I found:

Babel Preset Env: This package converts all the newer JavaScript to older version of JS.

Babel Preset React: This package will convert the HTML like JSX into native JavaScript syntax.

Webpack: This will compress and build all the files for you to use. At the end of your project, webpack will bundle all files into a single JS file.

Other loaders: There are loaders to load CSS, inline images, svg and many more. This the way we can import a CSS directly into a JS file. A CSS loader will load the CSS. There are other loaders to load, compress and also work with SASS/SCSS files.

create-react-app is just an abstraction over the complicated setup process. I now do manual configuration and this way I can add the things I need and use SASS.

React is All JavaScript

The way React works, you put all your HTML, CSS, images into your main JavaScript app file. React then takes over and does what you want it to do.

All these files then finally bundle into a single index.html and a bundle JS file for you to upload into your server:

The bundle js file

Components

Components are small sections of your app. Let’s say you have a header, the header can be a component. You can have other components inside the header, like logo, menu, search bar etc.

The entire app can be a single component, or it can be made out of many tiny components.

Why make a component, depends on 2 factors:

  • Do you want to reuse the component?
  • Does the component has to change within the page?

After you create a component, you can then reference it by typing it like <Button />

All component names start with a capital letter, because it’s a class and in programming classes are written this way by convention. It’s also the way react can distinguish between a regular html tag <div /> from a custom component <MyComponent /> 

They can be re used and put inside one another. Here I have defined two components with the class syntax:

State

You may want to change the way a component looks or behaves on your page. Let’s say you have a dropdown which needs to open and close.

In react, this dropdown has a state to indicate if it is open or close:

To have states on your component, you have to create it with the class syntax.

Then you can change the state from open to close.

React notices the change, and re-renders the part of the page, this closes the dropdown.

By using the state, I made this simple bkash calculator:

Event Handlers in React

In vanilla JavaScript or JQuery, you did something like this:

But in React, you don’t have an HTML file and React doesn’t likes when you directly touch the DOM. So how do you do this?

It turns out, you can attach an event listener directly into the component and add the function which lives in the component:

Here it will activate on the onClick event listener.

React and The Backend

React doesn’t care what you use for the backend. You can use any backend and serve the data from the API. You can use:

  • Node
  • PHP
  • Ruby on Rails
  • Django
  • WordPress REST API

In fact I used the WP REST api for my blog. See:

These posts are coming from the WordPress REST api, from my WP backend.

Within React you can use JQuery $.get(), $.post(), axios or even my favorite fetch() api.

Here’s how you can do it:

What’s happening in this code above?

In this component, there is a state called “posts” (line 7) which is an empty array to start.

The idea is to load all the posts into the array, and render it into the page.

There is a lifecycle method called componentDidMount() (line 11) -inside which I call the posts using fetch() method. After I get the posts, I put them inside the state using the setState() method (line 15).

Within the render function, I use the map() method to map over each of the posts and display them on page (line 22).

Once react knows there are new items in the state, it will re-render the page with new content.

Multi Page Apps with React

With React Router, you can make multi page apps. Even with multiple pages, you will still have a central app js file and a final build js file. You are just giving control to the react app and it will do all the page loading.

Tips for Getting Better at React

  • Use create-react-app a lot, build lots of projects
  • Build lots of small components
  • Experiment with states and outside api
  • Learn a lot about JavaScript because React IS JavaScript

Resources

The official react page has so many cool resources to follow. But I found Dave Ceddia’s Pure React ebook to be much more easy to understand.

Final Thoughts

React is complicated, especially if you are like me with very less modern web development experience. But if you get past the learning curve, you can make awesome app like websites with it.

Have anything you want to discuss about React? Let me know in the comments or mention me on Twitter.

2 Comments on “Understanding React, My Talk at React Con Dhaka”

    1. Thanks Eugene, well I’m working on both Node and React, one for backend and one for front. MERN is the stack I am working on.

Leave a Reply

Your email address will not be published. Required fields are marked *