Intro

React is a JavaScript library built for the user interface. Created by Jordan Walke, an engineer at Facebook, released React.JS, after its early prototype FaxJS. So, we can say React is a user interface, JavaScript library is designed such that to help build UI components.

JavaScript Libraries you need to know

React JS library logo

User Interface (UI)

ReactJS User Interface library

Machines created by humans require some input and in return, they provide you with output. Therefore, this process of giving input and having output can be called interactions. For every interaction, a place or a space is needed. Similarly, for the interactions between humans and machines, the interface is known as the user interface (UI) where the purpose of the interactions is to have control and perform operations from the machine from the user side.

React.JS

Tutorial

Before we continue on React tutorial you need to have a basic understanding and knowledge of the following:

  • HTML
  • CSS
  • DOM
  • NODE.JS
  • NPM

HTML

The HyperText Markup Language is the basic and standard markup language interface with having elements being the building blocks for HTML web pages

CSS

The Cascading style sheets or simply we can say CSS, lets us know how the HTML elements are going to get displayed.

DOM

An object model and an API (programming interface) for HTML and JavaScript, respectively. Whenever we load a website the document object model of that page is created by the browser.

Node.JS

It is an open-source server environment that allows the user to run on the server the JavaScript.

NPM

NPM, a package manager and installer is the world’s largest free registry library. Similarly, it can be used to share software.

Installing React

To install react you need to have some prerequisites added below

  • Have Windows 10 or Windows 11
  • Install for your device a windows subsystem for Linux (WSL) and Linux distribution (Ubuntu) and make it run on WSL 2 mode.
  • Now in WSL 2, Install NodeJS. You will be needing a newer version of NodeJS and a recent version of Node Package Manager (npm) to run and create react app because these instructions use Node version manager (nvm) for installation.

Creating React app

To install the complete react toolchain on WSL, it is recommended to use create-react-app. Therefore, to do so follow the following instructions:

    • Open CMD or PowerShell
  • Create a new folder for your project as mkdir ReactProjects and enter that directory: cd ReactProjects 
  • Install React using the Create-react app. Hence, it will install and run the complete ReactJS application.

ReactJS npx create react app

  • Once completed, change directories into the new app (“My-app” or what you choose to call it): cd New-app
  • Now start your new React app as:

ReactJS NPM start

  • This will start the NodeJS server and will launch a new browser window displaying your app. Similarly, use the command Ctrl+C to stop running React app in your command line.
  • Now npm run build will create a build of “MY-app” in the build folder.

Babel

Babel, A JavaScript compiler, can translate markup or your programing languages into JS. With having Babel, the newest features of JS can be accessed. Cosequently, React uses Babel to convert JSX into JS.

JSX

JavaScript XML or JavaScript Extensible Markup Language is an extension to JavaScript.

ReactJS constant element 

Can be seen clearly that JSX is not a JavaScript nor HTML rather it is an XML syntax extension to JavaScript.

Hello World

Let’s create a component to print the “Hello World” string.

  • Firstly, you need to open your terminal and run the following command

ReactJS npx create react app

  • Once it’s done downloading, you will end up with a new folder. Name it Hello world
  • Now open the Hello world directory 

ReactJS cd hello

  • Run React app now.
  • Start by typing npm start into a terminal.
  • You can always stop react app by holding Ctrl and pressing the C key.
  • If everything goes well a new browser window will open up. If not, you can open a new browser window and navigate to http://localhost:3000.
  • You can change the port by using the following command.

ReactJS port are 3000 or 3001

 

  • You can even access the running react app from another PC or laptop that’s on the same network by using the network IP address.
  • Create a new file under /src directory and name it HelloWorld.js.
  • Type the following code in it:

ReactJS const hello-world export default syntax code

  • This is the simplest React component containing a button when clicked, shows an alert “Hello World”.
  • Open up App.JS and erase everything except for div with App class and import Hello World react component we created earlier.
  • Now declare the hello-world component inside the return statement to use it.
  • Save App.js.

