I think the biggest challenge people make when learning React is they get lost in the tooling and ecosystem. Before you’ve even built your first React component you’re plunged into learning Webpack, ES6, React Router or Developer Tools.
This React.js tutorial is different.
A Simple Start
All code in this series is available on my personal Github. Let’s start with a basic HTML file.
<!-- This is the div our application will mount to -->
<!-- Load Facebook's React and React-DOM libraries -->
<!-- Our application code -->
// Render(SomeReactComponent, toSomeHTMLElement)
React.createElement('h1', null, 'Our First React.js Component!'),
How to run this tutorial?
This file can be copy pasted into an index.html file anywhere on your computer and opened directly with a web browser of your choosing! No need for any tools or even your terminal.
React.js Tutorial Breakdown
I left some comments in the above code, but let’s break it all down!
A Mounting Point
This sample file is a basic HTML document until we get to line 7. On that line we have an empty div with an id of root. The id can be anything you want, it just has to match the code on line 18 where we attach our component.
Next, on line 10 we start including our dependencies. For this minimal react tutorial, all we need is Facebook’s react and react-dom libraries. The main React library has been separated out so it can be used with non web (no DOM) applications such as iOS and Android.
Line 16 begins the meat of our application. All React applications have at least one ReactDOM.render() call. That method takes two parameters.
- A React component, representing your application.
- An HTML selector, your mount point.
For this simple beginning app, we make a component that is a single element (an h1) with the value of “Our First React.js Component!”. In later posts we’ll build more complex components. It’s also worth noting we could have just as easily written:
var myApplication = React.createElement('h1', null, 'Our First React.js Component!');
This is also where you may have seen JSX used to write markup. JSX will not be part of this tutorial series as we are just focusing on learning React.js.
Stay tuned for a lot more posts in this series and let me know in the comments what is / isn’t working!