Components: React components VS AngularJS components

First, let's talk about what components are. Components are reusable pieces of code that return html that is rendered onto the user interface. We should try to keep in mind seperation of concerns and keep each compent small. Each component should only do one thing. Ideally you should be able to re-use components because each component only has one task. It is best practice to have each component only perform one task for re-usablitiy, organization, preventing spaghetti code and it will also make it easier to de-bug your app. If you keep all your code in one component it makes it a lot more difficult to find problems when things start to break.

In the photo below, each box ideally would be a seperate component.

Both React and Angular use components but there are some differences between the two. First let's take a look at the general set up of a component in React and AngularJS.

React: React components can be made using functions or with a class. Each component has life-cycles. There are many life-cycles but 3 major life-cycles that are often used are render, componentDidMount and the constructor function. Render is the only manditory life-cycle.

               Class component in React:

Class CatListContainer extends React.Component {
 constructor(props){
   super(props)
   this.state = { cats: [] }
 }
 componentDidMount() {
   fetchCats(cats => this.setState({ users }))
 }
 render(){
   return <CatList Cats={this.state.cats} />
 }
}

                Function component in React:

function CatListContainer = (props) => {
   return (
    <div className="CatListContainer">
        <CatList />
    </div>
   )
}

Generally when making a react component, it is best making it with a function, as long as your working with static data. Notice there is no "render" key word. Render is still happening but you do not need to write the word "render". It will automatically do it for you. After the return statement, (which is used with parentheses instead of curly brakets), JSX is used to render html onto the UI. If you going to dynamically render data that will change, you will need to make your component using class. Class components take a constructor function and will need both the "return" and "render" keyword.

AngularJS: The component controls the view. Each component has the properties: selector, template and style. Instead of passing in props, like react, AngularJS used binding to pass paramaters into a component.

                     AngularJS component:

angular.
 module('myApp')
 Component('greetCat', {
   template: 'Hello {{$ctrl.cat}}!',
   controller: function GreetCatController(){
     this.cat = Pickles;
   }
 });

Let's break down the differences by functionality. First, let's talk about state and mutation. With AngularJS the creaters believe that components should be mutable. This means we can easily change the data any time. AngularJS achieves this, and passes data with dependancy injection and the use of services. But React, however believes components should be immutable and they use state and setState to achieve this and to pass data.

To talk a little bit more about passing data, AngularJS also uses bindings to help pass data from one components to another. Output is made by children components and listened to by the parents. React uses props to pass data. React allows us to update parent state from the child.

As far as rendering and styling goes, AngularJS uses templates to put html on the DOM, which is outside a component, whereas React renders html within the render method, which lies inside the component.

In conclusion, React and AngularJS components are very similar overall but each one has slight differences in how they pass and render data.