Skip to main content

React Tutorial

React Tutorial From Basics

React Tutorial From Basics

Random Things to Remember

React Tutorial From Basics

Random Things to Remember

Using () implicitly returns components.Role of index.js is to render your application.The reference to root comes from a div in the body of your public html file.State of a component is simply a regular JS Object.Class Components require render() method to return JSX.Functional Components directly return JSX.Class is className in React.When parsing for an integer just chain Number.parseInt("123")

  • Use ternary operator if you want to make a conditional inside a fragment. 
{ x === y ? <div>Naisu</div> : <div>Not Naisu</div>; }
Purpose of React.Fragment is to allow you to create groups of children without adding an extra dom element.
  • React manages the creation and updating of DOM nodes in your Web page.
  • All it does is dynamically render stuff into your DOM.
  • What it doesn’t do:
  • Ajax
  • Services
  • Local Storage
  • Provide a CSS framework
  • React is unopinionated
  • Just contains a few rules for developers to follow, and it just works.
  • JSX : Javascript Extension is a language invented to help write React Applications (looks like a mixture of JS and HTML)
  • Here is an overview of the difference between rendering out vanilla JS to create elements, and JSX:
  • This may seem like a lot of code but when you end up building many components, it becomes nice to put each of those functions/classes into their own files to organize your code.
    Using tools with React
  • React DevTools : New tool in your browser to see ow React is working in the browser
  • create-react-app : Extensible command-line tool to help generate standard React applications.
  • Webpack : In between tool for dealing with the extra build step involved.
  • HMR : (Hot Module Replacement) When you make changes to your source code the changes are delivered in real-time.
  • React Developers created something called Flux Architecture to moderate how their web page consumes and modifies data received from back-end API's.
  • Choosing React
  • Basically, React is super important to learn and master.

React Concepts and Features

There are many benefits to using React over just Vanilla JS.

  • Modularity
  • To avoid the mess of many event listeners and template strings, React gives you the benefit of a lot of modularity.
  • Easy to start
  • No specials tools are needed to use Basic React.
  • You can start working directly with createElement method in React.
  • Declarative Programming
  • React is declarative in nature, utilizing either it’s build in createElement method or the higher-level language known as JSX.
  • Reusability
  • Create elements that can be re-used over and over.
    One-flow of data
  • React apps are built as a combination of parent and child components.
  • Parents can have one or more child components, all children have parents.
  • Data is never passed from child to the parent.
  • Virtual DOM : React provides a Virtual DOM that acts as an agent between the real DOM and the developer to help debug, maintain, and provide general use.
  • Due to this usage, React handles web pages much more intelligently; making it one of the speediest Front End Libraries available.

Comments

Post a Comment

Share your thoughts!

Popular posts from this blog

Breaking Down Scope, Context, And Closure In JavaScript In Simple Terms.

Breaking Down Scope, Context, And Closure In JavaScript In Simple Terms. Breaking Down Scope, Context, And Closure In JavaScript In Simple Terms. “JavaScript’s global scope is like a public toilet. You can’t avoid going in there, but try to limit your contact with surfaces when you… Breaking Down Scope, Context, And Closure In JavaScript In Simple Terms. Photo by Florian Olivo on  Unsplash “ J avaScript’s global scope is like a public toilet. You can’t avoid going in there, but try to limit your contact with surfaces when you do.” ― Dmitry Baranowski Here’s another (much) more simple article I wrote on the subject: Closures In Javascript Answer A closure is a function defined...
Post a Comment
Read more

links

links Absolutely Everything You Could Need To Know About How JavaScript TOC & Condensed Links **** **** **** **** **** 1 2 3 4 5 leonardomso/33-js-concepts *This repository was created with the intention of helping developers master their concepts in JavaScript. It is not a…*github.com Call stack - MDN Web Docs Glossary: Definitions of Web-related terms MDN *A call stack is a mechanism for an interpreter (like the JavaScript interpreter in a web browser) to keep track of its…*developer.mozilla.org Understanding Javascript Function Executions — Call Stack, Event Loop , Tasks & more *Web developers or Front end engineers, as that’s what we like to be called, nowadays do everything right from acting as…*medium.com Understanding the JavaScript call stack *The JavaScript engine (which is found in a hosting environment like the browser), is a single-threaded interpreter…*medium.freecodecamp.org Javascript: What Is The Execution Context? ...
Post a Comment
Read more

React Tricks

REACT-TIPS React Tips Replace Redux with React Query As our application gets larger it becomes harder to manage state across our components, we may reach for a state management library like Redux. If our application relies on data that we get from an API, we often use Redux to fetch that server state and then update our application state. This can be a challenging process; not only do you have to fetch data, but you also need to handle the different states, depending on whether you have the data or are in a loading or error state. Instead of using Redux to manage data you get from a server, use a library like React Query. React Query not only gives you greater control over making HTTP requests in your React apps through helpful hooks and the ability to easily refetch data, but it also enables us to seamlessly manage state across our app components, of...
1 comment
Read more