By Andrew Allbright
With that out of the way, let’s dive deeper into React.JS and get to some code.
React Is Simple
Assuming you define an HTML document, as such…
html <html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/ bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/ 15.0.1/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/ 15.0.1/react-dom.min.js"></script> </head> <body> <div id="app"></div> </body> </html>
Please do notice that there are two React.JS libraries included in the document: react.min.js and react-dom.min.js. react is responsible for defining your components, but react-dom is responsible for putting your component(s) on the page. I’ve thrown in bootstrap just to make the document look prettier. Now, here is a very simple component definition along with the instantiation-defined component to the HTML document.
That’s all that’s required. React.createClass is used to define your component. It’s the render function that returns a simple JSX statement, which looks very similar to HTML. The component definition is stored inside a variable, App (using ES6’s new keyword const), and then ReactDOM.render is used to place the component <App /> (this is JSX, by the way) inside <div id="app"></div>.
JSX is a key element in React components, so let’s discuss it.
Here is an example of JSX:
Although knowing what exactly JSX will compile down to at any given time is not important when working with React.JS, it’s worthwhile to understand what’s going on under the covers.
Exposed DOM Lifecyle Methods
By reading React.JS’s Component Specs documentation, you will see that React exposes DOM-related events to bind callbacks to. These are related to component instance variables, and the life cycle of when your React.JS component will bind to the document.
To better illustrate these methods, consider the following code:
This would output <h1> Custom string value </h1>.
Props and State
Props are strings, floats, objects, or other React components you pass into a component that then will be namespaced onto the this.props object. It’s a way of manipulating the output of a component “from the outside.” If no properties are passed in, this.props will be undefined. However, if you pass in properties onto the component or return an object from getDefaultProps, you will have access to object properties. It’s best practice to define a default property whenever you create a component that expects them to be passed in. To illustrate this concept, consider this component.
Because title='this.props example' is attached as an attribute to <App />, this.props.title will equal 'this.props example' inside render, overriding the default value of undefined we set in getDefaultProps. Had I not attached that property, this.props.title would have remained undefined and null would have been returned inside the JSX template.
Had the attribute changed to title='Some other title' at some point, the React component would have re-rendered to reflect the new attribute value.
state operates akin to props; however, this is meant to manipulate the component from the inside rather than the outside. There is an extra method exposed to React.JS components to update state invoked through this.setState to update the state object, thus triggering a render and DOM update (if necessary).