Imagine working on a grand big project, hundreds if not thousands of interlinked files. If you're the sole author of the project, you would within a reasonable amount of time be able to remember what you have done and where you had done it. More realistically however, you work in a team of multiple people and the code base reflects your team's diversity. Trying to change one file or even one function can turn out to be a several hour long odyssey into the depths of your repository. 

What are components?

React is a technology that lets you create a view for every state in your app.  Each component is responsible for it's own state, making them incredibly easy to change or modify. You are the director of the react ensemble - filling in and pulling out components from your composition where you deem it necessary. 

A component is a reusable block on your website that follows the single responsibility principle. The principle states that one component should only be responsible for one thing. HTML as a language has multiple different tags you can use to identify different parts of your page, including <h1> for headers, <script> to indicate inline scripts, <body> to encapsulate the main content of a webpage and <html> to encapsulate the whole document. React takes this to the next level by letting you make such components and implement them anywhere. Into these tags, you can feed information through the props object for the components to pick up and push into the view. 

A component can be stateless and stateful, maintaining internal state which is totally encapsulated. React figures out when data changes, and re-renders the view returned from your component

A simple stateless component

export default class HelloWorld extends Component {
  render() {
    return <div>{this.props.msg}</div>;
  }
}

Exporting wit the use of ES7, we are able to import the component into the main render function, where we define a mounting point in a normal html file. in this case it is a div with a class of  'outerLayer'.

import HelloWorld from './relevant/file/path'

ReactDOM.render(
 <HelloWorld msg='First msg!'>
  , document.querySelector('.outerLayer'));

 

 

 

Posted
AuthorMartin
CategoriesWEB601