React is not a new language. It is a technology paradigm that separate concerns into a web application. It is a framework created and maintained by Facebook. You can include this library in your web-pages and then use React programming to create web pages that can change contend dynamically, driven by certain events.
SPA = Singe Page Applications: This kind of applications are appreciated because you do not need to refresh your page using refresh button. The page is updated automatically, therefore the name "reactive page" or "reactive application".
React does a good job to improve your productivity when is about programming dynamic websites. So learning React will enable you to build a modern and responsive website. That is a website that is mobile friendly and can be used on desktop as well. Many software companies are looking for web developers with React skills.
React is using HTML5 features, CSS and JavaScript to create UI components. So react is an application of new technology. React is open source and free to use. It is available on GitHub and it has MIT License.
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:
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.
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 ... -->
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);
You can build apps using React in two ways:
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"));
})();
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
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.
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.
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
React Native is an open-source mobile application framework created by Facebook. It is used to develop applications for Android, iOS, Web and UWP (Universal Windows Platform) by enabling developers to use React along with native platform capabilities.
React Native does not use HTML or CSS. Instead, messages from the JavaScript thread are used to manipulate native views. React Native also allows developers to write native code in languages such as Java for Android and Objective-C or Swift for iOS which make it even more flexible.
You can learn more from: React Native Homepage
Read next: Step by Step Tutorial