React Practice

Repository created to record my practice learning React with exercises based on the Udemy Course of Stephen Grider.

Table of contents

• Status
• Requirements
• Setup
• How to run it
• Repo structure & what i learned in each exercise
• Other practice repos

Status

• Current repo's version is
• This course has been completed on 28/04/2020 - Certificate

Why it has not any updated dependencies?

After finishing its related Udemy course, I archive this repository and unarchive it when I start a new training and add a link in the Other practice repos section referring to its new repo. But I don't update any associated dependency due to technology changes during the years between each practice, and the produced code which works with the mentioned requirements.

Requirements

• Node v12.16.1 or above
• For the eight exercise only
  • OBS

Setup

After cloning the repo, go to the created folder and install the node packages.

git clone https://github.com/NicolasOmar/react-practice.git
cd react-practice
npm run setup-all

setup-all is the command to install all the projects, but if you want to do it one by one, you can change that last line for one of the following:

App Setup	Command
All	npm run setup-all
Comments	npm run setup-comments
Seasons	npm run setup-seasons
Finder	npm run setup-finder
Videos	npm run setup-videos
Songs	npm run setup-songs
Blog	npm run setup-blog
Streams	npm run setup-streams
Languages	npm run setup-languages
Posts	npm run setup-posts

How to run it

To run any specific exercise, execute the following command in the project´s folder:

npm start

In the seventh exercise, you have to run the following commands in different terminals:

npm run api
npm run media
npm start

Repo structure & what i learned in each exercise

• Comments app (1-comments folder)
  • Create a React project created with Create-react-app
  • Use css classes, styles and js variables in jsx
  • Component creation with data passing using props & composition using props.children
  • Add mocked data with Faker.js
  • Basic usage of Semantic UI as main UI library
• Seasons app (2-seasons folder)
  • Use class based components
  • How to use Gelocation API
  • Handle states (creation and update)
  • How to use componentDidMount
  • How to use DefaultProps
• Finder app (3-finder folder)
  • How to handle Events
  • Make a controlled input using states
  • Pass and invoke parent functions in children components
  • Use Unsplash API to get photos
  • Handle API request with Axios
  • Add API folder to have a better project structure isolating API logic
  • Handle a list of elements with Array.map function
  • Show date formats with moment
  • Basic css grid
  • Handle DOM style with React.createRef
• Videos app (4-videos folder)
  • Work with Google/Youtube API
  • Better understanding of prop passing between parent and children components
• Songs app (5-songs folder)
  • Integrate Redux into a React project using React-Redux
  • Work with Providers, reducers and actions to pass data between components
• Blog app (6-blog folder)
  • Handle asyncronous action creators by a middleware with redux-thunk
  • Refactor code on mapStateToProps to use component props on the function
  • Reduce endpoint calls in action creators
• Streams app (7-streams folder)
  • Handle web navigation with react-router-dom
  • Understand differences between BrowserRouter, HashRouter & MemoryRouter
  • Basic knowledge of Google Auth API
  • Use redux on forms with redux-form
  • Mount a small REST server with json-server
  • Use lodash functions to array mapping and filtering
  • Handle routing history in programatic way
  • Refactor Form Components
  • Use CreatePortal to handle modals
  • Handle a Real Time Monitoring System
  • Create a streaming channel using OBS, node-media-server and flv.js
• Languages app (8-languages folder)
  • Use Context as a alternative to Redux for distribute data to the other components
  • How to use Provider and Consumer
  • How to replace Redux using a custom Context implementation
• Posts app (9-posts folder)
  • Use Hooks system to handle state data with useState and its updates with useEffect
  • How to isolate Hooks logic to use it in other contexts

Other practice repos

Node	Angular	GraphQL	Typescript	HTML & CSS