The issues in here might not be too different from code problems you may encounter in other areas:
- html as string
This is not nice, since it is hard to maintain, and in this case even a security risk because we display unsanitized user input.
- not reusable
It is very hard to reuse any of this code. Just imagine you wanted to have several of these input fields on one page or include them in another section of your application.
So, what would our example look like in React?
It seems rather verbose, but bear with me. React wants you to create components rather than models, views and controllers. Components have these characteristics:
- Components are self contained. They come with their template and behavior included.
- Components have an interface. The component's attributes tell you how to configure it.
- Components are composable. Create new components by using other ones in a plug and play fashion.
- Components are hierarchical. Information flows in one direction, from the root component to its children.
- render knows how to display a component using an inline JSX template together with the component's state and props.
- handleClick defines the behavior when the user clicks on the button. It calls our configured dependency this.props.somefunction and modifies its state with this.setState (which triggers a re-rendering).
- getInitialState defines the internal state of the component. The state can change over time and can be altered (like in handleClick).
So, our Hello component completely describes one part of the user interface: a text field and a button, and what happens when the user clicks the button. It also has an interface, consisting only of one property (somefunction) so that we can specify what to do when someone clicks the button.
What are the benefits of structuring an web app the react way? I mentioned earlier that, as a project becomes larger, things tend to become worse and worse in terms of maintainability. So lets say we want to have two of our Hello components on our site, but with different callback functions, and we also want to display a placeholder text as long as the user has not clicked the button yet.
We created two more components: UserInput and App.
UserInput wraps our two Hello tags and passes two different functions as required. No need to modify the Hello component at this point.
For our second task (display default text), we will decompose our Hello component: instead of adding more complexity to the render function, we create UserInput with a property usertext which handles the display logic. This shows the direction of the information flow in react: Hello's state gets an update, and re-renders all of its children, which receive the updated information via their attributes. Information flows from the parent to its children.
As you can see, react components can grow nicely in two ways:
- Top-down: we can split components into different sub-components if they get too large
- Bottom-up: we can create new, more complex components by reusing existing ones
As soon as you get the hang of React, you will notice that there is significantly less magic involved compared to Angular. React does not have two-way data binding, directives, scopes, services, controllers, etc., but still able to do most if not all the things you can do with Angular. I think the core innovation with React is not some new technology, but a better abstraction of how to build user interfaces.