Warning, you must have a knowledge of basic HTML, React, JavaScript before starting React, If you’re done, let’s get started…
React? What is React? Are you curious to know what it is? Today we’re going to tell you about React JS, don’t assume we’re going to make you how to react with other. It’s your choice (Haha). Let’s get started.
React is a open-source, front-end, JavaScript Library(!) not a Framework used for building UI (User Interface), developing SPA( Single Page Application) and so on.
It’s a common mistake calling React “A Front End Framework”, which is not correct. There is a major difference between Framework and Library. So, Now question is what is the basic difference between these two. To be Frank, When you use Library, You can have anything you want, you can do any types of work within it., but for using Framework , The Framework itself is in charge of all the activity. let’s dig deeper into React JS.
The fun part of React is, we tell it what we want, Its like telling the waiter that we want a soda lime with some ice. Then the waiter tried his best to give us the soda lime. Similarly, We declare the UI’s. React take care of the rest.
Many expertise sometimes use a buzzing word “Virtual DOM” describing React and its behavior. What the hell is that “Virtual DOM”? First of all, let’s understand what actually DOM is. Document Object Model (DOM), it is simply browser’s programming interface for HTML type documents. then Virtual DOM is a programming concept, which is a virtual representation of UI’s kept in the memory.
Another buzzing world in React is “JSX” which stands for JavaScript XML. Basically, It allows us to write HTML in React. It makes our life easier writing HTML in React. lets’ look at some coding example,
<Button color="red">Click ME</Button>This is a simple JSX code, which react compiles into this,
React.createElement(MyButton,{color: 'blue', shadowSize: 2},'Click Me')
Let’s See the first example, where we created a Button Component, wait what is Component? Yes, It’s another fun fact of React. In React, we have to use a lot of Component for developing. Component in react is a great idea. We can reuse it where we want. It’s Like the same as JS functions, which serves same purpose, but works in isolation and return a HTML Function. Our Example will return a Button and we can use it almost anywhere in the code. The color of the button is declared which is called props in the language of React. Props are actually the properties of the components, here Button components color props is red which tells React to make the button red. Isn’t it fun? As I mentioned earlier, we just tell React what to do, the rest is up to react for what to do. That’s why this is so popular. Too much words, right?
That’s it for starting React. Now what to do?
Install Node JS to your local machine, and run “npx create-react-app your-app-name” and boom start your journey with React.
Happy Coding.
