Like with any other language let’s start with a Hello World app and see what a react application looks like:
I know that looks like alot of code but most of it is just the structure of our HTML. We are using React scripts for now as it makes it easier to use.
The part that we will concentrate on is :
var app =</pre>
<h1>Hello World</h1>
<pre>
var mountComponent = document.querySelector('#app');
ReactDOM.render(app, mountComponent);
The first new thing is the “text/babel” Babel is a library for transpiling, which is a specific term for taking source code written in one language and transforming into another language that has a similar level of abstraction, from ES6 to ES5. We use Babel because not all browsers use ES6 so we need to make sure our code works on all browsers. Thank goodness someone fixed this for us already.
var app = <h1> Hello World </h1>: We have a single element. We will talk more about elements as we use them but for now it’s enough to know that an element describes what you want to see on the screen. For us it’s the text “Hello World”.
var mountComponent = document.querySelector(‘#app’); This line should not be new to you if you are familiar and comfortable with Javascript. This line basically takes the div with an id of “app” and puts it in a variable called mountComponent for later use.
ReactDOM.render(app, mountComponent); This is where the magic of React happens, so let’s spend some time dissecting this. ReactDOM.render() is what creates the react application on the page. Without this code nothing will be placed on the DOM.
Two arguments are being passed in to the function. ReactDOM.render(<WHAT><WHERE>)
- What to show on the DOM
- Where we want the element to be displayed.
This is the basics of a React application. Of course we could’ve done this with simple HTML but it’s important to know the basics before jumping in to the more complicated aspects of React.
Tomorrow we will talk about Components and why they are revolutionary and make React such a big deal.
Claudia Maciel 