From the course: Building React and ASP.NET Core Applications

React key concepts

From the course: Building React and ASP.NET Core Applications

Start my 1-month free trial

React key concepts

“

- [Instructor] Now that we have prepared the web API, it's time to start working on the front end and consume the API endpoints we need. To do so, we are going to use React, but before we start writing any code, let us have a look and learn about the main or key React concepts. In React, the component is an individual item that can obtain other items. It serves as a container, or we can have other pieces that make up our app, like logic to get data, other components for specific functionality, et cetera. But, how do we get the data into components? For that we use props, context or state. A prop is like an HTML attribute, but you can pass any data type that you want as long as JavaScript support it. And if you want to pass data through many levels, you can use context. State is another key feature of React, because it is a place where we can store component data, and each component can have a state. JSX in React, allows you to write XML like code by combining HTML, CSS and JavaScript. So like in XML, we can create our custom notes. This is not the case in a framework like Angular, but you can separate the concerns by separating the HTML, CSS and JavaScript code into different files. In React, every components goes through certain cycles, like for example, component was rendered, destroyed, et cetera. We can take advantage of all those separate stages by using React lifecycle methods. Now, before we start writing any code, let us go to our existing solution where we have the default code and have a look at an example component. In here, go inside the ClientApp folder where we have all the React related code, then src, components, and let's open the FetchData.js file. So in here, we see that for the class to be rendered as a component, we need to extend from the component base class which is part of the React library. Then next we have, constructor, where we passed the props, so we can use them to pass data to our view, and then we have the state declaration. Next, in here we see one of the lifecycle hooks, which is the componentDidMount, so this lifecycle hook will be triggered by the components this rendered. And if you scroll down here, you'll see that we have a render method, which returns XML like code, which is a combination of HTML and JavaScript.

Contents