React is all about building user interface so you'll be working with HTML and CSS as well. So start with these first.
3. Arrow functions syntax
Arrow function is a new ES6 feature that's been used almost widely in modern codebases because it keeps the code concise and readable. It allows a short syntax for writing function expressions.
Destructuring is a convenient way of accessing multiple properties stored in objects and arrays.
5. Array methods
You will use the Array method multiple times. So try to learn them before jumping onto React
Some commonly used functions are:
Not mandatory but knowledge of these two can be useful. This is not a big concept or something. You can learn it literally in about a minute
A function passed as an argument to another function is called a callback if the function invokes the argument at a later time
You will use callbacks while working with hooks, forms, and other things. A quick example:
- Reusable components
- Fast due to virtual DOM
- Huge ecosystem
A typical React app contain many components. They are reusable and can interact with each other.
- Component as a simple function that you can call with some input and they render some output
An image showing a typical React app with all different components. As you can see this entire webpage is nothing but the mixture of different components.
Before diving deeper into it, let's talk a little bit about JSX
const element = <h1>Hello, world!</h1>;
Now we know JSX, let's move forward
A typical function component:
A very important concept in React
You might have heard the term "DOM", virtual DOM is kind of similar. It uses a strategy that updates the DOM without having to redraw all the webpage elements.
Every time the DOM changes, browser need to recalculate entire layout and then repaint the web page which makes a web app slow.
To overcome this we have virtual DOM
Every time the state of our application changes, the virtual DOM gets updated instead of the real DOM.
Whenever the new element is added to the UI, a new virtual DOM associated with that element is created. If state of this element changes, a second new virtual DOM is created which will be compared with the previous virtual DOM.
It then updates ONLY the object on the real DOM.
You can watch this YouTube video to help you understand it better.
Moving on, setting up your first react project directory is quite confusing. Let's see how you can do it
I'm assuming you have node environment set up and up-to-date version of
npm. If no, download it from here.
Next thing you need to install is
create-react-app from npm, it is a tool helps you start building with React app. It set up all the tools that you need in order to get started.
There are a few different ways to install
You can either do it globally or locally. You can see the detailed guide to set it up here.
Now you have create-react-app installed in your machine, it's time to create your first React app
Depending upon your internet speed, this will take some minutes.
Once done, run "npm start"
Your default browser will launch automatically and you will see the default react app screen at
And that's it. You just created your first react app. I tried my best to give a quick overview of how things work in React.
If you liked my content consider following me on Twitterlibrary.
Do let me know in the comments.
I hope you found this article valuable. If yes do let me know in the comments 😊
This article was inspired by Pratham. Follow him on Twitter for more amazing content.
Also if you got any question feel free to ping me on Twitter.