No. This post don’t teach you anything about ReactJS. But the fundamental before get into ReactJS/VueJS/Angular.
Beginner guide and resources before pick up ReactJS. (This is guide is applicable to VueJS, Angular or similar frontend library/framework)
ReactJS – one of the famous frontend library. It’s always a struggle for beginner to learn this library. For me, I enjoy the learning curve of ReactJS. It’s not that hard once you know what you should focus on.
Guides (Before pick up ReactJS)
What you should know before pick up ReactJS (or any frontend library, VueJS, Angular or others).
#1 HTML (HyperText Makeup Language)
The web is build up by HTML tags. Every website need HTML. Do you familiar with HTML tags ?
Below example showing some HTML tags. Get yourself familiar with the HTML tags.
<!DOCTYPE html> <html> <head> <title>Title</title> </head> <body> <h1>Hello World</h1> <p>A simple HTML example</p> </body> </html>
Why the HTML tags is important in ReactJS ? Think of the HTML is the component in ReactJS.
What do you know about the attribute in HTML tags ?
<input type="text" value="" />
<input /> is the HTML tag.
value are the attributes to the HTML input tag. Attributes is important because it help provide additional information to the HTML tag.
Most of the time, you can define the
attributes as the
props in ReactJS.
HTML events ? The events that trigger the actions of HTML tags.
Such as click a button or any HTML tags. Focus the input tags. Mouse in or mouse out, mouse over HTML tags. These are some of the example of events in HTML tags.
Below is the resources to HTML events:
We have to deal with a lot of events in ReactJS. That make it a reactive frontend library. The name of events will be different in ReactJS. However, get to know the event will help you in googling for relevant solution.
#2 CSS (Cascading StyleSheet)
If HTML is woman, then CSS is makeup.
They are pretty without makeup, but with the right makeup they are prettiest.
Yes, applying CSS to HTML can make your website beautiful. CSS serve as controlling the presentation/view to your target audience. If you think ReactJS don’t need CSS, think again.
Learn the following.
- Build in function
- Expression and operators
It’s fine if you can’t remember all the built in function, I can’t too. But, at least get to know the existence of the function then, it can ease you in google search for relevant information.
Expression and operators and Statement is basically the same in all turing complete programming language.
Guides (After pick up ReactJS)
I will suggest you come back here after you have picked up the ReactJS.
#1 UI Component Libraries
In modern web development, our web application UI is expected to be responsive to adapt various screen size, especially mobile device, such as smartphone and tablets. However, it cost a lot of time and resources to write your own UI component library, don’t forget the cost to maintain it.
Most company don’t have these resources to invest in these area. Therefore, it’s good to use an open-source UI component library to minimise the cost.
UI component libraries come with a set of predefined and minimum functionality components. Most of the time, they are supporting responsive web design out of the box.
So what are the options for UI libraries in React ?
- React Bootstrap (initially, they are created based on Bootstrap 3, now they upgraded to support Bootstrap 4)
- reactstrap (They are created based on Bootstrap 4, because at that time React Bootstrap is not supporting Bootstrap 4 yet)
- Ant Design
- Material UI
- Fluent UI React
- Chakra UI
** Google “UI component library” if you looking for others.
#2 ES 6
Here is the github repo that I like when I first get in touch with the es6. Simple and straight to the point.
** If you like the repo, please give the author a star. 😁
This section is assume you had take a look the ReactJS documentation – State and understand what a
After getting to know ReactJS, we write the frontend of web application in component pattern. We can handle the state in component respectively. How about handle the state in between components and globally ?
Global state management libraries:
I would like to suggest that any new comer shall take a look at local state instead of using any global state management library at the beginning of writing React application.
Get yourself familiar with local state before moving to any global state management library. Most of the time, we don’t need global state management library.
As for myself, I like to manage the state locally instead of globally. This way when I refactor my code or removing any part/components. The state will be remove together. I don’t have to bother there is any unused global state and provide confusion to the codebase.
** I’m believe that many senior will ask their junior to straight jump into redux without knowing what it’s… They can’t even explain why they need redux for their application. Because tutorial ask you to follow ? someone suggest to you without giving any context ? Think twice.
Why is it important ? We need it in handling event, asynchronous or intereactive action.
Don’t be afraid when someone tell you ReactJS is hard. When you start from fundamental, all gonna be easy.