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 does it not have 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 eighth 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 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 child components.
  • Use Unsplash API to get photos.
  • Handle API request with Axios.
  • Add an 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 child 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 asynchronous action creators by a middleware with redux-thunk.
  • Refactor code on mapStateToProps to use component props in 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 a programmatic 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].(https://www.npmjs.com/package/flv.js)
• Languages app (8-languages folder)
  • Use Context as an alternative to Redux for distributing 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 the 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	Styling	NextJS	Python	NestJS