Last Updated on
I posted the live recording over at YouTube, you can check it out (The language is Bangla)
For those who are reading my blog, I am going to share a few pointers which I discussed about Understanding React:
Table of Contents
My React Story
I am a traditional web developer.
I started my online journey with blogging, then internet marketing, and then web development with WordPress.
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:
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.
React has a lot of setup. And I think this turns off most developers like myself.
- 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.
So I had to understand how react works before I can make stuff with it.
As I went deeper I realized:
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.
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:
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.
All these files then finally bundle into a single index.html and a bundle JS file for you to upload into your server:
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:
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
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:
- Ruby on Rails
- 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
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.