index<--

Introduction to React

• React: Home page
• React: GitHub project

How to learn

React can be learned on-line for free from its homepage. There is available documentation and one tutorial. Before you learn React you need to know HTML+CSS and JavaScript. There is no point of starting if you do not know these things:

• Learn (Mozilla): HTML5
• Learn (Mozilla): JavaScript

Using React

React can be added to a HTML page like any other JavaScript library using <script> tag. Then you can use its features gradually to enhance your page with dynamic components. To create these dynamic components you must create your own JavaScript files and add them to your web page after you load React libraries.

 <!-- ... other HTML ... -->
 <!-- Load React. -->
 <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
 <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
 <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
 <!-- Load our React component. -->
 <script src="my_component.js"></script>
</body>

Note: You must load React components at the bottom of your HTML page to improve page load time. You could have load them in the header but that will slow down your web-page so don't do it.

How it works?

To display react components you must include them in your page using an empty <div> tag. This tag must have an "id" attribute. This is how React will be able to find the location where it will display the component. In the next example we include a placeholder for a React component:

<!-- ... HTML content ... -->
<div id="component_name"></div>
<!-- ... rest of HTML ... -->

How a component look like

A component is created using JavaScript. You can use a component template to start. Here is an example that we have copy from React documentation. I have not tested this component so I do not know if is going to work:

File: my_component.js

'use strict';
const e = React.createElement;
class LikeButton extends React.Component {
    constructor(props) {
         super(props);
         this.state = { liked: false };
    }
    render() {
         if (this.state.liked) {
         return 'You liked this.';
    }
    return e(
         'button',
         { onClick: () => this.setState({ liked: true }) },
         'Like'
    );
    }
}
const domContainer = document.querySelector('#component_name');
ReactDOM.render(e(LikeButton), domContainer);

What is JSX

You can build apps using React in two ways:

• using standard React objects and methods
• using a new technology called JSX

Now JSX is something new and intriguing. It stands for JavaScript XML. It is a new language that consist of JavScript mingled with XML or XHTML. JSX makes it easier to write and add HTML in React. JSX is an extension of the JavaScript language based on ES6, and is translated into regular JavaScript at runtime.

So does your browser understand JSX? No it does not. But to use JSX you need a pre-processor that will translate JSX files into row JavaScript. In other words, if JavaScript files contains JSX, that file will have to be transpiled into regular JavaScript.

React include a transpiler called Babel. It converts JSX files into vanilla JavaScript. React also uses ES6 that is not supported by all browsers. Babel converts ES6 to code that is compatible with older browsers that do not support ES6.

Standard approach:

(function() {
    var element = React.DOM.div({}, "Hello World");
    ReactDOM.render(element, document.getElementById("app"));
})();

Using JSX:

(function() {
    var HelloWorld = React.createClass({
        render : function() {
        return (
            <div> Hello World </div>
        );
        }
    });
    var element = React.createElement(HelloWorld, {});
    ReactDOM.render(element, document.getElementById("app"));
})();

Using Babel

You can use Babel in two ways. At client side or at server side. During development or for making examples you can include Babel client in your web page but you can also use Babel on server side. You can use Babel to pre-compile you application using command line interface  CLI or even better, use a build tool like Webpack to run Babel each time your code changes.

Learn more about: Babel

Can I use react with Bootstrap?

Sorry, React and Bootstrap are not designed to be used together. Bootstrap is using JQuery to manipulate DOM elements directly while React has its own libraries to manipulate DOM. However there is one Bootstrap implementation that is specific for React. This library is called reactstrap and is open source.

Example:

import React from 'react';
import { Button } from 'reactstrap';
export default (props) => {
    return (
        <Button color="danger">Danger!</Button>
    );
};

Note: The example above is using JSX. It will create a button that does absolutely nothing. What is interesting is that this button do not exist until JavaScript is making it. In a static web-page we must create de button using HTML.

• Create React App: Home Page
• Create React App: GitHub Project

This project uses: WebPack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them. You can use this to create your startup project in minutes and develop on top of it your application. After you run and install it you will get a structure of folder with files that look like this:

my-app
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
└── src
 ├── App.css
 ├── App.js
 ├── App.test.js
 ├── index.css
 ├── index.js
 ├── logo.svg
 ├── serviceWorker.js
 └── setupTests.js

Note: This is not the only technology you can use to start a React application. You can use other technology more advanced

Related References

• Neutrino
• NWB
• Rails Web-packer
• Symphony
• Gatsby
• Next.js

React Native

You can learn more from: React Native Homepage

Vulcan framework

• homepage: vulcanjs.org
• documentation: docs.vulcanjs.org

Read next: Step by Step Tutorial