Cloud-oriented Life

Cloud Native Technology Improves Lives

Classes, Enums, Callable Classes, Metadata

Classes

Dart is an object-oriented language with classes and mixin-based inheritance. Every object is an instance of a class, and all classes descend from Object. Mixin-based inheritance means that although every class (except for Object) has exactly one superclass, a class body can be reused in multiple class hierarchies. Extension methods are a way to add functionality to a class without changing the class or creating a subclass.

Read more »

Control flow statements, Assert, Exception

Control flow statements

You can control the flow of your Dart code using any of the following:

  • if and else

  • for loops

  • while and do-while loops

  • break and continue

  • switch and case

  • assert

You can also affect the control flow using try-catch and throw, as explained in Exceptions - https://dart.dev/guides/language/language-tour#exceptions.

Read more »

Functions, Typedefs

Functions

Dart is a true object-oriented language, so even functions are objects and have a type, Function. This means that functions can be assigned to variables or passed as arguments to other functions. You can also call an instance of a Dart class as if it were a function. For details, see Callable classes.

Here’s an example of implementing a function:

Read more »

Generics, Libraries and visibility

Generics

If you look at the API documentation for the basic array type, List, you’ll see that the type is actually List<E>. The <…> notation marks List as a generic (or parameterized) type—a type that has formal type parameters. By convention, most type variables have single-letter names, such as E, T, S, K, and V.

Read more »

mapstructure

mapstructure is a Go library for decoding generic map values to structures and vice versa, while providing helpful error handling.

This library is most useful when decoding values from some data stream (JSON, Gob, etc.) where you don’t quite know the structure of the underlying data until you read a part of it. You can therefore read a map[string]interface{} and use this library to decode it into the proper underlying native Go structure.

Read more »

Introducing JSX

Consider this variable declaration:

1
const element = <h1>Hello, world!</h1>;

It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript.

Read more »

Components and Props

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. This page provides an introduction to the idea of components. You can find a detailed component API reference here - https://reactjs.org/docs/react-component.html.

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called “props”) and return React elements describing what should appear on the screen.

Function and Class Components

The simplest way to define a component is to write a JavaScript function:

1
2
3
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

This function is a valid React component because it accepts a single “props” (which stands for properties) object argument with data and returns a React element. We call such components “function components” because they are literally JavaScript functions.

You can also use an ES6 class - https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes to define a component:

1
2
3
4
5
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}

The above two components are equivalent from React’s point of view.

Rendering a Component

Previously, we only encountered React elements that represent DOM tags:

1
const element = <div />;

However, elements can also represent user-defined components:

1
const element = <Welcome name="Sara" />;

When React sees an element representing a user-defined component, it passes JSX attributes and children to this component as a single object. We call this object “props”.

For example, this code renders “Hello, Sara” on the page:

1
2
3
4
5
6
7
8
9
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
element,
document.getElementById('root')
);

Try it on CodePen - https://reactjs.org/redirect-to-codepen/components-and-props/rendering-a-component

Let’s recap what happens in this example:

  • We call ReactDOM.render() with the <Welcome name="Sara" /> element.

  • React calls the Welcome component with {name: 'Sara'} as the props.

  • Our Welcome component returns a <h1>Hello, Sara</h1> element as the result.

  • React DOM efficiently updates the DOM to match <h1>Hello, Sara</h1>.


Note: Always start component names with a capital letter.

React treats components starting with lowercase letters as DOM tags. For example,

represents an HTML div tag, but represents a component and requires Welcome to be in scope.

To learn more about the reasoning behind this convention, please read JSX In Depth - https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized.


Composing Components

Components can refer to other components in their output. This lets us use the same component abstraction for any level of detail. A button, a form, a dialog, a screen: in React apps, all those are commonly expressed as components.

For example, we can create an App component that renders Welcome many times:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}

ReactDOM.render(
<App />,
document.getElementById('root')
);

Try it on CodePen - https://reactjs.org/redirect-to-codepen/components-and-props/composing-components


Typically, new React apps have a single App component at the very top. However, if you integrate React into an existing app, you might start bottom-up with a small component like Button and gradually work your way to the top of the view hierarchy.


Extracting Components

Don’t be afraid to split components into smaller components.

For example, consider this Comment component:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function Comment(props) {
return (
<div className="Comment">
<div className="UserInfo">
<img className="Avatar"
src={props.author.avatarUrl}
alt={props.author.name}
/>
<div className="UserInfo-name">
{props.author.name}
</div>
</div>
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}

Try it on CodePen - https://reactjs.org/redirect-to-codepen/components-and-props/extracting-components

It accepts author (an object), text (a string), and date (a date) as props, and describes a comment on a social media website.

This component can be tricky to change because of all the nesting, and it is also hard to reuse individual parts of it. Let’s extract a few components from it.

First, we will extract Avatar:

1
2
3
4
5
6
7
8
function Avatar(props) {
return (
<img className="Avatar"
src={props.user.avatarUrl}
alt={props.user.name}
/>
);
}

The Avatar doesn’t need to know that it is being rendered inside a Comment. This is why we have given its prop a more generic name: user rather than author.

We recommend naming props from the component’s own point of view rather than the context in which it is being used.

We can now simplify Comment a tiny bit:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function Comment(props) {
return (
<div className="Comment">
<div className="UserInfo">
<Avatar user={props.author} />
<div className="UserInfo-name">
{props.author.name}
</div>
</div>
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}

Next, we will extract a UserInfo component that renders an Avatar next to the user’s name:

1
2
3
4
5
6
7
8
9
10
function UserInfo(props) {
return (
<div className="UserInfo">
<Avatar user={props.user} />
<div className="UserInfo-name">
{props.user.name}
</div>
</div>
);
}

This lets us simplify Comment even further:

1
2
3
4
5
6
7
8
9
10
11
12
13
function Comment(props) {
return (
<div className="Comment">
<UserInfo user={props.author} />
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}

Try it on CodePen - https://reactjs.org/redirect-to-codepen/components-and-props/extracting-components-continued

Extracting components might seem like grunt work at first, but having a palette of reusable components pays off in larger apps. A good rule of thumb is that if a part of your UI is used several times (Button, Panel, Avatar), or is complex enough on its own (App, FeedStory, Comment), it is a good candidate to be extracted to a separate component.

Props are Read-Only

Whether you declare a component as a function or a class, it must never modify its own props. Consider this sum function:

1
2
3
function sum(a, b) {
return a + b;
}

Such functions are called “pure” because they do not attempt to change their inputs, and always return the same result for the same inputs.

In contrast, this function is impure because it changes its own input:

1
2
3
function withdraw(account, amount) {
account.total -= amount;
}

React is pretty flexible but it has a single strict rule:


All React components must act like pure functions with respect to their props.


References

[1] Components and Props – React - https://reactjs.org/docs/components-and-props.html

[2] React – A JavaScript library for building user interfaces - https://reactjs.org/

[3] React.Component – React - https://reactjs.org/docs/react-component.html

[4] Classes - JavaScript | MDN - https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Classes

[5] JSX In Depth – React - https://reactjs.org/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized

0%