• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
seegatesite header

Seegatesite.com

Seegatesite.com - Programming Tutorial , Sharing , How and Learn Together

  • TOOLS
    • Bootstrap Navbar Online Generator
    • Customize Sidebar Menu Bootstrap 3
    • Bootstrap Demo
  • ADVERTISE
  • CATEGORIES
    • Android
    • Blogging Tips
    • Database
    • CSS
    • Info Gadget
    • Javascript
    • Linux
    • PHP
    • Various
    • WordPress
  • Q&A
  • PHP
  • JAVASCRIPT
  • JQUERY
  • ANGULAR
  • WORDPRESS
  • SEO
  • REACT
🏠 » Javascript » Introduction And Everything That Must Be Known About ReactJS

Introduction And Everything That Must Be Known About ReactJS

By Sigit Prasetya Nugroho ∙ May 5, 2020 ∙ Javascript ∙ Leave a Comment

Share : TwitterFacebookTelegramWhatsapp

Get acquainted with ReactJS for beginners. If you want to know and learn React, of course, you have to understand what ReactJS is? Why do you have to learn React? Is ReactJS Frontend or Backend? And preparation for creating simple applications using React. Let us learn together, so what I have learned and understood enough, I write here. It may be useful.

Reactjs Tutorial And Introduction

Table of Contents

  • 1 What is ReactJS?
  • 2 Why do you need to learn ReactJS?
  • 3 How does React work?
  • 4 Preparations for Learning ReactJS
  • 5 Creating ReactJS Applications
    • 5.1 Install the Create React App
    • 5.2 Creating new ReactJS project
  • 6 Conclusion

What is ReactJS?

ReactJS became the most popular framework and was widely used in 2020. At the time this article was written (2020), ReactJS was ranked highest among other Javascript Frameworks.

Top Framework Ranking 2020

ReactJS is a library created by Facebook to make the UI (user interface) on the Web (and also mobile). So we can say that ReactJS is used to develop web application interfaces.

Many people call it a Framework but technically, React is not a framework, but rather a Library for making UI.

Related Articles :

  • React-Table Not Updating or Refreshing Data, The Solution ?
  • How To Custom React Datepicker In Bootstrap
  • Tutorial Create Simple POS Using ReactJS And Laravel Lumen Part 1

ReactJS is the composable user interface library, which means we can create various UI that divide into several components.

ReactJS was initially created by Jordan Walke, who is a Facebook employee. He released the first prototype of ReactJS under the name “FaxJS” and was inspired by XHP.

Facebook realizes, their applications are increasingly complex. Just imagine, many parts must be continuously updated, such as news feeds, chat lists, chat boxes, etc. in realtime.

Because manipulating the DOM requires an abundant resource and ReactJS also present to provide solutions with VirtualDOM, which is claimed to be faster.

React began to be used on Facebook to create a News Feed page in 2011 and then on Instagram in 2012. And in 2013, React was going to the public.

Why do you need to learn ReactJS?

You need to know the benefits of using ReactJS before learning more.

1. Fast and Efficient

React has a component-based concept, so React only needs to render resources related to data changes, no need to render all resources.

ReactJS creates a Virtual DOM to speed up changes to the DOM. All operations are carried out in the Virtual DOM; after the process is complete, ReactJS writes the changes in the DOM.

2. JSX

JSX is a Javascript extension that React uses to write HTML in Javascript.

3. Reusable

This is one of the advantages of React. We have made components that we can use many times when needed. This can shorten the time and drain existing resources.

4. Scalable

ReactJS can handle very well a large scale program that can display very complex data changes.

5. Flexible

By learning just one library, we can create Web, Mobile, and Desktop applications

6. Following the latest programming trends.

This is my main reason for learning ReactJS. I have been using JQuery for more than 10 years, and in the future, JQuery will be left behind with Modern Javascript frameworks.

If you need to compete with younger developers (When this article was written, I am 34), we must be brave enough to learn something new 🙂

How does React work?

React works based on components. for example like the following picture

[react component image]

The advantage is we can focus more on each Component in an involved web page. And each Component can be given logic so that the Components can work in realtime without waiting for reloading / refreshing web pages.

Preparations for Learning ReactJS

As usual, there are several things that we must prepare to create the ReactJs application.

1. Browser

I recommend the Chrome browser.

2. Text editor

I recommend Visual Studio Code.

