Welcome to React Tutorials

React.js is a JavaScript library for crafting fast user interfaces on the front end. This tutorial website was created to supplement official React documentation with a set of short and easy to understand tutorials.

React is simple to use but it's tied to a vast number of software development concepts. You can progress through React tutorials on this site in sequential order. Just follow the main menu on the left hand side navigation bar.

React Elements

React Element is the building block of a React application. Looking to get started quick? If so you can learn How to create React Elements in this quick beginner's tutorial.

You can aid creation process of react elements syntactically with JSX in which case you will write HTML tags as part of JavaScript statements. As unusual as that sounds at first, with practice it becomes second nature.

If you're just starting out this React Elements: Getting Started will lead you to the right trail. Many tutorials start out with react components, which are just react elements in sheep's clothing. The two can be referred to interchangeably.

React Components

If React Elements help you construct your HTML as a JavaScript statement (whether you are using JSX or not the principle is the same) then React Components take this concept one notch further.

React Components are JavaScript classes you can inherit and instantiate. Extending a component is nothing more than deriving your own custom class from it (by using "extend" keyword).

The main class for creating components is React.Component. It's what you will derive your own custom classes such as "to-do" lists, shopping cart items or a grid cell in a board game, for example. It depends on what you are trying to create.

React Components give you ability to add your UI elements to the Virtual DOM. A which point your component will not yet be visible on the screen. Once you Create a React Component, you are ready to "render" it by passing it as first argument of the ReactDOM.render method. Doing that will "mount" your element to the actual JavaScript DOM, making it physically appear on the page.

Make a Donation

To support this site you can submit a donation to support these free tutorial articles that resemble book chapters. Tons of hard work goes into creating something like this, and your support helps run this website and continue serving useful educational material for JavaScript and React.js programmers.

© 2017 Copyright React JS Tutorials (reactjstutorial.net)

All content and graphics on this website are the property of reactjstutorial.net - please provide a back link when referencing on other sites.