Tutorial 1: React distilled

humaneee

4 min readSep 28, 2017

This article is in Building an offline-first application series. You may want to read table of contents.

Before you begin

Install create-react-app.
Walk through ES6 features.
Create new application: retodo.

Objectives

Philosophy of using React.
Creating simple components.
Rendering a component inside a component.
Duck folder structure.
React usages.

React is a javascript library for building user interface(UI). It’s a component-based, means you can build many small components UI and compose these together. You can think component as a function which transforms properties(arguments) to UI. In the matter of fact, component has many lifecycles hooks, but in this series, you can see that we can develop our app with functional styles, means all component is stateless(pure, uncontrolled) component. Let write your very first component.

// src/HelloWorld/index.js

import React from 'react';const HelloWorld = () => (
  <div> Hello React! </div>
);export default HelloWorld;

As you can see, HelloWorld is a component(function). It takes no property and renders a div with Hello React! text. To see how does this look like, just mount it to App component.

// src/App.js

import HelloWorld from './HelloWorld';class App extends Component {
  render() {
    return <div>
      <HelloWorld />
    </div>
  }
}

We’re structuring our folder in Ducks structure. So instead of importing ./HelloWorld/index.js , we just import ./HelloWorld . The index.js part of the file will be chosen by default.

Let’s write a component that take nameand say hello to name .

// src/HelloName/index.js

import React from 'react';const HelloName = ({ name }) => (
  <div>Hello {name}</div>
);export default HelloName;

Make sure that it show correctly ‘hello your name’:

// src/App.js

import HelloName from './HelloName';class App extends Component {
  render() {
    return <div>
      <HelloName name="My Name" />
    </div>
  }
}

Congratulations! You just write your first components. It works. Actually, as you can see, the App component, it’s a class that inheritances from Component . That’s another way to write a component. It allows you to write stateful component where you can implement lifecycles hooks and put your logics inside. For example, you can put AJAX request in componentDidMount hook, after requesting successfully, you render the result into render() function. By that way, every time you render stateful component with the same properties, you can not guarantee that you render the same result. In this series, we will try our best to write stateless components. So you know you can write very maintainable code.

The App component is a class now, let’s change it to functional component:

// src/App.js

import HelloName from './HelloName';const App = (
  <div>
    <HelloName name="My Name" />
  </div>
)

Now, we have component inside a component. Component is in JSX template just like a <div> or other <html> tag.

Regularly, we have a big App component, which is rendered in #root. We will write many small components and put these inside App component. By that way, we can compose many small components to develop full-fill our app.

Common use-cases of React:

You can use if/else , ? : , && , || and loop(map function) in your rendering template, just put it in {} . Note that, we usually use expression () render our template, so we avoid to use if/else in our template, we tend to use ? : more often.

Conditional

// src/HelloLoggedName/index.js

const HelloLoggedName = ({ isLogin, name }) => (
  <div>
    {isLogin && <div>Name: </div>}
    { isLogin ? <div>{name}</div> : <div>Not login</div> }
  </div>
);

// App.js

const App = (
  <div>
    <HelloLoggedName name="John" isLogin={true} />
    <HelloLoggedName name="No Name" isLogin={false} />
  </div>
)

2. Loop

// src/TagList/index.js

const TagList = ({ tags }) => (
  <div>
    { tags.map(tag => <div>{tag}</div>) }
  </div>
);

// App.js

const App = (
  <div>
    <TagList tags={["React", "Redux", "offline app"]} />
  </div>
)

3. Styles

There are 2 common ways to style your component: inline styles and className.

Inline styles: You have to convert all css properties to a hash object. Following convention key as camel case and value as string.

// src/StyledHelloWorld/index.js

const StyledHelloWorld = () => (
  <div>
    <div style={{ color: 'green', marginTop: '10px' }}>Hello world</div>
  </div>
);

className

// src/ClassNameHelloWorld/index.js

import './index.css';const ClassNameHelloWorld = () => (
  <div>
    <div className="hello">Hello world</div>
  </div>
);

// src/ClassNameHelloWorld/index.css

.hello {
  color: green;
  margin-top: 10px;
}

Handling events

// src/EventHelloWorld/index.js

We treat actions like other attributes, we just pass actions to our component, when we click on button, we just trigger action to do our task. There are no side-effect inside component.

const EventHelloWorld = ({ handleOnClickAction }) => (
  <div>
    <input type="button" value="action" onClick={e => handleOnClickAction(e)}
    <input type="button" value="print" onClick={e => console.log(e)}  </div>
);

Where to go from here:

With philosophy of using React as stateless UI component. You can see we can easily to reuse our UIs and develop completely complexed UI web app in next tutorial. Even though we can can reuse many components for mobile development by using React Native. Because component is stateless, so testing with Jest is very easy. You just snapshot test our component. If you curious about how React render and optimize performance by using vdom and React Fiber or how to write reusable components, many cool docs about React available at:

Tutorial 1: React distilled

Before you begin

Objectives

Common use-cases of React:

Where to go from here:

Written by humaneee