Web Programming TutorialsLearn What Is React Framework And The Problems It Solves

Learn What Is React Framework And The Problems It Solves

react-framework
Facebook pioneered the development of React as a JavaScript library to support development of the user interfaces. It was originally developed as a closed source, but it was opened. Later, other organizations like Instagram, individual developers and corporations joined the community maintaining React. Other terms used to refer to react are React.js or ReactJS.

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.

JSFiddle is a web based code editor that enables you to test your CoffeeScript, Typescript, JavaScript, CSS or HTML code. From the JSFiddle editor you are also able to select the framework and extension that you would like to use. A React JSFiddle is available at this link https://jsfiddle.net/reactjs/5vjqabv3/. At the link, you will find a simple Hello World program as shown in the screenshot below.
js-fiddle
Another way you can start learning React is by downloading a starter pack that contains React and React DOM and also examples to start you off. Navigate to this link https://facebook.github.io/react/docs/getting-started.html and download the starter pack. Extract the zipped file. We will add an HTML document named helloworld.html in the root directory of the extracted file. Open your HTML editor or a notepad, add the code below and save it in the root directory. The code contains HTML and JavaScript syntax. Within the JavaScript code the XML present is referred to as JSX. There is an article that discusses JSX in detail so refer to it once you are done with the basics.

<!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.
hello-world-starter-pack
Another way you can start writing React code is by installing npm package manager. The easiest way to set up npm is by installing Node.js. Node.js provides a JavaScript run time environment for server-side and applications that are networked. Download Node.js installer from this link https://nodejs.org/en/.
download-nodejs
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

install-nodejs-apt
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

install-npm
Check that the npm has been correctly installed by running npm -v. This will print out the version of npm installed.

npm -v

npm-version
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

npm-directory
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.

mkdir ~/.npm-global

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
export PATH=~/.npm-global/bin:$PATH

edit-bash
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

install-webpack
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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -