SHARE

Hey, in this React tutorial for beginners, I’ll introduce you to input Refs and how we can use them to reach into the DOM and retrieve information about elements, such as an input value that a user types into a form field.

—– COURSE LINKS:
+ Repo – https://github.com/iamshaunjp/react-playlist
+ Atom editor – https://atom.io/a
+ Download GIT – https://git-scm.com/
+ CMDER – http://cmder.net/

JS Playlist – https://www.youtube.com/playlist?list=PL4cUxeGkcC9i9Ae2D9Ee1RvylH38dKuET

HTML Playlist – https://www.youtube.com/playlist?list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc

NODEJS Playlist – https://www.youtube.com/playlist?list=PL4cUxeGkcC9gcy9lrvMJ75z9maRw4byYp

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

SUBSCRIBE TO CHANNEL – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg?sub_confirmation=1

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

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gnow7e45LQFkNVxwQ5BH-W

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

https://www.youtube.com/playlist?list=PL4cUxeGkcC9gcy9lrvMJ75z9maRw4byYp

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

For more front-end development tutorials & to black-belt your coding skills, head over to – https://www.youtube.com/channel/UCW5YeuERMmlnqo4oq8vwUpg or http://thenetninja.co.uk

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

Twitter – @TheNetNinja – https://twitter.com/thenetninjauk

26 COMMENTS

  1. Seriously, the way you go from talking about what something like the onSubmit will do then proceed to follow through the app to explain where things will occur makes it sooo much easier to visualize how this all works. You're a fantastic teacher.

  2. since facebook said ref string is legacy so I rewrite new AddItem Component here to use callback instead
    https://facebook.github.io/react/docs/refs-and-the-dom.html

    var AddItem = React.createClass({
     render: function() {
      return(
       <form id="add-todo" onSubmit={this.handleSubmit}>
        <input type="text" required ref={(input) => this.textInput = input} />
        <input type="submit" value="Hit me" />
       </form>
      )
     },
      //Custom function
     handleSubmit: function(e) {
      e.preventDefault()
      this.props.onAdd(this.textInput.value)
     }
    })

  3. index.js line 44: updatedTodos should be a copy of the array, not point to the original array. So it would read…
    var updatedTodos = this.state.todos.slice();

  4. which package do u use in Atom so it shows you the values of stuff when you hover above them?

    maybe can you also share some of the packages you installed for a better Atom framework?

  5. You are a Total web university!
    thank you so much !¡

    is this react tutorial is over? or will there be some more leasons in the future?¿

  6. You are doing a world of good for new developers like me… came across your channel two days ago… and man i can tell its best i've seen so far… Thanks man!!

  7. Awesome vid dude! Me and my dad have been watching you to learn how to Code/Program since you are the best step-by-step tutorial creator on YouTube! Just a Random Question: Have you ever considered making a mogoDB tutorial?
    Thanks,
    FightOnGaming.

  8. Hey Ninja,
    I followed you from the beginning of my web development learning and found you the best available on youtube….:)
    I saw your videos and know most of the things like HTML5, CSS3, Bootstrap, Javascript, Modular JS, ES6, Webpack etc…

    "React" is the future and its better than angular 2. So my question is if i start with React only without learning the Angular 2 and j query, will that be fine…? I know little bit about jquery and have used it but no experience on angular js.

  9. wonderful!.. can't wait for the 'very next lesson' 🙂
    I have a suggestion+request for tutorial series – Building a fullstack app with
    1. Bootstrap or any css framework,
    2. React+Redux/flux,
    3. Nodejs+Express
    4. gulp and/or webpack
    5. etc.

    The purpose should be to understand the fullstack app building process and where and how these technologies fit and integrates. Thank you!!

LEAVE A REPLY

Please enter your comment!
Please enter your name here