React is coool!

Hey everyone!, my name is Ilyes and this is my first story on Meduim. In this story we are going to get started with the very basics of react and how it’s easy to use it.

This tutorial does not involve any other third party library than react it self.

React Philosophy

React is based on the idea that everything is a component, this idea has been so powerful when building user interfaces that it has been exported to other platforms like mobile developement with the React-Native project.

Piece by Piece

As we said earlier, react is based on the idea that a UI is a combination of multiple components, each component can be the combination of other small components and so on. An example of such an architecture is a login UI where the main component is the login page and it’s chilldren components are the input fields and the submit button.

Just build it

Enough talking, let’s get our hands dirty and build a login interface. As we said earlier, react is a libary not a framework, so we can use it like any other javascript dependency. At this stage we need two libraries, the React and ReactDOM that will let’s as render our components in an html file. Let’s start by creating a new index.html that will contain the imported libraries and a special html element that will be the start of our UI.

Easy hein? yeah at this point we just created an html file and added to javascript dep, Now it’s time to move on and start building our login UI, but first we need to introduice JSX.

JSX

JSX or JavaScript XML is a suggar syntax that let’s us write JavaScript code with XML tags. XML tags?, don’t be scarry it will be clear in 2 minutes.

Without JSX

With JSX

Coool hein?, yes I know I have got the same reaction when I saw it for the first time 😉. But in order to use JSX we need another library called Babel. The browser does not understand JSX directly yet, so we need Babel that will compile the JSX into pure JavaScript that the browser can compile. At this stage the index.html shoud be like this.

Now it’s the final moment the React part, start by adding a script tag will contain all of our React code. The script should have a type="text/babel" so that the browser understand that we are writing JSX code not pure Javascript code. Okey so before starting let’s respect the tradition and do the famous hello world!.

From now on, everything that we write will be between the script tag. Okey so lets start by understanding what this piece of code do. The ReactDOM has a method called render , this method takes as a first argument a JSX object and a second argument that is the root html node where to start rendering the JSX object. With this in mind lets replace the simple p tag with our custom login component.

Login App

We created a class called Login that extends Component that is in the React library. Every component that we make should have a method called render , this method is responsible for rendering the XML that is in the component. And then in the ReactDOM.render we changed the previous code with the <Login /> tag, I don’t know about you but me I’m super excited 😝.

Child Components

Now we need a form that will contain our inputs and submit button, so let’s create a child component called Form , it will be a stateless component, I know we have not disscussed stateless component in this tutotial, but it’s to push you to do your own research. The new Form component will contain the inputs and the submit button and will render it self in the Login component.

Events

Now we need to add more actions to our components, an example of that will be to get the value of the inputs as long as the user is typing and console log them. So we need to listen for onChange event and run some code when this event is triggerd.

This last section conclude our tutorial on the very basics of React, hope you find it useful! 😄