ReactJS and React Native

ReactJS vs React Native 

  • ReactJS is an open-source JS library used to build the UI for Web pages and web applications. It only views the layer of an application.
  • React Native is also an open-source JS framework used for developing applications for either IOS or Android and Windows too. React Native is the same as React but instead of using web components, it uses native components. Therefore, tts main focus is on mobile applications.
  • ReactJS was released in 2013.
  • React Native was released in 2015.
  • ReactJS is responsible for web development.
  • React Native is for developing mobile applications.
  • React JS is for all Platforms.
  • React Native is independent of platforms.
  • ReactJS uses JS and CSS for animations.
  • React Native has a built-in library for all animations.
  • ReactJS uses HTML tags.
  • React Native doesn’t use HTML tags.
  • ReactJS provides good and high security.
  • React Native fails to provide high security.

In React Native, Hello World looks like this:

React Native Hello-World Program

Advantages of React Native

  • Both android and IOS platforms can be utilized for React Native to run. Learn once write everywhere.
  • In React Native, code is compiled into native code enabling it to function in both operating systems and both platforms.
  • Large ReactJS and React Native audience and community can help you build a great team or will answer any question.
  • Improvements are being made for it to work best.

Disadvantages of React Native

  • New and immature as it is still in its improvement stages which can be counted as a negative point.
  • Hard to learn. React Native can be really tricky for a newbie.
  • Low security. It is advised not to create highly confidential apps using React Native.
  • Takes a lot of time to run.

Starting with React Native

  • Firstly, open your Android Emulator.
  • Create a directory anywhere you want.
  • Open CMD and go to your created directory. 
  • Write a command react-native init Firstapp to initialize your app.
  • Go to your directory location and do react-native run-android. This will launch your app in the emulator.
  • Now to create a hello world program simply edit App.js shown below:

React Native Props App.js 

Features of ReactJS

Virtual DOM

The main feature of ReactJS is that whenever the app is updated or if you modify it, virtual DOM will render the entire UI again by also updating the components modified by the user, saving you, your time.

JSX

How the interface will appear in front of you? It is described by JSX, as a mark-up syntax. Similarly, it helps developers create components for React and also makes the syntax look just like HTML

Better UI

React codes are readable and much easier to fix errors and buds if any. Similarly, ReactJS is the perfect and by far the best platform to create and develop user interfaces for both Web as well as for IOS and Android

 Architecture

ReactJS architecture is component-based, simply meaning that the UI in ReactJS is made up of several components, with having each component, set with its own particular logic ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎  ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎

Conclusion

ReactJS being a front-end JS-based platform plays a vital role for developers as well as businessmen as far as benefits are concerned. Moreover, ReactJS can be utilized to develop webpages as well as mobile apps with being the most user-friendly and engaging tool. Therefore, being the second most popular platform here’s a list of websites developed country-wise.

Related Tutorials on ReactJS (Links)

React Documentation and Tutorial (official)

ReactJS Tutorial – Tutorialspoint

React Tutorial – W3Schools

React JS – React Tutorial for Beginners

ReactJS Tutorial – javatpoint

ReactJS Tutorial for Absolute Beginners

ReactJS Tutorials – GeeksforGeeks

About Learningcomputer.com

Learningcomputer.com is a free training website. We provide Information Technology training and distance learning. We have FREE computer training on products like Microsoft Windows, Microsoft Office, Microsoft Word, Microsoft Excel, Mozilla Firefox, Microsoft PowerPoint, Microsoft Access, Visual Basic, Internet Explorer, Java, SQL Server, eBay, and many more topics on IT training and computer learning.

About the Author

This article was written and Optimized by Omar. He’s an SEO Content Specialist and a Web Developer. Visit my LinkedIn profile for more details. Omar A. Malik