React JS Examples must do for a Beginner

If you are just starting react js or looking for a way to start react js , check out these examples below:

These examples / concepts are must for a beginner to get well versed with.

Stateful Components are components depending on it’s state object and change it’s own state. The component re-renders based on changes to it’s state, and may pass down properties of it’s state to child components as properties on a props object.

Fig.1 Stateful Components

Stateless Components purely acts as a view, the components do not have any state. Here, we pass props (method argument) and provide the value along with it. Notice there is “this” keyword.

Fig.2. Stateless component

Implicit Return Components are the same as above but without a return statement. This would be useful when you are creating a button or a default form that could be used else where.

Fig.3. Implicit React Component

Fragments are used to render multiple elements without using wrapper class. Fragments let you group a list of children without adding extra nodes to the DOM. Fragments are used in place of necessary <div> tag so as to avoid invalid html DOM elements. You can use <> </> instead of <React.Fragment></React.Fragment>

Fig.4. Fragment in React

Normally you would use <div> </div> which makes the HTML rendering illogical and invalid due to <td> element ( also applicable to any listing element like <li>, etc. ).

JSX allows to write HTML elements in JS and place them in the DOM without any createElement() or appendChild() methods. It is used to convert HTML tags into react elements.

Fig.5. JSX element

Only single parent tag is allowed which means that no multiple parent tags are allowed, either nest it in <div> , <ul>, <table> or use React.Fragments.

Fig.6. Single parent tag allowed

One tip before we jump to our last example:

Fig.7. One last tip

You can see the value is updated to 2 after the component has been mounted, there can occur several problems with this method, use this instead:

Fig.8. Use prevState to fetch the previous state and then update it.

There exists a clearer way also:

State vs Props

State belongs to a component and is mutable which means the state of the component can be changed. The state of the component is changed using setState({}) method.

Props similar to a method argument, they are passed to a function or a constructor. The props that are passed are immutable.