CSS Animated Components with ReactJS

4.6

30 個評分

提供方

2,368 人已註冊

在此指導項目中,您將:

Be able to identify the basic ReactJS project structure, including TypeScript, Webpack, Storybook, and SASS configuration.

Render a Hello World component, as well as identify the basic structure of a ReactJS component, including how to render the component in Storybook.

Be able to create an animated sprite, by creating a logical folder structure, and writing the HTML, TypeScript, and CSS to render a component.

1hr 30m
中級
無需下載
分屏視頻
英語(English)
僅限桌面

In this 1-hour long project-based course, you will learn how to - Identify the basic ReactJS project structure, including TypeScript, Webpack, Storybook, and SASS configuration, - Render a Hello World component, as well as identify the basic structure of a ReactJS component, including how to render the component in Storybook. - Create an animated sprite, by creating a logical folder structure, and writing the HTML, TypeScript, and animated CSS to render a sprite component to Storybook. - Pass in a ReactJS prop to the component to track the facing direction of the animated Sprite and identify the difference between ReactJS discuss state vs props. - Use ReactJS state to track user input, and update the component state in ReactJS lifecycle events to flip the character's sprite sheet renderings. - Finalize your component by tracking position using props and state and using ReactJS lifecycle methods to position the sprite around the page based on user keyboard input, allowing the component to “walk” around the website. Note: This course works best for learners who are based in the North America region. We’re currently working on providing the same experience in other regions.

您要培養的技能

  • Webpack

  • React (Javascript Library)

  • Software As A Service (SAAS)

  • Typescript

分步進行學習

在與您的工作區一起在分屏中播放的視頻中,您的授課教師將指導您完成每個步驟:

  1. Identify the structure of a ReactJS Component project

  2. Render a HelloWorld Component using ReactJS

  3. Create an animated CSS sprite using ReactJS

  4. Pass a "prop" to control direction of the animated CSS sprite

  5. Use ReactJS state to track user input, and update the component state in ReactJS lifecycle events to flip the characters spritesheet renderings.

  6. Finalize your component by using ReactJS lifecycle methods to position the sprite around the page based on user keyboard input, allowing the component to “walk” around the website.

指導項目工作原理

您的工作空間就是瀏覽器中的雲桌面,無需下載

在分屏視頻中,您的授課教師會為您提供分步指導

審閱

來自CSS ANIMATED COMPONENTS WITH REACTJS的熱門評論

查看所有評論

常見問題

購買指導項目後,您將獲得完成指導項目所需的一切,包括通過 Web 瀏覽器訪問云桌面工作空間,工作空間中包含您需要了解的文件和軟件,以及特定領域的專家提供的分步視頻說明。

由於您的工作空間包含適合筆記本電腦或台式計算機使用的雲桌面,因此指導項目不在移動設備上提供。

指導項目授課教師是特定領域的專家,他們在項目的技能、工具或領域方面經驗豐富,並且熱衷於分享自己的知識以影響全球數百萬的學生。

您可以從指導項目中下載並保留您創建的任何文件。為此,您可以在訪問云桌面時使用‘文件瀏覽器’功能。

指導項目不符合退款條件。 請查看我們完整的退款政策

指導項目不提供助學金。

指導項目不支持旁聽。

您可在頁面頂部點按此指導項目的經驗級別,查看任何知識先決條件。對於指導項目的每個級別,您的授課教師會逐步為您提供指導。

是,您可以在瀏覽器的雲桌面中獲得完成指導項目所需的一切。

您可以直接在瀏覽器中於分屏環境下完成任務,以此從做中學。在屏幕的左側,您將在工作空間中完成任務。在屏幕的右側,您將看到有授課教師逐步指導您完成項目。