User Interface (UI)
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.
Before we continue on React tutorial you need to have a basic understanding and knowledge of the following:
The HyperText Markup Language is the basic and standard markup language interface with having elements being the building blocks for HTML web pages
The Cascading style sheets or simply we can say CSS, lets us know how the HTML elements are going to get displayed.
NPM, a package manager and installer is the world’s largest free registry library. Similarly, it can be used to share software.
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.
- 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:
- 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.
Let’s create a component to print the “Hello World” string.
- Firstly, you need to open your terminal and run the following command
- Once it’s done downloading, you will end up with a new folder. Name it Hello world
- Now open the Hello world directory
- 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.
- 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:
- 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 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:
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:
Features of ReactJS
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.
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
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
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
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 JS – React Tutorial for Beginners
ReactJS Tutorial for Absolute Beginners
ReactJS Tutorials – GeeksforGeeks
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