The main problem solved by react is the development of large applications that have temporal data changes. The data in such applications is not static so it changes over time. We can look at React as the V layer in model-view-controller (MVC) pattern of software development. In the MVC pattern, you divide your application into three parts. The model implements the storage and retrieval of data in a database. The view is the part that displays the user interface while the controller receives user input and passes it to the model. React only enables the view part, so for model and controller parts you need to use other tools.
React has several advantages that make it an excellent choice for developing user interfaces.
- It is simple. You just need to express the appearance of your app and React takes care of your user interface updates when there are changes in the data
- It is declarative. When changes in data happen React is aware of how to update the changes
- React is component based. This makes development of reusable code that is easy to test.
There are several ways to start learning React. You can use the provided React JSFiddle, download a starter pack or use package managers like npm or bower. We will discuss each of these options.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="build/react.js"></script> <script src="build/react-dom.js"></script> <script src="https://npmcdn.com/[email protected]/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> ReactDOM.render( <h1>Hello, world! This is my first code I learned at Eduonix</h1>, document.getElementById('example') ); </script> </body> </html>
Open the helloworld.html web page and you will see the output as shown below.
Another way to install Node.js is by using the apt package manager. Open a terminal and use the commands below to update package index and install Node.js. This manner of installing Node.js is only suitable for a learning environment. Setting up Node.js in a production environment is more detailed and we will dedicate an entire article to explain how it is done. The commands are used on an Ubuntu distribution.
sudo apt-get update sudo apt-get install nodejs
After installing Node.js we need to install the npm package manager. The package manager will help us install modules and packages that will be used by Node.js. To install npm, run the command below at a terminal
sudo apt-get install npm
Check that the npm has been correctly installed by running npm -v. This will print out the version of npm installed.
Before we can use the npm package manager to install packages and modules, we need to grant correct permissions to the npm directory. This can be done by changing the ownership of the npm directory to current user or changing the directory used by npm.
First identify the npm directory using this command npm config get prefix. If the npm directory is /usr/local change its ownership to the current user using the command below
sudo chown -R sammy /usr/local
When the npm directory is /usr changing directory ownership is not advisable especially when you are using a shared system. In this case using another npm directory is better. Create a directory dedicated to global installations.
set the directory created above as the npm directory
npm config set prefix '~/.npm-global'
Add the npm path to bashrc by adding the lines highlighted in yellow
sudo gedit ~/.bashrc
Although React can be used alone, higher productivity is achieved when it is used together with Babel, Webpack tools and their frameworks. Babel and Webpack enable the developer to have access to features provided by ES6, JSX and bundling. In the next section we will discuss how to set up these tools.
Webpack avails module bundling to a developer. Webpack relies on configurations to generate static assets from module dependencies. To install webpack run the command below. This installs webpack and makes the webpack command available at the terminal
sudo npm install webpack -g
Our main objective is to use React. Use the commands below to install react and react-dom.
npm install react --save npm install react-dom --save
Installing Babel plugins with npm is also easy. The commands below will install the required plugins.
npm install babel-core npm install babel-loader npm install babel-preset-react npm install babel-preset-es2015
In this tutorial, we introduced React as a framework for building user interfaces in web applications. We discussed how React fits in web development and explored features that make it a good choice for UI development. We discussed the various ways one can begin to write React code. We discussed how to set up a development environment using JSFiddle, starter pack and Nodejs. We discussed the various tools that can be used with React and how to install them. We will build on this tutorial in subsequent tutorials to demonstrate how to develop UIs using React.