# React

# What is React

React (also known as ReactJS or React.js) is an open-source declarative, efficient and flexible JavaScript library for building user interfaces. React was developed by Facebook and first deployed in the Facebook news feed in 2011.

React.js lets you compose complex UIs from small, isolated and resuable pieces of code called "components". 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.

# Why React?

In addition to providing reusable React library code (saving development time and cutting down on the chance for coding errors), React comes with two key features that add to its appeal for JavaScript developers:

  • JSX
  • Virtual DOM

# JSX

JSX (short for JavaScript eXtension) is a React extension that makes it easy for web developers to modify their DOM by using simple, HTML-style code. And—since React JS browser support extends to all modern web browsers—JSX is compatible with any browser platform you might be working with.

# Virtual DOM

React.js creates a Virtual DOM which is the copy of site's DOM. React uses this copy to see what parts of the actual DOM is changed when an event happens (like a user clicking a button) and selectively updates the DOM only.

Find more about React and their benefits!

# Companies using React

# React is Awesome

# Roadmap

A community-created roadmap for Reactjs.

# Getting Started

# Introduction to Reactjs

In this series of videos, you will be introduced fundamental concepts of React as you build a small project.

# Reactjs in-depth course

This in-depth course allows you to learn React in an interactive way at Scrimba

# Cheat Sheet

Cheat sheets save you time and energy by giving you essential syntax at your fingertips.

# Essential syntax

Essential Syntaxs for React from devhints.io

# VS Code Extensions

# glean

This extension provides refactoring tools for your React codebase

# ES7 React/Redux/React-Native Snippets

Simple extensions for React, Redux and Graphql in JS/TS with ES7 syntax

# Useful Resources

# Awesome resourses from the React ecosystem

A collection of awesome things regarding the React ecosystem.

# React Router

The library provides declarative routing for React

# Using Google Maps in React

This library provides React.js Google Maps integration component that yu can use in your app

# Official Documentation

The official Reactjs documentation can help you understand important concepts and refer to the API

# Official GitHub

The official Reactjs github repository for you to check out new updates and also contribute to repository in the future.

# Further Steps

We at the Hacklab believe in learning by doing. So here are some ideas for a few projects that you can work on to hone your skills.

# Create a simple application

# Todo App

This is a simple Todo App that lets a user create, read, update and delete to-do tasks. In the application user can also categories the tasks as shown in the image

# SnapShot

This application searches and displays the pictures that the user searches for.

# Giphy Clone

Create a single page web application which uses a search input and Giphy’s API to display gifs on a page.

# Try some interview questions

13 Essential React Interview Questions to try out

# Learn React Native

React Native allows you to create native apps for Android and iOS. Entend your knowledge to make mobile applications.

# Create your own project

If you have a good application idea, and don't know where to start, Contact us at Microsoft Teams or meet us at room 2014 in UTM's Deerfield Hall building.