React step by step
What is React?
React is a JavaScript library that helps developers to build user interfaces the things you interact with on websites. It has become popular because of its simplicity and flexibility and is used by companies like Facebook, Instagram and Airbnb.
First of all, since React is a JavaScript library, we need to have some basic knowledge of what JavaScript (and a library) is. If HTML structures your website and CSS styles it, then JavaScript makes it dynamic and is probably what makes things move, refresh or change on the site you’re visiting.
To avoid writing time consuming repetitive functions in JavaScript you can use different libraries, i.e. pre-written JavaScript code. React is one of many libraries and it’s completely frontend and specializes in things that the user interacts with when they’re using a website. This could be buttons, search bars and menus.
And it’s called React because it reacts. It was developed by Facebook (a site that CONSTANTLY updates their data) to improve the user interface development and more effectively change (REACT to) what the user sees when they’re doing things like mouse clicking, submitting and typing.
Why you should use React
- React is declarative which means that you tell it what you want (written in React language) and then it solves the how and builds the user interfaces in the web browser.
- In order to simplify and not focus on the whole website at the same time, you break it down into smaller components that you can reuse wherever you want to.
- Instead of having a complete website re-render every time something changes, React can update only the things that are different than they were before an event happened. This means that if you, for example, change your profile picture, the image is the only thing that is re-rendered – nothing else on the site is updated and replaced with data that is basically the same as it was before. Because that would be kind of unnecessary, right?
In the following links we are going to implement React app by using the above mentioned Components, jsx, props, state and more.
Create ASP.net Core app with React
Build a React App With .NET Core Backend