Yo gang, in this React tutorial we’ll be taking a first look at components and how we create them. A component in React represents a certain part of your application, and requires only 1 method – the render method. In this method we write our JSX / HTML which will be rendered to the DOM when the component is inserted into it.

+ Repo –
+ Atom editor –
+ Download GIT –

JS Playlist –

HTML Playlist –

NODEJS Playlist –

You can find more front-end development tutorials on CSS, HTML, JavaScript, jQuery, WordPress & more on the channel homepage…


========== PSD to WordPress Playlist ==========

============ Node.js for Beginners Playlist =============

============== The Net Ninja =====================

For more front-end development tutorials & to black-belt your coding skills, head over to – or

================== Social Links ==================

Twitter – @TheNetNinja –


  1. If you're getting an Error stating that React.creatClass is an undefined function it's because the newer versions of react don't support that. Tt's want you to use es2015 classes instead. Which haven't been covered yet.

    If you want to follow along you can do this.

    Install the NPM create-react-class package:
    npm install create-react-class –save-dev

    Then create a new variable under the ReactDom variable:
    var createReactClass = require('create-react-class');

    Now instead of using React.createClass() for the components use the var createReactClass()

    var TodoComponent = createReactClass({
    // Stuff

  2. I have a problem with React.createFunction({});  like "TypeError: undefined is not a function (near '…React.createClass…')". Maybe it's important, that I work on Mac and I have configured React Native. Please, help! 


  3. Guys, as Rony Vidaur says, you have to change the file configuration from JS to JSX for the HTML to show on index.js. Thing is, you won't find the JSX configuration if you do not have the react package installed FOR ATOM.
    Just open up a terminal and do this – apm install react

  4. for the html not showing at first onindex.js , what I noticed is that the file is configured to be JavaScript (right bottom menu) so the only thing that you really need to do is to change it to JavaScript(JSX) and it will work, awesome series so far! keep it up

  5. You could make video about your atom configuration i really like how it looks or at least list out the plugins,fonts or other stuff you use 🙂

  6. Really enjoying the series. Just one question. Why did you configure the es2015 presets if you're not going to use const, class and import? Might be to early to tell but I was just curious. Thanks 🙂


Please enter your comment!
Please enter your name here