Giter VIP home page Giter VIP logo

pluralsight-course-using-react-hooks's Introduction

Course Code for Using React Hooks on Pluralsight

IMPORTANT NOTICE: Updated Course: Using Hooks in React 18 (Released Nov 2022)

Updated Course Released at Different Location

This new course "Using Hooks in React 18" covers all the React Hooks covered in this course as well as the new React Hooks useTransition and useDeferredValue. The new course incorporates a lot of feedback from this course including more focus on React and less focus on the build chain NextJS. That is, there is no discussions about deployments or server-side rendering.

There is nothing inaccurate in this course regarding hooks, the newer course is improved and more up to date in all regards.

Recently Released Courses From Peter Kellner

Course Release Date
Server Component Fundamentals in React 18 June 2023
Working with Components in React 18 February 2023
Using Hooks in React 18 November 2022
What is React August 2022
What's New in React 18 May 2022
Data and UI Patterns in React December 2021

Before you start, you should install node on either your Windows or Mac computer (those are the two environments that are tested). Below, in "Getting Started" are the basics to get module 6 up and running as fast as possible.

Course Description

React versions 17.0.2 and higher, include React Hooks which solve several problems that went unaddressed in previous versions. React Hooks provide a direct API to React concepts you already know about. Those concepts include props, state, context, refs and lifecycle events. React Hooks are designed for use in React Functional Components where previously there was no good way to manage state or lifecycle events.

In this course, you’ll learn how to use the top seven React Hooks as well as gain the knowledge and experience necessary to build your own customized composite Hook. Along the way, you’ll pick up techniques you can use building real world web apps that include how React Hooks can help you with REST services, reducers, authentication and more.

When you are finished with this course, you’ll confidently be able to combine functional components with React Hooks to build first class React apps. Those apps can be written completely with functional components and React Hooks.

Getting Started

  1. Install Node 14.16 with NPM 7.9.
  2. Clone this repository. - git clone https://github.com/pkellner/pluralsight-course-using-react-hooks or download the zip
  3. **Set your default directory to which module you want (example: cd 02-Basic-React-Hooks-useState-useRef-useEffect - cd m6-add-rest-data-to-server-side-rendering
  4. Install Node Packages with Dependencies. - npm install
  5. Install this chrome extension for viewing performance data (optional).

Directory Structure Here

Each of the 5 folders here represent one module of the course. In each folder, there are subfolders that represent the completed code at the end of each clip. Where this is no clip reference, either there is no code in that clip or nothing changed from the previous clip.

Once in a clip directory, the easiest way to test the app is to first install the packages by typing at the root of that directory (in a terminal window or DOS prompt)

npm install

Then, do run the app you just need type

npm run dev

And that will launch the web server on port 3000 where you can browser to it at the url: http://localhost:3000

Background

This course uses the Next.js framework as a demonstraton vehicle for React Hooks. If you want to know more about Next.js you should watch my other course on Pluralsight titled "Building Server-side Rendered React Apps for Beginners". You can find it here.

Repo or Course Issues

If you find any problems or issues, feel free to post it as an issue here at this forum and I will look into it as soon as I can. You can also contact me directly at https://peterkellner.net/contact/

I hope you enjoy the course!

Notes

Update Notes for April 2021 Release

If you want to get to the source code from the previous course release in April 2020, you can find it in the branch named Course-Update-July-2020.

pluralsight-course-using-react-hooks's People

Contributors

adeope avatar pkellner avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

pluralsight-course-using-react-hooks's Issues

Class usage in final module

In the final module, dealing with authentication, the _app.js uses a class instead of a function. You don't discuss why you use a class here where as other places in the course you are definitely not intersted in used classes.

What is the difference?

Not bug, more of an optimisation

Hi Peter,
Thanks for the brilliant course on pluralsight.
I gave it an excellent rating.

This is not a bug, just more of an optimisation.

I think the removal of the "return item" on line 6 in speakersReducer.js would remove one extra line of code and not affect the execution of the code, since there's a subsequent "return item" two lines down.

it's a little pedantic on my part, so feel free to ignore and close this ticket if you will.
(ps i did try to do a pull request but i don't have access - which is fair enough)

Thanks again for the course

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.