pineapple.jpg

Blog

React-ing to Ember

hannah-gibbs-290019.jpg

Reacting to Ember

Components in Ember with a React understanding

This blog post is assuming you’ve already installed Ember. If you haven’t all you need is

$ npm install -g ember-cli

While you’re at it, you can check out some core concepts about Ember in the Ember Docs!

What are components?

In React, components are a single JavaScript file. Usually, the logic of the component lives at the top of the file and contains the functionality of what your view layer presents. The bottom portion of that file is the presentation of your logic. The presentation is preceded by a render() method. These can be further broken down into presentational components and “smart” components or containers. However, in Ember, components are not a single file. In fact, a component can consist of two or more files and they’re actually called templates, according to the documentation. The view layer is a complete file and the logic is another file. The view layer is written in a Handlebars (.hbs) file. This can alternatively called the template. The logic is written in a file usually called component.js. These both live in a folder that is hyphenated with the name of the component. Kinda looks like this:

Creating a Simple Ember Template

Let’s create an Ember component together! The only thing this component will do will render an <li>. Let’s make a mini-app called Fruit Render. We’ll want to name the component inside of our app as well. Now, from above, you’ll remember that a component consists of two files and the folder that contains those two files. Best practice assumes that you name your logic file component.js and your view file template.hbs. Right now your file structure should look something like this:

fruit-render
 |
 -pineapple-component
 |> component.js
 |> template.hbs
 |> component.js

First off, we’ll start with the component.js file.

import Ember from ‘ember’
const { Component } = Ember

export default Component.extend({
 text: null
})

What we’re doing here in the component file is saying hello to Ember! That’s the first two lines of code. The export declaration is extending the functionality of the Ember Component so we can use its contents later. Now, we’ll start adding a view layer. Open up your template file and type in:

<p>{{ text }}</p>

 

This will render the text we’ve declared in the component.js file live and in color! Well, in black-and-white but, you know what I mean. Last but not least, we want to see the text, already! In the parent folder’s component.js file ( I called mine pineapple-component ) :

<li>
 {{ pineapple-component text=’pineapples’ }}
</li>

And that’s it! You’ve built a component! Here’s a sketch of what you made:

IMG_1319.jpg

And now you know the difference between a React component and an Ember component :).