ReactJS has been around for more than five years now. And there is still quite an important number of developers(including your author) who haven't embraced it. Some of us might not be in need of it at all, others haven't gotten the opportunity to taste it, and others might have not even heard of it yet. This article is addressed to the last two groups
Recently, while I was talking to a friend in Russia, he suggested that I learn at least one modern frontend library/framework. Wile we were chattering about it, he advised I try ReactJS instead of Angular. We agreed to it.
The deal was that I must learn ReactJS in a week and get to create a simple to-do application with it. Well, when I think of it now, I realize how that time was actually too long for just a to-do app in React. Because already at the React's homepage you could see that you can create a to-do app in less than 15 minutes. That's the beauty of ReactJS.
But, the agreement was a week and I had accepted the challenge. Here is my plan:
Revise Javascript basics and core principles
I went to Mozilla's re-introduction to Javascript and took a considerable time to practice every aspect of it. That took me about three days out of the week. After getting the basics, I started learning some core principles such as objects and functions.
Go through some basics of ES6
ES6 is the recent Javascript standard. It introduces some new features to Javascript which includes arrow functions, classes, template litterals, variable declaration with let or const. I used this website(not all).
Understand the overall use of React
That was key to me because I needed to know where I am heading to. And having an overall view of a system can help understand the reasons every aspect of it. So, I used Wikipedia's page on React. From there I read more about its ecosystem on devhint
Understand SPA
By default, react allows you to create what is called Simple-Page Applications. It's important I understand that and why I should care. So for that I used this Wiki page.
But, the most interesting information I ran through was this:
JavaScript can be used in a web browser to display the user interface (UI), run application logic, and communicate with a web server.
And, to do that we can use Ajax, WebSockets, Server-Sent Events, and JS frameworks. - Wikipedia
ReactJS is one of those libraries we can use to perform those tasks. Is it cool?! Luckily for us, when you visit the official docs for ReactJS, they also advise you follow almost this same path before you dive into it as the prerequisites.
After that, I did the Intro to React tutorial. I actually finished this tutorial on the last day of the week. Then I tried another tutorial on youtube on creating a airbnb-clone with ReactJS.
Then came the last day. I had a to-do app to build. I was out of time, but I couldn't just give up. So, I tried something.
After that, I had a real feeling of how the whole thing works. So, I went on to build something more useful: my portfolio. Through this project, I have had the chance to write more javascript(es6), get accustomed with ReactJS basic principles, and proxy my SPA with an API locally and remotely.
In the following section, I share with you some of my notes/observations.
Observations while Practicing
Nested components consider immediate children only.
Let's assume you have the following components: ,
<List>
<ListItem>
<ItemElement></ItemElement>
</ListItem>
</List>If you want to next Components, you might need to think of props.children which is like slots in which you can freely inject any content. And Facebook says this:
At Facebook, we use React in thousands of components, and we haven’t found any use cases where we would recommend creating component inheritance hierarchies.
Building with components is kind of difficult to grab at first
The first difficulty one faces when you start with React is to distinguish what a component really is. For that, you need to remember and keep in mind the main goal of using ReactJS is to create UIs. You can start by cutting your UI into considerable parts which become separate components. Have a look at an example made by Valentino Gagliardi. Here is the explanation of how to get your hands around React components from React.
You can't use SCSS(Because there is not supposed any representational dependence between components) unless you eject
Well, this might sound strange at first. This isn't fully true. You can still use scss/sass/less, whether you use react-create-app or you set up your own workflow with webpack or any other build tools. In the case of react-create-app, you would have to eject your application. By default, react-create-app encapsulates all of the npm modules to make your work environment clean. If you want to see those files, you simply eject the application.
It can become hard to manage the huge number of components and the magnitude of their relationship
As your components' number grows, it starts to become a bit hard to manage them and how they relate to each other. That's when the concept of state comes in. Each component can have a state specifying what it needs to work, or what it can give to other components, and how all these should be done.
I use to think that other methods in a component are defined under the render() method.
When you create a component as a class, you have to be conscious of when to place your methods:
class RedButton extends Component {
constructor(){}
ComponentWillMount(){}
handleListChange(){}
...
render(){}
}How do you set metadata if you create only components
You can use react-helmet a plugin specialized in that, or you can set them in the app's lifecycle methods such as componentWillMount
componentWillMount(){
document.title='My beautiful website title'
}What of routing
I used react-router-dom plugin. It's well featured to allow you handle multiple views of your SPA. A note on that though, use exact property like: <li><NavLink exact to="/works">Works</NavLink></li> to avoid many components from being rendered at the same time.
ReactJS does not scope your CSS to a specific component.
You need to do the scoping on your own in your css itself(or use css-module. You can use css variables as well to handle common values.
Binding a method to this allows you to use of this inside that method.
this in that method represents the method itself. Let's assume we have a method toggleButton in a class component.
class redButton extends Component {
toggleButton (e){
console.log(this)
}
}In this case, this doesn't represent the component, but the windows element. To avoid such issues you need to bind this to your methods, like this:
class redButton extends Component {
constructor(){
super()
this.toggleButton = this.toggleButton.bind(this)
}
toggleButton (e){
console.log(this)
}
}Use this.methodName = this.methodName.bind(this) inside the constructor() method (more info )
Put your API in a subdomain
When you want to host your API on the same server(domain) as your React app, get a subdomain to hold your API requests. The main issue that I have noticed is that reactjs has a .htaccess file at the root which redirects all calls to index.html, meanwhile you might need apache(if you are using Apache) to call a different file such as public/index.php. This creates a huge conflict of redirection. In my case, I hosted my react App at zooboole.me's root folder. The API handling my publications are hosted under api.zooboole.me.
But, Once you do that you will face the CORS issue. CORS-Cross origin resource sharing. To fix it you have to configure Access-Control-Allow-* headers from your API.
Conclusion
Obviously, for this project I would have gone for Next.js. This will be my next challenge. I also have to dig more into the state management with React Redux. I think after that, I should be ready for React Native.
But, in general, learning React seemed very easy to me, compared to VueJs.
This was quite long. I hope you get motivated to learn React. My example should help you realize that you can make it, today!
* Cover image by cheesecakelabs.com
Last updated 2021-02-01 UTC