3. The latest version of Nodejs and NPM (I use NodeJS version

12.16.2 and NPM version 6.14.4)

Note: if you want to learn React, then you must understand Javascript, please determine the Javascript tutorial for beginners here.

Creating ReactJS Applications

Install the Create React App

After all the initial preparation is complete, the next step is to install create-react-app using the following npm command:

1
npm i -g create-react-app

Next, you can check whether it is installed on the node using the following command:

1
create-react-app -v

Creating new ReactJS project

1
create-react-app react-hello-world

The above command will create a ReactJS project called react-hello-world.

Run the ReactJS Project

After completing the project, the next step is to run the project to see the results. Run the following command :

1
2
cd react-hello-world
npm start

A browser tab will open containing the project that has been run with the address https://localhost:3000

Until this step, we successfully created a new ReactJS project

Before learning more about React, we will try to make simple components to quickly understand how reacts work. See the following playground.

Explanation:

– In the example above, I created a container component in which there are an element name and description.

– Then I create an App component that is used to render as many container components as we want.

– To fill container components dynamically, we can use the props function (we will discuss in another article)

Conclusion

To successfully master React, you must understand very well about:

1. ES6
JavaScript foundation before learning React is essential, especially ES6. Get free Javascript tutorial here

2. Learn Fundamental React.

Understand the workings of components, communication between components, lifecycle & data fetching and writing components in JSX

3. Learn the Route

The route is used to navigate pages in the application.

4. Learning Data Management

As applications become more complex, there are more components. Maybe this is the right time to use data management. At the moment, the best data management is Redux.

5. Mastering modern development tools

Learn development tools that are more modern and ready to be used for production, such as:

  • Package Manager.
  • Bundler.
  • Editor.
  • Browser extensions like React dev tools & Redux devTools

React provides all the conveniences a programmer needs in developing an application that is lightweight, fast, and easy to use. There is a React Native framework that we can use to develop Android and IOS applications at the same time by using the JavaScript language. Happy learning ReactJS

Another Javascript Related Post :

  • React-Table Not Updating or Refreshing Data, The Solution ?
  • How To Custom React Datepicker In Bootstrap
  • Tutorial Create Simple POS Using ReactJS And Laravel Lumen Part 1
  • Adept Using Datatables Plugin In 10 Minutes For Beginners (Tutorial)
  • The Using Of Reactstrap And React-Table, Suitable For Beginners
  • Tutorial Create Simple Block UI Using React JS

Avatar for Sigit Prasetya Nugroho

About Sigit Prasetya Nugroho

This site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Welcome to my Home,

Avatar for Sigit Prasetya NugrohoThis site is a personal Blog of Sigit Prasetya Nugroho, a Desktop developer and freelance web developer working in PHP, MySQL, WordPress.



Popular Articles

Checked checkbox AdminLTE Bootstrap in Jquery

November 4, 2014 By Sigit Prasetya Nugroho 7 Comments

Simple create date format validation with jqueryUI

December 21, 2014 By Sigit Prasetya Nugroho Leave a Comment

Create Simple Progress Bar for Fake Online Generator with Jquery

January 10, 2015 By Sigit Prasetya Nugroho Leave a Comment

22+ Coolest Free Jquery Plugin For Premium Theme

October 3, 2015 By Sigit Prasetya Nugroho Leave a Comment

Easy Build Your Anti Copy Paste Plugin

October 6, 2015 By Sigit Prasetya Nugroho Leave a Comment

Popular Tags

adminlte (15) adsense (13) adsense tips (4) affiliate amazon (13) amazon (12) Android (8) angular (16) angular 4 (12) angular 5 (4) asin grabber (3) Bootstrap (27) codeigniter (5) create wordpress theme (5) crud (8) css (6) free wordpress theme (7) google adsense (4) imacros (4) increase traffic (6) jquery (34) laravel (10) laravel 5 (5) learn android (5) lumen api (4) modal dialog (5) mysql (6) nodeJs (4) optimize seo (4) pdo (6) php (30) plugin (53) pos (8) Publisher Tips (5) react (6) Reactjs (9) SEO (37) theme (17) tutorial angular (5) tutorial angular 4 (6) tutorial javascript (10) tutorial javascript beginners (4) twitter (3) wordpress (18) wordpress plugin (13) XMLRPC (5)




  • About
  • Contact Us
  • Disclaimer
  • Privacy Policy
  • Terms and Conditions

©2022 Seegatesite.com