React is an open source library for building user interfaces from Facebook. Most noteworthy, React makes it painless to create interactive UI web designs. All you have to do is design simple views for each state in your application. As a result, React will efficiently update and render just the right components when your data changes. Since this tutorial is targeted towards beginners it covers the basics of React, JSX syntax, and UI web design.
Getting Started
First of all, the easiest way to get started with React is to include all necessary libraries from a CDN. We will do this a little bit later in one of our examples. Alternatively, we can use React JSFiddle https://jsfiddle.net/reactjs/69z2wepo/ or download the React starter kit in https://facebook.github.io/react/docs/getting-started.html, Now, let’s kick things off in this UI web design by creating a directory for our project. This directory will contain a file named index.html$ mkdir react $ cd react $ touch index.htmlNext, open index.html with your favourite editor and add the following:
Save and open index.html in your browser, you will see the message, “Hello Milky Way!” displayed. Now, let’s have a more closer look at the details.
- React follows component oriented development. The general idea is to break your whole UI web design into a set of components. You can create a component by calling React.createClass(). Every component has a render() method which will be displayed in the view. In our project we have one component, “HelloMilkyWay,” displayed as ‘Hello Milky Way! ’ in the view.
- Remember, a component doesn’t do anything until it’s rendered. To render a component we use ReactDOM.render(,). In our project, we will use ReactDOM.render(,document.getElementById(‘hello-with-react’)); to render our “HelloMilkyWay” component into the div with id of “hello-with-react.”
- Since the browser doesn’t understand JSX instinctively, we need to transform it to JavaScript first. This is handled by including Babel 5’s in-browser ES6 and JSX transformer called browser.js. Babel will recognize JSX code in tags and transform it into JavaScript on the fly. Transforming JSX in the browser works quite well during the development process.
Properties
It’s important to use props (this.props) to access parameters passed from the parent. In addition, use states (this.state) to manage dynamic data. In React, data flow occurs in only one direction. For example, data flows from parent to child via properties. These properties are passed to child components via attribute in JSX. Inside these components, we can access past properties via the “props” properties of each component. When the properties change, React will re-render our components to update UI with new data. Let’s modify a previous snippet in index.html to show a random message every one second. The above code chooses a random string from an array and re-renders our component every one second. The chosen message is passed as a property called, ‘message’. You also need to use a pair of curly brackets {} to pass the variable. Now, inside the HelloMilkyWay component, we can access the passed value via this.props.message. Please note that you can’t write this.props inside the component. This keeps data flow uni-directionally.State & Events
In React, each component is encapsulated and maintained by its own state. Since a component can store a value in its state, it can pass it to its child components via props. This ensures that whenever a component’s state changes, the props also changes. As a result, the child components that depend on these props re-render themselves automatically. Now, le’ts modify a previous snippet in index.html to show a message and a button for a changed message when clicked on. Our component Hello maintains a message property in its state. Especially relevant, every React component has a getInitialState function which sets the initial state of the component. In our case, we can initialise the message property to the value “Hello World!” Especially relevant, Hello component renders a second component called “Message” and a button. And “Message” property of the component’s state is passed to the child component as an attribute in the JSX syntax. In addition, our component also handles the button’s click event by attaching an event listener, this.onClick. It's important to pay attention to camel casing here. In HTML, the event names are written in lowercase i.e. onclick. But, in JSX you need to use camelcase for event names. That’s it! Each time you click on the button you will see a different message.
Separate JSX
In order to keep your UI web design structured, it's important to keep each component on its own .jsx file. Let’s create a file named helloMessage.jsx and include this file to index.html. The new markups of index.html will be as follows:It's important to understand that constructing the UI web design interface this way means that you’ll now need a server to view your page. Now, we will create a node server for this page. In the directory, create a package.json file with the following:
{
"name": "React",
"version": "0.0.1",
"dependencies": {
"express": "~4.13.1"
}
}
Create server.js file with the following:
var app = require('express')();
var http = require('http').Server(app);
app.get('/', function(req, res) {
res.sendfile('index.html');
});
app.get('/helloMessage.jsx', function(req, res) {
res.sendfile('helloMessage.jsx');
});
http.listen(8080, function() {
console.log('Server running at http://localhost:8080');
});
In conclusion, run the server in the directory like so and you will have successfully completed the installation process!
$ npm install $ node server.jsThis tutorial just touches the tip of the iceberg of the world wide tech industry. New coding systems and technologies are always being developed, so it's important to make sure you're staying on top of your tech game! Practice, practice, practice! Looking to expand your tech skills? We've got you covered. Visit our post about the most in-demand tech skills out there so you can get a head start. Are you ready to start applying to become a top tech talent? Make sure you check out some of our tips on finding the best tech gigs out there before you begin.
