# Course Code for [Designing React Components](https://app.pluralsight.com/library/courses/react-components-designing) on Pluralsight
# IMPORTANT NOTICE: Updated Course: [Working with Components in React 18 (Released February 2023)](https://www.pluralsight.com/library/courses/react-18-working-components)
![Updated Course Released at Different Location](working-with-components-in-react18-600px.png)
This new course **"Working with Components in React 18"** covers all the learnings covered in **this course** as well as the new React
Hooks `useTransition` and `useDeferredValue` and how those work with components. It also has an introduction to the new Server Components which is
part of what comes with the new Concurrent Rendering Engine in React 18. The new course incorporates a lot of feedback from this course including more focus on React and less focus on the build chain NextJS.
In addition, the example has been completely created from new. The newer course has a todo list as the example code. One thing that was not included in the new course is how to handle an optimistic UI. The method presented here is still current with that.
There is nothing inaccurate in this course regarding hooks, the newer course is improved and more up to date in all regards.
## OTHER Recently Released Courses From Peter Kellner
| **Course** | Release Date |
|-------------------------------------------------------------------------------------------------------------------------------|---------------|
| **[Using Hooks in React 18](https://pluralsight.com/courses/react-18-using-hooks/)** | November 2022 |
| **[What is React](https://pluralsight.com/courses/react-what-is/)** | August 2022 |
| **[What's New in React 18](https://pluralsight.com/courses/react-18-whats-new/)** | May 2022 |
| **[Data and UI Patterns in React](https://github.com/pkellner/pluralsight-building-essential-ui-data-elements-in-react/)** | December 2021 |
<hr />
The master branch here is the latest updates to the Pluralsight course published by Peter Kellner in May of 2021 in the master branch. This GitHub repo includes the final code for all the modules in the course
# Course Description
Creating UIs in React is all about creating independent components that seamlessly work together to present a consistent view across your web app. In this course, Designing React Components, you will gain the ability to architect and build high quality web apps, that ensures just the right components re-render as the data in your applications changes. First, you will learn how separation of concerns applies to building React components. Next, you will discover the various primitive methods for sharing data and methods between components. Finally, you will explore how to use Context for establishing shared information and use custom hooks for advanced state management. When you are finished with this course, you will have the skills and knowledge of React component design needed to leverage re-usability and ensure consistency in your apps and code with less bugs.
# Getting Started
1. **Install [Node 16 with NPM 6.14.12](https://nodejs.org)**.
2. **Clone this repository.** - `https://github.com/pkellner/pluralsight-designing-react-components-course-code` or [download the zip](https://github.com/pkellner/pluralsight-designing-react-components-course-code/archive/master.zip)
3. **Set your default directory to which module you want (example: `cd 02-designing-better-components` - `cd clip-02-setting-up-our-dev-environment`
4. **Install Node Packages with Dependencies.** - `npm install`
# Directory Structure Here
Each of the 7 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`
## [Release Notes](https://github.com/pkellner/pluralsight-designing-react-components-course-code/blob/Course-Update-May-2021/ReleaseNotesMay2021.md)
Original course source code can be found in the branch [Course-Release-May-2020](https://github.com/pkellner/pluralsight-designing-react-components-course-code/tree/Course-Release-May-2020)
# 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 http://peterkellner.net/contact/
I hope you enjoy the course!
没有合适的资源?快使用搜索试试~ 我知道了~
关于设计React组件的Pluralsight课程。_JavaScript_CSS_下载.zip
共1384个文件
jpg:602个
js:577个
png:89个
1.该资源内容由用户上传,如若侵权请联系客服进行举报
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
2.虚拟产品一经售出概不退款(资源遇到问题,请及时私信上传者)
版权申诉
0 下载量 55 浏览量
2023-04-21
11:02:20
上传
评论
收藏 21.44MB ZIP 举报
温馨提示
关于设计React组件的Pluralsight课程。_JavaScript_CSS_下载.zip
资源推荐
资源详情
资源评论
收起资源包目录
关于设计React组件的Pluralsight课程。_JavaScript_CSS_下载.zip (1384个子文件)
local-styles.css 18KB
local-styles.css 18KB
local-styles.css 18KB
local-styles.css 18KB
local-styles.css 18KB
local-styles.css 18KB
local-styles.css 18KB
local-styles.css 18KB
local-styles.css 18KB
local-styles.css 18KB
local-styles.css 18KB
local-styles.css 18KB
local-styles.css 18KB
local-styles.css 18KB
local-styles.css 18KB
local-styles.css 18KB
local-styles.css 18KB
local-styles.css 18KB
local-styles.css 18KB
local-styles.css 18KB
local-styles.css 18KB
local-styles.css 18KB
local-styles.css 18KB
local-styles.css 18KB
local-styles.css 18KB
local-styles.css 18KB
local-styles.css 18KB
local-styles.css 18KB
local-styles.css 18KB
local-styles.css 18KB
local-styles.css 18KB
local-styles.css 18KB
local-styles.css 18KB
local-styles.css 18KB
local-styles.css 18KB
local-styles.css 18KB
local-styles.css 18KB
local-styles.css 18KB
local-styles.css 18KB
local-styles.css 18KB
local-styles.css 18KB
local-styles.css 18KB
local-styles.css 18KB
.gitignore 2KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-620.jpg 72KB
speaker-14918.jpg 44KB
speaker-14918.jpg 44KB
speaker-14918.jpg 44KB
speaker-14918.jpg 44KB
speaker-14918.jpg 44KB
speaker-14918.jpg 44KB
speaker-14918.jpg 44KB
speaker-14918.jpg 44KB
speaker-14918.jpg 44KB
speaker-14918.jpg 44KB
speaker-14918.jpg 44KB
speaker-14918.jpg 44KB
speaker-14918.jpg 44KB
共 1384 条
- 1
- 2
- 3
- 4
- 5
- 6
- 14
资源评论
快撑死的鱼
- 粉丝: 1w+
- 资源: 9154
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功