Introduction

Sometimes it feels like the whole universe of JavaScript software development revolves around reacts. You can look at other frameworks, for example, angular View, swt, or solid js, but chances are that some portions of the documentation will assume some prior exposure to reacts, and that's why this course exists to give you as a working professional everything that you need to know about Core React js. Unlike other courses with this one, we will throw you straight into the deep end, which will be more engaging in the short term and more useful in the long run. With that in mind, let's do a quick introduction on what is React.

Yes, fundamentally it's a front and framework and it's completely open source. It was open sourced in 2013 and one of the key original value propositions is that this is a completely declarative framework. You tell React what you want your UI to look like and then it's up to the library to make sure that whatever gets rendered matches what is requested. Additionally, it's support multiple platforms so you can learn once and write for the specific platform that you want to target. For example, we will be focusing on browser, but you can actually use it for native development as well by using something like React native.

Now, react has evolved to provide a number of positives for developers, but if there is one feature that we could focus in on that originally set it apart, that would have to be its declarative nature. The fundamental mental model that you need to have is that you take some state within your application, tell React what to render based on this particular state, and then you leave the rest to react. It is up to react to make sure that the UI gets rendered exactly how you described it within your components. Now, as always, I like to talk about principles in action instead of just giving you a slideshow

and even though we haven't even set up a development environment yet, let's take a sneak peek at what a React component looks like and how it gets rendered. One great feature of React is that all of your UI declarations can be embedded within just JavaScript and components. Within React can be simple JavaScript functions. React even provides nice primitives to manage state in the form of hooks, for example, ha. We are creating a state to manage a simple number variable. This state will be managed by React and we can access its current value within our component using Count, and we can update it using

the set count function. We will take a deeper look at React Hooks and specifically U State in a future. Listen, we can use the update method within other utility functions. For example, we can create a simple on click function, which will invoke set count, read its previous value and then increment it by one. Finally, what we want to render is what we return from this particular component and in our case, we are going to render a simple HTML button with its on click wide to this utility function that we just created and the count displaying the current count value.

Now we said that React is declarative and it is conventional. To use JSX to declare what we want our UI to render, we will continue to take a deeper look at JSX and its TypeScript flavor called TSX throughout this course. Now with these three simple lines of code, we've actually created A fully functional React application as requested. React is going to render this button and when we click it, it's going to invoke this on click function, which in turn increments account and then React will re-render the component with the incremented count value

and we can repeat this process as many times as we want clicking the button again and again to see the count value increment and the component re-render. Notice that we simply declared that we want a particular state. We want to change it on a particular interaction and what we want our UI to look like and React does all of the heavy lifting of making sure that our UI gets rendered to the screen and becomes interactive. Now this is just a quick introduction to react. There'll be lots of other lessons in this course with the clear objective of teaching you some specific core part of the React ecosystem

and I can't wait to hear your thoughts in the comments. I hope you are as excited by what you're going to build as I am and I'll see you in the next one.