React is Not an MVC

According to React’s Docs. React is not an MVC. It’s a View library. That is the intention of the creators of React. In fact, Facebook set out to rethink the MVC structure with this project. They landed on an architecture they call Flux for client side architecture. React is simply a piece of the Flux puzzle, and can be used as a powerful View library in it’s own right (you don’t need to use Flux architecture in order to use React components for the UI). Learn more about Flux here.

Today I simply want to talk about React Components. I started this way so that you will not immediately think about MVC type of system, when thinking about React Components. Just think pieces of the View. It might be helpful to think of React Components like super powered DOM nodes.

So I’m going to share some code in ES6 (aka ES2015), to show you a rough idea of what these components should look like. If you want to give React, or any other framework a test drive, I recommend http://todomvc.com/. Fork the GitHub repo and give it a test drive!

React apps are made of nested UI components. I’m going to show a very simple example of a component with a nested UI component.

When creating basic components there are two steps you need to consider:

• Creating the component with the proper HTML-like code (this HTML-like code is from JSX, a JavaScript syntax extension) that will want to render.var App = () => (
   <div>
     <h2>My Slow Carb Grocery List</h2>
     <TodoList />
   </div>
  );
• Rendering that component.ReactDOM.render(<App />, document.getElementById("app"));

Fairly simple so far. A little unusual if your not used to ES6 or JSX, but you will find that it grows on you. JSX is nice because it is so easy to visualize what happens to the view since it looks so much like HTML.

Main thing I want to point out here is the <TodoList /> HTML element-like line of code. This is our nested component inside of our App component. This assumes we have made another component, just like we made the App component, and called it TodoList. It would look something like this:var TodoList = () => (
 <ul>
   <li>Chicken</li>
   <li>Lentils</li>
   <li>Green Beans</li>
 </ul>
);

The great part about this is that you are actually rendering the TodoList component inside of the App component, by simply including the <TodoList /> like we did. In other words, you don’t need another ReactDom.render(…) call for TodoList because we included it in App which is rendered. React is very linear like this. It was very intentional from the creators of React. They wanted to solve the problem of following MVC flow and getting lost in your own diagrams. Watch this excellent video describing how React and Flux were born.

In my next post, I will discuss passing data in more detail. This is done in react with ‘props’ and ‘states.’ In the meantime, feel free to learn more about props vs state here. Enjoy!