I run things on VSCode and if you use it too, install a couple of extensions:Ī) React Snippets - for syntax highlighting, auto-complete and a lot moreī) Live Server - to spin up a local server which will aid in fast development
We'll look at how to do the same thing with the React CLI, a little later in this series.įor now, create a file index.html and open it in your favorite code editor. React does have a CLI, but since most people are familiar with script imports, we will import React from a CDN. With a few basics out of the way, let's make a starter application using React. This property is what lends to React the speed it has even while being complex. Now, whenever we make changes to a component, instead of rebuilding the entire virtual DOM, React just does a diff and only updates the components(and it's child components) where changes were made. React has something known as a virtual DOM. It refers to the Document Object Model, which is essentially a tree like representation of HTML where nodes represent HTML elements. If you've read some HTML/JS fundamentals, you've heard about DOM. The state may also refer to the UI-state. Talking about a component's state means simply talking about the data which is local to the state. The search bar is a component, the icons on the top right are all components.
The title of the post and the description, the icons inside the post component - each a component. Look at this screenshot of the DEV home page.Įach of the posts is a component. Every element that you see in a web page can be represented as a component in React. There's no way to know unless I dive deep into it ?Ĭomponents are the heart of React. Also, Angular development is going at a much slower pace than a couple of years ago.Ĭ) I've read that it makes it easier to design highly complex dynamic apps which would usually be a pain in the butt(Sorry, Captain!) with normal HTML+JS. Apps like Instagram and Netflix are built on top of React.ī) It has a huge demand in the job market. Hopefully, if everything goes as planned, I will have 7 articles by the end of this week.īut first, what encouraged me to learn React?Ī) It is scalable. I plan to write about whatever I learn and try to explain it as lucidly as possible. So I've decided that over the course of the next 7 days, I will:ī) Document my learning, and hopefully encourage others who have been procrastinating, to learn along with me. I've been planning to learn react for a while, but I had been pushing it back for way too long.