React is for beginners

Introduce

This article introduces the general React concepts that I have explored and referenced in the internet, with the aim of helping people who are starting to learn about React.

  1. React works well as a View Layer
    React is not the same as the MVC framework or javascript frameworks that you know from the past. Simply, it is a library that helps users make creating View easier.
  2. Build components in small-scale applications
    For developers, breaking down classes, modules are easier to understand, test, maintain, and this is also true of components in React. Of course, the exact size will depend on many different factors. (include your personal preference!) For example:

3. Function Component

There are 2 ways to write functions for component, 1 is to write React.createClass ()

and the second way is to write in ES6 format

React 0.14 introduced a new structure for components

4. Use propTypes

Join the Machine Learning event - Technology of the Future!
Join the Machine Learning event – Technology of the Future!

propTypes helps developers easily create more secure components, and it will look like:

  1. Some benefits of using propTypes:
    • It is easy to catch errors easily
    • If you use the isRequired attribute, there is no need to perform an undeined or null check in the code
    • 5. Implement unit test for React
    • Drawing from many documents, I found three ways to implement unit tests for components:
    • Render logic
      For example, by displaying an image or with loading icon, we do the following:

then we will perform the test as follows:

Transform the Prop

Interaction with users

Of course, components are not just for display, they are also used for interaction:

Here's my favorite way to test:

ITZone via Viblo

Share the news now