Difference between revisions of "ReactJs"

From Grundy
Jump to navigation Jump to search
Line 19: Line 19:
 
*Familiarity with [https://www.w3schools.com/react/react_es6.asp ES6] syntax and features- ES6 refers to version 6 of the ECMA Script programming language. ECMA Script is the standardized name for JavaScript. It is a major enhancement to the JavaScript language and adds many more features intended to make large-scale software development easier.
 
*Familiarity with [https://www.w3schools.com/react/react_es6.asp ES6] syntax and features- ES6 refers to version 6 of the ECMA Script programming language. ECMA Script is the standardized name for JavaScript. It is a major enhancement to the JavaScript language and adds many more features intended to make large-scale software development easier.
  
===Installation===
+
===Setup and Installation===
* '''Installing Django:''' The easiest and the recommended way to install Django is via pip - [https://docs.djangoproject.com/en/1.10/topics/install/#installing-an-official-release-with-pip Installing an official release with pip]. If should be a fairly easy installation but if you face any problems, you could refer to the full installation process over [https://docs.djangoproject.com/en/1.10/topics/install/ here]. You could also refer to the troubleshooting guide over [https://docs.djangoproject.com/en/1.10/faq/troubleshooting/ here] or you could simply google your problem (which you should always do before asking anyone for help). If you still face problems you could reach out to the Django community (for details on how to reach them, refer to 'Reaching out for help' section below).
 
  
* '''Understanding the Concept:''' The most crucial and tricky step is understanding the basic idea behind how things co-ordinate between files to make your webpage. This is a 15-20 min short tutorial,[[ The Django Logic ]] which is precise and upto the point to get started. We suggest you to go through this, before starting with your further journey in developing awesome webpages.  
+
There are a few ways to set up React. Here we will discuss two major ways in which you can setup React and start using it. Remember, React is a JS library and not a framework in itself.
  
* '''Getting started:''' What better way to learn Django than from the tutorial which the Django community themselves have created. Apart from creating your very first application on Django you will learn the best practices which is necessary if you want to get the best out of this framework. This is the tutorial -[https://docs.djangoproject.com/en/1.10/intro/tutorial01/ Writing your first Django app] . Make sure you complete this. Another tutorial, which I found really helpful is [https://tutorial.djangogirls.org/en Django Girls Tutorial]. The title may be a bit misleading (:P), but    trust me, this tutorial is meant for all genders and if you are a complete newbie, this is the tutorial for you. If you are more suited to video lectures you should definitely have a look at this video series by [https://www.youtube.com/channel/UCWEHue8kksIaktO8KTTN_zg CodingEntrepreneurs] - [https://www.youtube.com/watch?v=KdPf-pNK1s0&list=PLEsfXFp6DpzQSEMN5PXvEWuD2gEWVngCZ Try Django 1.10]. This video series also puts a lot of emphasis on best practices and you will also learn a lot about other development tricks and tools. It's a bit long, so I'd suggest you skip over parts you are already familiar with.
+
====Static HTML File====
 
 
* '''Becoming a master: ''' After completing the basic tutorials above, if you're hungry for more this section will satisfy you're needs. Developing a full scale Django app for production purposes (when your app goes public and everyone can use it) requires a extra bit of effort. You would have to take care about a lot of things like deployment, security etc. And I believe this [http://www.marinamele.com/taskbuster-django-tutorial tutorial] by [http://www.marinamele.com/ Marina Mele] fully accomplishes this. This is the complete package to become a professional developer. You will learn about security issues, different environments for developing and testing, version control repositories, deployment on Heroku, PostgreSQL configuration, and many more things! This tutorial is a long one and you could skip the things you learnt in the basic tutorials above and focus on what you really want to learn. Overall this is a very comprehensive tutorial and you will understand what is takes to take your product from development phase to production phase.
 
 
 
* '''Reaching out for help: ''' The Django community is one of the most open and helpful. You could easily ask your doubts on their official gitter channel - [https://gitter.im/django/django?source=explore django/django]. You could even use their google groups - [https://groups.google.com/forum/#!forum/django-users django-users mailing list], to ask questions about how to use Django. For more information on how to contact them, you could refer to their contact us page [https://www.djangoproject.com/contact/foundation/ here]. But remember one thing, just because they are helpful it doesn't mean we try to take advantage of them. Make sure you research your problem well and only if you're sure it's worth asking, then only post your doubt. It's never good to take anything for granted.
 
  
 
==Conclusion==
 
==Conclusion==

Revision as of 19:38, 16 May 2020

React.js is an open-source JavaScript library that is used for building user interfaces specifically for single-page applications. It’s used for handling the view layer for web and mobile apps. React also allows us to create reusable UI components.

JavaScript is a scripting or programming language that allows you to implement complex features on web pages. JavaScript libraries are collections of pre-written JavaScript code that can be used for common JS tasks, allowing you to bypass the time-intensive (and unnecessary) process of coding by hand. There are a lot of different JS libraries out there and React JS is one of them. React is a JavaScript library that specializes in helping developers build user interfaces or UIs.

Why React?

React is a JavaScript library that specializes in helping developers build user interfaces, or UIs. In terms of websites and web applications, UIs are the collection of on-screen menus, search bars, buttons, and anything else someone interacts with to USE a website or app. Before React JS, developers were stuck building UIs by hand with “vanilla JavaScript” (developer speak for the raw JavaScript language on its own) or with less UI-focused React predecessors like jQuery. That meant longer development times and plenty of opportunities for errors and bugs. So, in 2011, Facebook engineer Jordan Walke created React JS specifically to improve UI development.

  • Virtual DOM : At the heart of any basic website are HTML documents. Web browsers read these documents and display them on your computer, tablet, or phone as web pages. During this process, browsers create something called a Document Object Model (DOM), a representational tree of how the web page is arranged. Developers can then add dynamic content to their projects by modifying the DOM with languages like JavaScript. If you’re not using React Js, your website will use HTML to update its DOM (the process that makes things “change” on screen without a user having to manually refresh a page). This works fine for simple, static websites, but for dynamic websites that involve heavy user interaction it can become a problem since the entire DOM needs to reload every time the user clicks a feature calling for a page refresh.
    However, React JS creates something called a Virtual DOM. The Virtual DOM as the name implies is a copy of the site’s DOM, and React JS uses this copy to see what parts of the actual DOM need to change when an event happens. Only those parts are updated and the changes are reflected. This kind of selective updating takes less computing power and less loading time, which might not sound like much but when you start to think about all the dynamics and updating associated with even a slightly complex website—you’ll realize it adds up to a lot.
  • JSX : React can be used with JSX. JSX is an XML/HTML-like syntax used by React so that HTML-like text can co-exist with JavaScript/React code. Basically, by using JSX Instead of separating technologies by putting markup(HTML) and logic(JS) in separate files, you can write concise HTML structures in the same file as you write JavaScript code. Unlike the past, instead of putting JavaScript into HTML, JSX allows us to put HTML into JavaScript.

Learning React

Prerequisites

  • Basic familiarity with HTML & CSS - Html elements are the building blocks of web pages. CSS controls the style and layout of the web pages
  • Knowledge of JavaScript Basics - JavaScript is a scripting or programming language that allows you to implement complex features on web pages
  • Familiarity with ES6 syntax and features- ES6 refers to version 6 of the ECMA Script programming language. ECMA Script is the standardized name for JavaScript. It is a major enhancement to the JavaScript language and adds many more features intended to make large-scale software development easier.

Setup and Installation

There are a few ways to set up React. Here we will discuss two major ways in which you can setup React and start using it. Remember, React is a JS library and not a framework in itself.

Static HTML File

Conclusion

I hope you had a good time learning about Django and we hope we have convinced you that if you are thinking about web development learning Django is a good step forward. Even if you want to just start with developing anything but you aren't really sure which direction to do, learning Django would still be a good step forward. The strong focus on good developing principles, great documentation and community are all necessary if you want to be a good developer. We also hope that we have pointed you in the right direction to learn Django and all the tutorials linked over here were helpful to you. You are most welcome to correct any kind of errors you find in this article. Cheers!

See also