A Playground for Learning Reactjs

React

Overview

This is a teaching repository for React created by Facebook.

The repo is sorted into single file react projects which can be run as standalone files ie they have React imported as a CDN into a single HTML file.

This repository is a combination of my own learning, also learning React from Udemy’s web developer course of 2018, and also from Egghead which has a course on React.

Also I have a much more complex set of standalone projects built with the create-react-app here.

Single File React HTML Pages

Standalone Projects

React Projects Built With create-react-app

API Projects

Resources

reactforbeginners.com

Flavio Copes React Beginners Handbook

React Learning Path

Build This Game On React Docs Tutorial

FreeCodeCamp React Tutorial

Free React Course https://scrimba.com/learn/learnreact

Live Play Around With React And Learn Basics - All In Browser

Examples - https://www.jqwidgets.com

[Facebook React Tutorial] https://facebook.github.io/react/tutorial/tutorial.html

Terms

HOC Higher Order Component
Render props - used to share state between components
reducer - function which determines changes to state.
reducer - pure function, takes previous state and action and returns next state
Redux - manages state changes

Introduction And Getting Started

JSX

We can read about JSX in detail here

https://reactjs.org/docs/jsx-in-depth.html#html-tags-vs.-react-components

Rendering

Rendering Components

Components

Routing Between Components

Routing

Elements

API

API Google Calendar

API Google Maps

Lifecycle

lifecycle methods in a class

// after component mounted
componentDidMount(){}
componentWillUnmount(){}
// this updates any time any part of the component updates
componentDidUpdate(){}

lifecycle methods in hooks

import React, {useState, useEffect} from 'react'
export default function MyComponent(props){
  const [name, setName] = useState('some name');
  // runs after initial render and after every update
  useEffect(()=>{
    // add javascript here to update whenever any part of the component updates
    // for example could asynchronously update an api 
    axios.POST(url,name)...
  })
  return(<></>)
}

React Native

This is probably a whole new repo in itself but I am going to make a start here!

React Native

React Hooks

React With JWT

React with JWT

Download Details:

Author: philanderson888

Source Code: https://github.com/philanderson888/react

#react #reactjs #javascript