Day Two - Rendering Elements

miral-zymr — Mon, 22 Jul 2019 06:38:50 +0000

In my previous posts, I have written about JSX and few of its concepts. This post will include the rendering of elements in React.

Elements are the smallest building blocks of React apps. It is the smallest renderable unit in React. These elements can be rendered using the ReactDOM. React Elements are plain objects which are easy to render. React Elements and Components are two different terms.

In order to get React elements rendered, they must be enclosed in the div element with id="root" or "app". React elements are immutable i.e. once an element is created it is impossible to update its children or attribute. Hence, to update the element, its render method is to be called several times. React render is quite efficient by using virtual DOM and efficient differentiating algorithm. The algorithm checks the rendered data and the updated data and only re-renders the data that needs an update, instead of rendering all data.

In the next post, I'll be writing about Components and Props in react.

Day One - JSX

miral-zymr — Wed, 17 Jul 2019 08:53:39 +0000

This is my first blog post here and as a developer and learner, I want to keep it simple. This will be a series of React Concepts that I learn throughout. For a pro, this might be something basic, but I'll make sure the newbies find it helpful. This is just a way to keep a record of my learnings and share and get better at this.

JSX

JavaScript XML, in short JSX is used to create React Elements. JSX is mainly used to make coding easier, as it uses couples the UI logic and the functional logic at one place. JSX is an alternative to React.createElement. It allows us to define the React elements using a syntax which is similar to HTML syntax.

For example,

const simpleText = "Hello World!";
const element = <h1>{ simpleText }</h1>

The first line is simple JavaScript, defining a variable, simpleText as a string. The second line is JSX, which is creating an element and we can directly render the variable element, as shown below.

ReactDOM.render(
    element,
    document.getElementById('root')
);

After compilation, JSX expressions also become JavaScript function calls and evaluate JavaScript objects. Babel compiles JSX down to React.createElement() calls. Hence, we can easily use JSX inside if...else, for loops, assign it to variables, accept it as arguments, and return it as functions.

We can use curly braces to embed JavaScript expression to an attribute. Another benefit of using JSX is, it prevents injection attacks.

JSX can be compared to the following syntax:

React.createElement(component, props, ...children)

The first part (component) determines the type of the React element.
Some key points are:

Capitalized type indicates the JSX is referring to a component. React.createElement(<Foo />, document.getElementById('root');
The dot-Notation can be used to refer a React component if a single module contains several react components. <MyComponents.DatePicker />
React library must always be accessible and be in scope in the JSX code. import React from 'react;
User-defined components must be capitalized. <Hello toWhat="World" />
When you want to render a different component based on a prop, or maybe dynamically render components based on specific values or conditions, JSX type can be defined as follows:

function Story(props) {
    const SpecificStory = component[props.storyType];
    return <SpecificStory story={props.story} />;
}

These are some basics about JSX. For my next topic, I'll be covering some advanced JSX concepts and Rendering Elements.

DEV Community: miral-zymr

Day Two - Rendering Elements

Day One - JSX

JSX