Welcome to one of the best React.js tutorial ever available on the planet Earth! By the end of this course, you’ll have complete understanding of React.js. You’ll get to know what this library is, what it’s used for, and what you can build with it. You’ll have enough confidence to build your dream application with it. Sky is the limit. You’ll also explore Redux along the way.
In this section you’ll be answered the most basic queries that’ll help you understand the later sections little bit better. Remeber, these are not the complete explanations. So, if anything looks a bit out of shape, sit back and relax. I just want you to go through these once. At the bottom of this page, you’ll find links for the course outline.
Ready to hop in for the React journey? Let’s begin with a various obvious question …
What is React.js?
React is a library. The extension .js at the end denotes it is a Javascript library.
The main purpose of React is to show some content (HTML – example: divs, spans, headers, footers, forms, buttons etc) to the user’s web browser and handle all the interactions made by the user as well. When these HTML elements are shown up on the screen, the user may want to interact with those elements. For example, they may want to fill a form, or click on a button or give some input to the text input box. React’s goal is to handle those interactions. Whenever some user interact with these elements, React will respond to those interactions.
It is worth notifying that React is an independent javascript library and can work by itself. We can create highly complicated applications with the help of React itself. However, in real life projects, we often need aid of other third party libraries to cut down development time and production cost. React is highly extensible and can work well with other javascript libraries as well as packages, servers, databases, etc.
What is a React Component?
React components are made up of Javascript functions or classes. A single component is used to generate some amount of HTML, and it also defines how that component is shown up on the screen and how it responds to user interaction. We can create React components by using either Javascript classes or Javascript functions. React component may also use Event Handlers to respond to user made events such as clicking, hovering, dragging, etc.
What is JSX?
JSX is a special dialect of Javascript that allows us to tell a React component how it should look like whenever it is rendered to the web browser. Therefore, JSX is used to determine the content of the React app. Syntax of JSX is almost identical to HTML.
What is an Event Handler?
Event handlers are rigorously used across the web to detect user interaction and respond to it. A similar Event Handler is used in React as well. Earlier, you saw that a React component is used to show some content on the screen. An event handler can also be used to detect user interaction in our application, like clicking, hovering, dragging, etc. We can use that Event Handler to create some components or update existing components.
What’s the difference between React and React DOM?
The React library by itself, contains a large amount of code that defines what a component is. We use multiple components in a single React application and join them together to make a working application. All of this is done by the React library itself.
On the other hand, the ReactDOM takes up some amount of those components and prepare it to show up on the HTML front-end. That is, it is responsible for rendering the resultant component on the web browser.