├── 1_JSX
├── 1.4_JSX
│ └── README.md
├── 1.1_Intro_to_JSX
│ ├── 1.1.01_Why_React
│ │ └── README.md
│ ├── 1.1.15_JSX_Recap
│ │ └── README.md
│ ├── 1.1.04_What_is_JSX
│ │ └── README.md
│ ├── 1.1.14_The_Virtual_DOM
│ │ └── README.md
│ ├── 1.1.05_JSX_Elements
│ │ └── app.js
│ ├── 1.1.03_The_Mystery_Revealed
│ │ └── app.js
│ ├── 1.1.02_Hello_World
│ │ └── app.js
│ ├── 1.1.06_JSX_Elements_And_Their_Surroundings
│ │ └── app.js
│ ├── 1.1.07_Attributes_In_JSX
│ │ └── app.js
│ ├── 1.1.08_Nested_JSX
│ │ └── app.js
│ ├── 1.1.12_ReactDOM.render_II
│ │ ├── app.js
│ │ └── index.html
│ ├── 1.1.10_Rendering_JSX
│ │ ├── app.js
│ │ └── index.html
│ ├── 1.1.11_ReactDOM.render_I
│ │ ├── app.js
│ │ ├── previous.js
│ │ └── index.html
│ ├── 1.1.13_Passing_a_Variable_to_ReactDOM.render
│ │ ├── app.js
│ │ └── index.html
│ └── 1.1.09_JSX_Outer_Elements
│ │ └── blog.js
├── 1.2_Advanced_JSX
│ ├── 1.2.16_JSX_Recap
│ │ └── README.md
│ ├── 1.2.09_JSX_Conditionals_If_Statements_That_Dont_Work
│ │ └── README.md
│ ├── 1.2.15_React.createElement
│ │ ├── app.js
│ │ └── app.compiled.js
│ ├── 1.2.04_Curly_Braces_in_JSX
│ │ ├── app.js
│ │ └── index.html
│ ├── 1.2.03_JavaScript_In_Your_JSX_In_Your_JavaScript
│ │ ├── app.js
│ │ └── index.html
│ ├── 1.2.01_class_vs_className
│ │ ├── app.js
│ │ └── index.html
│ ├── 1.2.06_Variables_in_JSX
│ │ ├── app.js
│ │ └── index.html
│ ├── 1.2.05_20_Digits_of_Pi_in_JSX
│ │ ├── app.js
│ │ ├── pi.js
│ │ └── index.html
│ ├── 1.2.07_Variable_Attributes_in_JSX
│ │ ├── app.js
│ │ └── index.html
│ ├── 1.2.02_Self-Closing_Tags
│ │ └── app.js
│ ├── 1.2.13_.map_in_JSX
│ │ ├── app.js
│ │ └── index.html
│ ├── 1.2.14_Keys
│ │ ├── app.js
│ │ └── index.html
│ ├── 1.2.08_Event_Listeners_in_JSX
│ │ ├── index.html
│ │ └── app.js
│ ├── 1.2.12_JSX_Conditionals_And
│ │ ├── index.html
│ │ └── favorite-foods.js
│ ├── 1.2.11_JSX_Conditionals_The_Ternary_Operator
│ │ ├── index.html
│ │ └── app.js
│ └── 1.2.10_JSX_Conditionals_If_Statements_That_Do_Work
│ │ ├── index.html
│ │ ├── if.js
│ │ └── app.js
└── 1.3_Animal_Fun_Facts_Project
│ ├── images
│ ├── ocean.jpg
│ ├── dolphin.jpg
│ ├── lobster.jpg
│ └── starfish.jpg
│ ├── index.html
│ └── animals.js
├── 5_Hooks
├── 5.5_React_Hooks
│ └── README.md
├── 5.3_The_Effect_Hook
│ ├── 5.3.6_Rules_of_Hooks
│ │ ├── index.js
│ │ ├── index.html
│ │ ├── styles.css
│ │ ├── test
│ │ │ └── test.js
│ │ └── mockBackend
│ │ │ └── data.js
│ ├── 5.3.3_Clean_Up_Effects
│ │ ├── index.js
│ │ ├── index.html
│ │ ├── Counter.js
│ │ └── test
│ │ │ └── test.js
│ ├── 5.3.5_Fetch_Data
│ │ ├── index.js
│ │ ├── index.html
│ │ ├── styles.css
│ │ └── test
│ │ │ └── test.js
│ ├── 5.3.2_Function_Component_Effects
│ │ ├── index.js
│ │ ├── index.html
│ │ ├── Counter.js
│ │ └── test
│ │ │ └── test.js
│ ├── 5.3.4_Control_When_Effects_Are_Called
│ │ ├── index.js
│ │ ├── index.html
│ │ ├── test
│ │ │ └── test.js
│ │ └── Timer.js
│ ├── 5.3.7_Separate_Hooks_for_Separate_Effects
│ │ ├── index.js
│ │ ├── index.html
│ │ ├── test
│ │ │ └── test.js
│ │ └── styles.css
│ ├── 5.3.8_Lesson_Review
│ │ ├── index.js
│ │ ├── index.html
│ │ ├── PageTitleFunction.js
│ │ ├── test
│ │ │ └── test.js
│ │ └── PageTitleClass.js
│ └── 5.3.1_Why_Use_useEffect
│ │ ├── PageTitleFunction.js
│ │ └── PageTitleClass.js
├── 5.2_The_State_Hook
│ ├── 5.2.5_Set_From_Previous_State
│ │ ├── index.js
│ │ ├── App.js
│ │ ├── index.html
│ │ ├── styles.css
│ │ └── test
│ │ │ └── test.js
│ ├── 5.2.6_Arrays_in_State
│ │ ├── index.js
│ │ ├── styles.css
│ │ ├── index.html
│ │ ├── ItemList.js
│ │ ├── test
│ │ │ └── test.js
│ │ └── storeItems.js
│ ├── 5.2.3_Initialize_State
│ │ ├── index.js
│ │ ├── styles.css
│ │ ├── index.html
│ │ └── ColorPicker.js
│ ├── 5.2.7_Objects_in_State
│ │ ├── index.js
│ │ ├── index.html
│ │ ├── styles.css
│ │ └── test
│ │ │ └── test.js
│ ├── 5.2.2_Update_Function_Component_State
│ │ ├── index.js
│ │ ├── styles.css
│ │ ├── index.html
│ │ ├── test
│ │ │ └── test.js
│ │ └── ColorPicker.js
│ ├── 5.2.4_Use_State_Setter_Outside_of_JSX
│ │ ├── index.js
│ │ ├── styles.css
│ │ └── index.html
│ ├── 5.2.1_Why_Use_Hooks
│ │ ├── index.js
│ │ ├── index.html
│ │ ├── Presentational
│ │ │ ├── TasksList.js
│ │ │ └── NewTask.js
│ │ └── test
│ │ │ └── test.js
│ ├── 5.2.9_Lesson_Review
│ │ ├── index.js
│ │ ├── index.html
│ │ └── Presentational
│ │ │ ├── TasksList.js
│ │ │ └── NewTask.js
│ └── 5.2.8_Separate_Hooks_for_Separate_States
│ │ └── test
│ │ └── test.js
├── 5.4_Passing_Thoughts_Project
│ ├── utilities.js
│ └── index.html
└── 5.1_Function_Components
│ ├── 5.1.2_Function_Components_and_Props
│ ├── Friend.js
│ ├── components
│ │ └── GuineaPigs.js
│ ├── NewFriend.js
│ ├── index.html
│ └── Example.js
│ ├── 5.1.1_Stateless_Functional_Components
│ ├── Friend.js
│ ├── index.html
│ └── Example.js
│ └── 5.1.3_Review
│ ├── components
│ └── GuineaPigs.js
│ ├── index.html
│ ├── Example.js
│ └── Friend.js
├── 4_Lifecycle_Methods
├── 4.3_Lifecycle
│ └── README.md
├── 4.1_Component_Lifecycle_Methods
│ ├── 4.1.6_Review
│ │ └── README.md
│ ├── 4.1.1_The_Component_Lifecycle
│ │ └── README.md
│ ├── 4.1.2_Introduction_to_Lifecycle_Methods
│ │ └── Clock.js
│ ├── 4.1.4_componentWillUnmount
│ │ └── Clock.js
│ └── 4.1.3_componentDidMount
│ │ └── Clock.js
└── 4.2_Social_Network_for_Pets_Project
│ ├── Directory.js
│ ├── index.html
│ └── Userlist.js
├── 2_React_Components
├── 2.4_React_Components
│ └── README.md
├── 2.5_Creating_a_React_App
│ └── README.md
├── 2.1_Your_First_React_Component
│ ├── 2.1.2_Import_React
│ │ ├── news.js
│ │ ├── app.js
│ │ └── index.html
│ ├── 2.1.3_Import_ReactDOM
│ │ ├── news.js
│ │ ├── app.js
│ │ └── index.html
│ ├── 2.1.4_Create_a_Component_Class
│ │ ├── news.js
│ │ ├── app.js
│ │ └── index.html
│ ├── 2.1.5_Name_a_Component_Class
│ │ ├── news.js
│ │ ├── app.js
│ │ └── index.html
│ ├── 2.1.6_Component_Class_Instructions
│ │ ├── news.js
│ │ ├── app.js
│ │ └── index.html
│ ├── 2.1.7_The_Render_Function
│ │ ├── news.js
│ │ ├── app.js
│ │ └── index.html
│ ├── 2.1.8_Create_a_Component_Instance
│ │ ├── news.js
│ │ ├── app.js
│ │ └── index.html
│ ├── 2.1.9_Render_A_Component
│ │ ├── app.js
│ │ ├── news.js
│ │ └── index.html
│ └── 2.1.1_Hello_World_Part_II_THE_COMPONENT
│ │ ├── app.js
│ │ └── index.html
├── 2.2_Components_and_Advanced_JSX
│ ├── 2.2.7_Components_Recap
│ │ └── README.md
│ ├── 2.2.5_Use_this_in_a_Component
│ │ ├── app.js
│ │ └── index.html
│ ├── 2.2.6_Use_an_Event_Listener_in_a_Component
│ │ ├── app.js
│ │ └── index.html
│ ├── 2.2.3_Put_Logic_in_a_Render_Function
│ │ └── index.html
│ ├── 2.2.1_Use_Multiline_JSX_in_a_Component
│ │ ├── index.html
│ │ ├── app.js
│ │ └── QuoteMaker.js
│ ├── 2.2.2_Use_a_Variable_Attribute_in_a_Component
│ │ ├── index.html
│ │ ├── app.js
│ │ └── RedPanda.js
│ └── 2.2.4_Use_a_Conditional_in_a_Render_Function
│ │ ├── index.html
│ │ ├── TodaysPlan.js
│ │ └── app.js
└── 2.3_Authorization_Form
│ └── index.html
├── 3_Components_Interacting
├── 3.6_React_Developer_Tools
│ └── README.md
├── 3.3_this.state
│ ├── 3.3.1_State
│ │ └── README.md
│ ├── 3.3.7_Components_Interacting_Recap
│ │ └── README.md
│ ├── 3.3.4_Update_state_with_this.setState
│ │ └── Example.js
│ ├── 3.3.2_Setting_Initial_State
│ │ ├── index.html
│ │ ├── App.js
│ │ └── test
│ │ │ └── test.js
│ ├── 3.3.3_Access_a_Component_s_state
│ │ ├── index.html
│ │ ├── App.js
│ │ └── test
│ │ │ └── test.js
│ ├── 3.3.5_Call_this.setState_from_Another_Function
│ │ ├── index.html
│ │ ├── Mood.js
│ │ └── Toggle.js
│ └── 3.3.6_this.setState_Automatically_Calls_render
│ │ ├── index.html
│ │ ├── Mood.js
│ │ └── Toggle.js
├── 3.5_Components_Interacting
│ └── README.md
├── 3.2_this.props
│ ├── 3.2.01_this.props
│ │ └── README.md
│ ├── 3.2.13_this.props_Recap
│ │ └── README.md
│ ├── 3.2.05_Pass_props_From_Component_To_Component
│ │ ├── Greeting.js
│ │ ├── StewDescriber.js
│ │ ├── index.html
│ │ ├── App.js
│ │ ├── MainPage.js
│ │ └── test
│ │ │ └── test.js
│ ├── 3.2.07_Put_an_Event_Handler_in_a_Component_Class
│ │ ├── Button.js
│ │ ├── Example.js
│ │ ├── index.html
│ │ └── Talker.js
│ ├── 3.2.11_this.props.children
│ │ ├── BigButton.js
│ │ ├── index.html
│ │ ├── List.js
│ │ └── App.js
│ ├── 3.2.08_Pass_an_Event_Handler_as_a_prop
│ │ ├── Button.js
│ │ ├── index.html
│ │ └── Talker.js
│ ├── 3.2.09_Receive_an_Event_Handler_as_a_prop
│ │ ├── Button.js
│ │ ├── index.html
│ │ ├── Talker.js
│ │ └── test
│ │ │ └── test.js
│ ├── 3.2.10_handleEvent_onEvent_and_this.props.onEvent
│ │ ├── Button.js
│ │ ├── index.html
│ │ ├── Talker.js
│ │ └── test
│ │ │ └── test.js
│ ├── 3.2.04_Render_a_Component_s_props
│ │ ├── Greeting.js
│ │ └── index.html
│ ├── 3.2.06_Render_Different_UI_Based_on_props
│ │ ├── Home.js
│ │ ├── Greeting.js
│ │ ├── index.html
│ │ ├── Welcome.js
│ │ ├── App.js
│ │ └── test
│ │ │ └── test.js
│ ├── 3.2.12_defaultProps
│ │ ├── index.html
│ │ ├── Button.js
│ │ └── test
│ │ │ └── test.js
│ ├── 3.2.02_Access_a_Component_s_props
│ │ ├── index.html
│ │ └── PropsDisplayer.js
│ └── 3.2.03_Pass_props_to_a_Component
│ │ ├── index.html
│ │ └── PropsDisplayer.js
├── 3.4_Random_Color_Picker
│ ├── Button.js
│ └── index.html
└── 3.1_Components_Render_Other_Components
│ ├── index.html
│ ├── NavBar.js
│ ├── AnteaterProfile.js
│ ├── ProfilePage.js
│ └── MainPage.js
├── 7_Additional_React_Basics
├── 7.4_React_Forms
│ ├── 7.4.1_React_Forms
│ │ └── README.md
│ ├── 7.4.7_React_Forms_Recap
│ │ └── README.md
│ ├── 7.4.6_Controlled_vs_Uncontrolled
│ │ ├── Input.js
│ │ ├── index.html
│ │ └── Example.js
│ ├── 7.4.2_Input_onChange
│ │ ├── index.html
│ │ ├── Input.js
│ │ └── Example.js
│ ├── 7.4.5_Update_an_Input_s_Value
│ │ ├── index.html
│ │ └── Example.js
│ ├── 7.4.3_Write_an_Input_Event_Handler
│ │ ├── index.html
│ │ ├── Example.js
│ │ └── Input.js
│ └── 7.4.4_Set_the_Input_s_Initial_State
│ │ ├── index.html
│ │ ├── Example.js
│ │ └── Input.js
├── 7.7_Additional_React_Basics_Quiz
│ └── README.md
├── 7.5_What_are_Uncontrolled_Components
│ └── README.md
├── 7.1_Style
│ ├── 7.1.1_Advanced_React_Techniques
│ │ └── README.md
│ ├── 7.1.2_Inline_Styles
│ │ ├── styleMe.js
│ │ └── index.html
│ ├── 7.1.3_Make_A_Style_Object_Variable
│ │ ├── styleMe.js
│ │ ├── Example.js
│ │ └── index.html
│ ├── 7.1.4_Style_Name_Syntax
│ │ ├── Example.js
│ │ ├── styleMe.js
│ │ └── index.html
│ ├── 7.1.5_Style_Value_Syntax
│ │ ├── Example.js
│ │ ├── styleMe.js
│ │ └── index.html
│ └── 7.1.6_Share_Styles_Across_Multiple_Components
│ │ ├── facebookStyles.js
│ │ ├── index.html
│ │ ├── AttentionGrabber.js
│ │ ├── styles.js
│ │ ├── FacebookColorThief.js
│ │ └── Hume.js
├── 7.2_Container_Components_From_Presentational_Components
│ ├── 7.2.3_Separate_Presentational_Component
│ │ ├── containers
│ │ │ └── GuineaPigsContainer.compiled.js
│ │ └── index.html
│ ├── 7.2.6_Review
│ │ ├── components
│ │ │ └── GuineaPigs.js
│ │ └── index.html
│ ├── 7.2.2_Create_Container_Component
│ │ ├── test
│ │ │ └── test.js
│ │ └── index.html
│ ├── 7.2.5_Remove_Logic_from_Presentational_Component
│ │ ├── components
│ │ │ └── GuineaPigs.js
│ │ └── index.html
│ ├── 7.2.1_Separate_Container_Components_From_Presentational_Components
│ │ └── index.html
│ └── 7.2.4_Render_Presentational_Component_in_Container_Component
│ │ └── index.html
├── 7.3_PropTypes
│ ├── 7.3.1_propTypes
│ │ ├── MessageDisplayer.js
│ │ ├── index.html
│ │ └── BestSeller.js
│ ├── 7.3.2_Apply_PropTypes
│ │ ├── MessageDisplayer.js
│ │ ├── index.html
│ │ └── BestSeller.js
│ ├── 7.3.3_Add_Properties_to_PropTypes
│ │ ├── MessageDisplayer.js
│ │ ├── index.html
│ │ └── BestSeller.js
│ └── 7.3.4_PropTypes_in_Function_Components
│ │ ├── components
│ │ └── GuineaPigs.js
│ │ ├── index.html
│ │ ├── Example.js
│ │ └── test
│ │ └── test.js
└── 7.6_Copycat_Project
│ ├── index.html
│ └── index.css
├── images
└── cover.png
├── 6_Stateless_Component_From_Stateful_Components
├── 6.5_Stateful_and_Stateless_Programming_Patterns
│ └── README.md
├── 6.1_Stateless_Components_From_Stateful_Components
│ ├── 6.1.2_Build_a_Stateful_Component_Class
│ │ ├── Child.js
│ │ ├── Parent.js
│ │ ├── index.html
│ │ └── test
│ │ │ └── test.js
│ ├── 6.1.1_Stateless_Components_Inherit_From_Stateful_Components
│ │ └── README.md
│ ├── 6.1.4_Pass_a_Component_s_State
│ │ ├── Child.js
│ │ ├── index.html
│ │ ├── Parent.js
│ │ └── test
│ │ │ └── test.js
│ ├── 6.1.3_Build_a_Stateless_Component_Class
│ │ ├── Child.js
│ │ ├── Parent.js
│ │ ├── index.html
│ │ └── test
│ │ │ └── test.js
│ └── 6.1.5_Don_t_Update_props
│ │ └── Bad.js
├── 6.3_Child_Components_Update_Their_Siblings_props
│ ├── 6.3.1_Child_Components_Update_Sibling_Components
│ │ └── README.md
│ ├── 6.3.2_One_Sibling_to_Display,_Another_to_Change
│ │ ├── Sibling.js
│ │ └── index.html
│ ├── 6.3.3_Pass_the_Right_props_to_the_Right_Siblings
│ │ ├── Sibling.js
│ │ └── index.html
│ ├── 6.3.4_Display_Information_in_a_Sibling_Component
│ │ ├── index.html
│ │ ├── Sibling.js
│ │ └── test
│ │ │ └── test.js
│ └── 6.3.5_Stateless_Components_Inherit_From_Stateful_Components_Recap
│ │ ├── index.html
│ │ └── Sibling.js
├── 6.4_Video_Player_Project
│ ├── index.html
│ ├── Video.js
│ ├── styles.css
│ └── Menu.js
└── 6.2_Child_Components_Update_Their_Parents_state
│ ├── 6.2.5_Automatic_Binding
│ ├── index.html
│ └── Parent.js
│ ├── 6.2.2_Define_an_Event_Handler
│ ├── index.html
│ ├── Parent.js
│ └── Child.js
│ ├── 6.2.3_Pass_the_Event_Handler
│ ├── index.html
│ ├── Parent.js
│ ├── Child.js
│ └── test
│ │ └── test.js
│ ├── 6.2.4_Receive_the_Event_Handler
│ ├── index.html
│ └── Parent.js
│ └── 6.2.1_Child_Components_Update_Their_Parents_state
│ ├── Step3.js
│ └── Step1.js
└── README.md
/1_JSX/1.4_JSX/README.md:
--------------------------------------------------------------------------------
1 | No code in this section
2 |
--------------------------------------------------------------------------------
/5_Hooks/5.5_React_Hooks/README.md:
--------------------------------------------------------------------------------
1 | No code in this section
2 |
--------------------------------------------------------------------------------
/4_Lifecycle_Methods/4.3_Lifecycle/README.md:
--------------------------------------------------------------------------------
1 | No code in this section
2 |
--------------------------------------------------------------------------------
/1_JSX/1.1_Intro_to_JSX/1.1.01_Why_React/README.md:
--------------------------------------------------------------------------------
1 | No code in this section
2 |
--------------------------------------------------------------------------------
/1_JSX/1.1_Intro_to_JSX/1.1.15_JSX_Recap/README.md:
--------------------------------------------------------------------------------
1 | No code in this section
2 |
--------------------------------------------------------------------------------
/1_JSX/1.2_Advanced_JSX/1.2.16_JSX_Recap/README.md:
--------------------------------------------------------------------------------
1 | No code in this section
2 |
--------------------------------------------------------------------------------
/2_React_Components/2.4_React_Components/README.md:
--------------------------------------------------------------------------------
1 | No code in this section
2 |
--------------------------------------------------------------------------------
/1_JSX/1.1_Intro_to_JSX/1.1.04_What_is_JSX/README.md:
--------------------------------------------------------------------------------
1 | No code in this section
2 |
--------------------------------------------------------------------------------
/1_JSX/1.1_Intro_to_JSX/1.1.14_The_Virtual_DOM/README.md:
--------------------------------------------------------------------------------
1 | No code in this section
2 |
--------------------------------------------------------------------------------
/2_React_Components/2.5_Creating_a_React_App/README.md:
--------------------------------------------------------------------------------
1 | No code in this section
2 |
--------------------------------------------------------------------------------
/1_JSX/1.1_Intro_to_JSX/1.1.05_JSX_Elements/app.js:
--------------------------------------------------------------------------------
1 | const h1 = Hello world
;
2 |
--------------------------------------------------------------------------------
/3_Components_Interacting/3.6_React_Developer_Tools/README.md:
--------------------------------------------------------------------------------
1 | No code in this section
2 |
--------------------------------------------------------------------------------
/3_Components_Interacting/3.3_this.state/3.3.1_State/README.md:
--------------------------------------------------------------------------------
1 | No code in this section
2 |
--------------------------------------------------------------------------------
/3_Components_Interacting/3.5_Components_Interacting/README.md:
--------------------------------------------------------------------------------
1 | No code in this section
2 |
--------------------------------------------------------------------------------
/1_JSX/1.1_Intro_to_JSX/1.1.03_The_Mystery_Revealed/app.js:
--------------------------------------------------------------------------------
1 | const h1 = Hello world ;
2 |
--------------------------------------------------------------------------------
/3_Components_Interacting/3.2_this.props/3.2.01_this.props/README.md:
--------------------------------------------------------------------------------
1 | No code in this section
2 |
--------------------------------------------------------------------------------
/7_Additional_React_Basics/7.4_React_Forms/7.4.1_React_Forms/README.md:
--------------------------------------------------------------------------------
1 | No code in this section
2 |
--------------------------------------------------------------------------------
/7_Additional_React_Basics/7.7_Additional_React_Basics_Quiz/README.md:
--------------------------------------------------------------------------------
1 | No code in this section
2 |
--------------------------------------------------------------------------------
/3_Components_Interacting/3.2_this.props/3.2.13_this.props_Recap/README.md:
--------------------------------------------------------------------------------
1 | No code in this section
2 |
--------------------------------------------------------------------------------
/4_Lifecycle_Methods/4.1_Component_Lifecycle_Methods/4.1.6_Review/README.md:
--------------------------------------------------------------------------------
1 | No code in this section
2 |
--------------------------------------------------------------------------------
/7_Additional_React_Basics/7.4_React_Forms/7.4.7_React_Forms_Recap/README.md:
--------------------------------------------------------------------------------
1 | No code in this section
2 |
--------------------------------------------------------------------------------
/7_Additional_React_Basics/7.5_What_are_Uncontrolled_Components/README.md:
--------------------------------------------------------------------------------
1 | No code in this section
2 |
--------------------------------------------------------------------------------
/1_JSX/1.1_Intro_to_JSX/1.1.02_Hello_World/app.js:
--------------------------------------------------------------------------------
1 | // Hello world
2 | const h1 = Hello world ;
3 |
--------------------------------------------------------------------------------
/2_React_Components/2.1_Your_First_React_Component/2.1.2_Import_React/news.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
--------------------------------------------------------------------------------
/7_Additional_React_Basics/7.1_Style/7.1.1_Advanced_React_Techniques/README.md:
--------------------------------------------------------------------------------
1 | No code in this section
2 |
--------------------------------------------------------------------------------
/1_JSX/1.2_Advanced_JSX/1.2.09_JSX_Conditionals_If_Statements_That_Dont_Work/README.md:
--------------------------------------------------------------------------------
1 | No code in this section
2 |
--------------------------------------------------------------------------------
/2_React_Components/2.2_Components_and_Advanced_JSX/2.2.7_Components_Recap/README.md:
--------------------------------------------------------------------------------
1 | No code in this section
2 |
--------------------------------------------------------------------------------
/3_Components_Interacting/3.3_this.state/3.3.7_Components_Interacting_Recap/README.md:
--------------------------------------------------------------------------------
1 | No code in this section
2 |
--------------------------------------------------------------------------------
/images/cover.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/somekindofwallflower/codecademy-learn-react-2022/main/images/cover.png
--------------------------------------------------------------------------------
/4_Lifecycle_Methods/4.1_Component_Lifecycle_Methods/4.1.1_The_Component_Lifecycle/README.md:
--------------------------------------------------------------------------------
1 | No code in this section
2 |
--------------------------------------------------------------------------------
/1_JSX/1.1_Intro_to_JSX/1.1.06_JSX_Elements_And_Their_Surroundings/app.js:
--------------------------------------------------------------------------------
1 | const myArticle = My article ;
2 |
--------------------------------------------------------------------------------
/1_JSX/1.1_Intro_to_JSX/1.1.07_Attributes_In_JSX/app.js:
--------------------------------------------------------------------------------
1 | const p1 = foo
;
2 | const p2 = bar
;
3 |
--------------------------------------------------------------------------------
/6_Stateless_Component_From_Stateful_Components/6.5_Stateful_and_Stateless_Programming_Patterns/README.md:
--------------------------------------------------------------------------------
1 | No code in this section
2 |
--------------------------------------------------------------------------------
/1_JSX/1.1_Intro_to_JSX/1.1.08_Nested_JSX/app.js:
--------------------------------------------------------------------------------
1 | const myDiv = (
2 |
3 |
Hello world
4 |
5 | );
6 |
--------------------------------------------------------------------------------
/2_React_Components/2.1_Your_First_React_Component/2.1.3_Import_ReactDOM/news.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
--------------------------------------------------------------------------------
/6_Stateless_Component_From_Stateful_Components/6.1_Stateless_Components_From_Stateful_Components/6.1.2_Build_a_Stateful_Component_Class/Child.js:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/1_JSX/1.1_Intro_to_JSX/1.1.12_ReactDOM.render_II/app.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | // Write code here:
5 |
--------------------------------------------------------------------------------
/1_JSX/1.2_Advanced_JSX/1.2.15_React.createElement/app.js:
--------------------------------------------------------------------------------
1 | const greatestDivEver = React.createElement(
2 | "div",
3 | null,
4 | "i am div"
5 | );
6 |
--------------------------------------------------------------------------------
/7_Additional_React_Basics/7.2_Container_Components_From_Presentational_Components/7.2.3_Separate_Presentational_Component/containers/GuineaPigsContainer.compiled.js:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Codecademy_Learn_React
2 | Codecademy - Learn React Course
3 |
4 | https://www.codecademy.com/courses/react-101/
5 |
6 | 
7 |
--------------------------------------------------------------------------------
/6_Stateless_Component_From_Stateful_Components/6.3_Child_Components_Update_Their_Siblings_props/6.3.1_Child_Components_Update_Sibling_Components/README.md:
--------------------------------------------------------------------------------
1 | No code in this section
2 |
--------------------------------------------------------------------------------
/1_JSX/1.3_Animal_Fun_Facts_Project/images/ocean.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/somekindofwallflower/codecademy-learn-react-2022/main/1_JSX/1.3_Animal_Fun_Facts_Project/images/ocean.jpg
--------------------------------------------------------------------------------
/1_JSX/1.3_Animal_Fun_Facts_Project/images/dolphin.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/somekindofwallflower/codecademy-learn-react-2022/main/1_JSX/1.3_Animal_Fun_Facts_Project/images/dolphin.jpg
--------------------------------------------------------------------------------
/1_JSX/1.3_Animal_Fun_Facts_Project/images/lobster.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/somekindofwallflower/codecademy-learn-react-2022/main/1_JSX/1.3_Animal_Fun_Facts_Project/images/lobster.jpg
--------------------------------------------------------------------------------
/1_JSX/1.3_Animal_Fun_Facts_Project/images/starfish.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/somekindofwallflower/codecademy-learn-react-2022/main/1_JSX/1.3_Animal_Fun_Facts_Project/images/starfish.jpg
--------------------------------------------------------------------------------
/6_Stateless_Component_From_Stateful_Components/6.1_Stateless_Components_From_Stateful_Components/6.1.1_Stateless_Components_Inherit_From_Stateful_Components/README.md:
--------------------------------------------------------------------------------
1 | No code in this section
2 |
--------------------------------------------------------------------------------
/2_React_Components/2.1_Your_First_React_Component/2.1.4_Create_a_Component_Class/news.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | class x extends React.Component { }
5 |
--------------------------------------------------------------------------------
/2_React_Components/2.1_Your_First_React_Component/2.1.5_Name_a_Component_Class/news.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | class MyComponentClass extends React.Component { }
5 |
--------------------------------------------------------------------------------
/1_JSX/1.1_Intro_to_JSX/1.1.10_Rendering_JSX/app.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | // Copy code here:
5 | ReactDOM.render(Hello world , document.getElementById('app'));
6 |
--------------------------------------------------------------------------------
/2_React_Components/2.1_Your_First_React_Component/2.1.6_Component_Class_Instructions/news.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | class MyComponentClass extends React.Component { }
5 |
--------------------------------------------------------------------------------
/1_JSX/1.1_Intro_to_JSX/1.1.11_ReactDOM.render_I/app.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | // Write code here:
5 | ReactDOM.render(Render me! , document.getElementById('app'));
6 |
--------------------------------------------------------------------------------
/1_JSX/1.2_Advanced_JSX/1.2.04_Curly_Braces_in_JSX/app.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | // Write code here:
5 | ReactDOM.render(
6 | {2 + 3} ,
7 | document.getElementById('app')
8 | );
9 |
--------------------------------------------------------------------------------
/5_Hooks/5.3_The_Effect_Hook/5.3.6_Rules_of_Hooks/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import Shop from "./Shop";
4 |
5 | ReactDOM.render(
6 | 2 + 3 ,
7 | document.getElementById('app')
8 | );
9 |
--------------------------------------------------------------------------------
/5_Hooks/5.2_The_State_Hook/5.2.6_Arrays_in_State/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import GroceryCart from "./GroceryCart";
4 |
5 | ReactDOM.render(
6 | I AM A BIG DIV
6 | ReactDOM.render(myDiv, document.getElementById('app'));
7 |
--------------------------------------------------------------------------------
/5_Hooks/5.2_The_State_Hook/5.2.3_Initialize_State/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import ColorPicker from "./ColorPicker";
4 |
5 | ReactDOM.render(
6 | Hello world , document.getElementById('app'));
6 |
--------------------------------------------------------------------------------
/3_Components_Interacting/3.2_this.props/3.2.05_Pass_props_From_Component_To_Component/Greeting.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export class Greeting extends React.Component {
4 | render() {
5 | return Hi there, {this.props.name}! ;
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/5_Hooks/5.2_The_State_Hook/5.2.5_Set_From_Previous_State/App.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import QuizNavBar from "./QuizNavBar";
3 | import { questions } from "./dataModel";
4 |
5 | export default function App() {
6 | return Hello world ;
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/5_Hooks/5.2_The_State_Hook/5.2.2_Update_Function_Component_State/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import ColorPicker from "./ColorPicker";
4 |
5 | ReactDOM.render(
6 | {theBestString} ,
8 | document.getElementById('app')
9 | );
10 |
--------------------------------------------------------------------------------
/5_Hooks/5.3_The_Effect_Hook/5.3.7_Separate_Hooks_for_Separate_Effects/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | import SocialNetwork from "./SocialNetwork";
4 |
5 | ReactDOM.render(
6 | 2 + 3 = {2 + 3}
7 | );
8 |
9 | ReactDOM.render(
10 | math,
11 | document.getElementById('app')
12 | );
13 |
--------------------------------------------------------------------------------
/5_Hooks/5.2_The_State_Hook/5.2.9_Lesson_Review/index.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 | // import App from "./Container/AppClass";
4 | import App from "./Container/AppFunction";
5 |
6 | ReactDOM.render(
7 | Hey, my name is {this.props.name}! ;
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/6_Stateless_Component_From_Stateful_Components/6.1_Stateless_Components_From_Stateful_Components/6.1.3_Build_a_Stateless_Component_Class/Child.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 |
3 | export class Child extends Component {
4 | render() {
5 | return Hey, my name is {this.props.name}! ;
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/3_Components_Interacting/3.2_this.props/3.2.07_Put_an_Event_Handler_in_a_Component_Class/Button.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export class Button extends React.Component {
4 | render() {
5 | return (
6 |
7 | Click me!
8 |
9 | );
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/3_Components_Interacting/3.2_this.props/3.2.11_this.props.children/BigButton.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { LilButton } from './LilButton';
3 |
4 | class BigButton extends React.Component {
5 | render() {
6 | console.log(this.props.children);
7 | return Yo I am big ;
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/6_Stateless_Component_From_Stateful_Components/6.1_Stateless_Components_From_Stateful_Components/6.1.5_Don_t_Update_props/Bad.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | class Bad extends React.Component {
4 | render() {
5 | this.props.message = 'yo'; // NOOOOOOOOOOOOOO!!!
6 | return {this.props.message} ;
7 | }
8 | }
9 |
--------------------------------------------------------------------------------
/5_Hooks/5.1_Function_Components/5.1.2_Function_Components_and_Props/Friend.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 |
5 |
6 | export class Friend extends React.Component {
7 | render() {
8 | return Hello world ;
7 | }
8 | }
9 |
10 | // component goes here:
11 |
7 | Click me!
8 |
9 | );
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/3_Components_Interacting/3.2_this.props/3.2.09_Receive_an_Event_Handler_as_a_prop/Button.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export class Button extends React.Component {
4 | render() {
5 | return (
6 |
7 | Click me!
8 |
9 | );
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/1_JSX/1.1_Intro_to_JSX/1.1.13_Passing_a_Variable_to_ReactDOM.render/app.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | // Write code here:
5 | const myList = (
6 |
7 | Learn React
8 | Become a Developer
9 |
10 | )
11 |
12 | ReactDOM.render(myList, document.getElementById('app'));
13 |
--------------------------------------------------------------------------------
/3_Components_Interacting/3.2_this.props/3.2.10_handleEvent_onEvent_and_this.props.onEvent/Button.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export class Button extends React.Component {
4 | render() {
5 | return (
6 |
7 | Click me!
8 |
9 | );
10 | }
11 | }
12 |
--------------------------------------------------------------------------------
/1_JSX/1.2_Advanced_JSX/1.2.07_Variable_Attributes_in_JSX/app.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | const goose = 'https://content.codecademy.com/courses/React/react_photo-goose.jpg';
5 |
6 | // Declare new variable here:
7 | const gooseImg =
3 |
4 |
5 | Welcome to Dan's Blog!
6 |
7 |
8 | Wow I had the tastiest sandwich today. I literally almost freaked out.
9 |
10 |
3 |
I AM JENKINS
4 |
5 |
6 | I LIKE TO SIT
7 |
12 |
Hello world ;
7 | }
8 | }
9 |
10 | ReactDOM.render(
11 | Hello world ;
7 | }
8 | }
9 |
10 | ReactDOM.render(
11 | Hello world ;
7 | }
8 | }
9 |
10 | ReactDOM.render(
11 | Hello world ;
7 | }
8 | }
9 |
10 | ReactDOM.render(
11 | Hello world ;
7 | }
8 | }
9 |
10 | ReactDOM.render(
11 | Hello world ;
7 | }
8 | }
9 |
10 | ReactDOM.render(
11 | Please style me! I am so bland! ;
10 |
11 | ReactDOM.render(
12 | styleMe,
13 | document.getElementById('app')
14 | );
15 |
--------------------------------------------------------------------------------
/1_JSX/1.2_Advanced_JSX/1.2.13_.map_in_JSX/app.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | const people = ['Rowe', 'Prevost', 'Gare'];
5 |
6 | const peopleLis = people.map(person =>
7 | // expression goes here:
8 | {person}
9 | );
10 |
11 | // ReactDOM.render goes here:
12 | ReactDOM.render(, document.getElementById('app'));
13 |
--------------------------------------------------------------------------------
/2_React_Components/2.1_Your_First_React_Component/2.1.6_Component_Class_Instructions/app.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | class MyComponentClass extends React.Component {
5 | render() {
6 | return Hello world ;
7 | }
8 | }
9 |
10 | ReactDOM.render(
11 | Hello world ;
7 | }
8 | }
9 |
10 | ReactDOM.render(
11 |
8 |
Cute Guinea Pigs
9 |
10 |
Hello world ;
7 | }
8 | };
9 |
10 | ReactDOM.render(
11 |
6 |
7 | PI, YALL!
8 |
9 |
10 | {Math.PI.toFixed(20)}
11 |
12 |
Please style me! I am so bland! ;
10 |
11 | ReactDOM.render(
12 | styleMe,
13 | document.getElementById('app')
14 | );
15 |
--------------------------------------------------------------------------------
/1_JSX/1.2_Advanced_JSX/1.2.14_Keys/app.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | const people = ['Rowe', 'Prevost', 'Gare'];
5 |
6 | const peopleLis = people.map((person, i) =>
7 | // expression goes here:
8 | {person}
9 | );
10 |
11 | // ReactDOM.render goes here:
12 | ReactDOM.render(, document.getElementById('app'));
13 |
--------------------------------------------------------------------------------
/2_React_Components/2.1_Your_First_React_Component/2.1.9_Render_A_Component/news.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | class MyComponentClass extends React.Component {
5 | render() {
6 | return Hello world ;
7 | }
8 | }
9 |
10 | // component goes here:
11 | ReactDOM.render(
12 | Hi there, {this.props.firstName} ;
7 | }
8 | }
9 |
10 | ReactDOM.render(
11 |
12 | Hello world
13 |
14 | );
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/7_Additional_React_Basics/7.1_Style/7.1.5_Style_Value_Syntax/Example.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const styles = {
4 | color: 'darkcyan',
5 | background: 'mintcream'
6 | };
7 |
8 | export class StyledClass extends React.Component {
9 | render() {
10 | return (
11 |
12 | Hello world
13 |
14 | );
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/5_Hooks/5.1_Function_Components/5.1.2_Function_Components_and_Props/components/GuineaPigs.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export class GuineaPigs extends React.Component {
4 | render() {
5 | let src = this.props.src;
6 | return (
7 |
8 |
Cute Guinea Pigs
9 |
10 |
12 | Hello world
13 |
14 | );
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/1_JSX/1.3_Animal_Fun_Facts_Project/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
11 |
12 |
13 |
14 |
15 |
16 |
--------------------------------------------------------------------------------
/3_Components_Interacting/3.2_this.props/3.2.06_Render_Different_UI_Based_on_props/Home.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import { Welcome } from './Welcome';
4 |
5 | class Home extends React.Component {
6 | render() {
7 | return
;
14 | }
15 | }
16 |
17 | GO AWAY ;
8 | } else {
9 | return Hi there, {this.props.name}! ;
10 | }
11 | }
12 | }
13 |
--------------------------------------------------------------------------------
/3_Components_Interacting/3.4_Random_Color_Picker/Button.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export class Button extends React.Component {
4 | render() {
5 | return (
6 |
10 | Refresh
11 |
12 | );
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/6_Stateless_Component_From_Stateful_Components/6.1_Stateless_Components_From_Stateful_Components/6.1.2_Build_a_Stateful_Component_Class/Parent.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 |
3 | class Parent extends Component {
4 | constructor(props) {
5 | super(props);
6 | this.state = {
7 | name: "Frarthur"
8 | };
9 | }
10 |
11 | render() {
12 | return
;
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/6_Stateless_Component_From_Stateful_Components/6.1_Stateless_Components_From_Stateful_Components/6.1.3_Build_a_Stateless_Component_Class/Parent.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from "react";
2 |
3 | class Parent extends Component {
4 | constructor(props) {
5 | super(props);
6 | this.state = {
7 | name: "Frarthur"
8 | };
9 | }
10 |
11 | render() {
12 | return
;
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/7_Additional_React_Basics/7.2_Container_Components_From_Presentational_Components/7.2.6_Review/components/GuineaPigs.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export class GuineaPigs extends React.Component {
4 | render() {
5 | let src = this.props.src
6 | return (
7 |
8 |
Cute Guinea Pigs
9 |
10 |
Please style me! I am so bland! ;
12 |
13 | ReactDOM.render(
14 | styleMe,
15 | document.getElementById('app')
16 | );
17 |
--------------------------------------------------------------------------------
/7_Additional_React_Basics/7.1_Style/7.1.4_Style_Name_Syntax/styleMe.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | const styles = {
5 | background: 'lightblue',
6 | color: 'darkred',
7 | marginTop: '100px',
8 | fontSize: '50px',
9 | };
10 |
11 | const styleMe = Please style me! I am so bland! ;
12 |
13 | ReactDOM.render(
14 | styleMe,
15 | document.getElementById('app')
16 | );
17 |
--------------------------------------------------------------------------------
/2_React_Components/2.2_Components_and_Advanced_JSX/2.2.5_Use_this_in_a_Component/app.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | class MyName extends React.Component {
5 | // name property goes here:
6 | get name() {
7 | return 'John';
8 | }
9 |
10 | render() {
11 | return My name is {this.name}. ;
12 | }
13 | }
14 |
15 | ReactDOM.render({this.props.message} ;
7 | }
8 | }
9 |
10 | // This propTypes object should have
11 | // one property for each expected prop:
12 | MessageDisplayer.propTypes = {
13 | message: PropTypes.string
14 | };
15 |
--------------------------------------------------------------------------------
/2_React_Components/2.3_Authorization_Form/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Login
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/4_Lifecycle_Methods/4.2_Social_Network_for_Pets_Project/Directory.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Userlist } from './Userlist';
3 |
4 | export function Directory(props) {
5 | return (
6 |
7 |
User directory
8 | {this.props.message} ;
7 | }
8 | }
9 |
10 | // This propTypes object should have
11 | // one property for each expected prop:
12 | MessageDisplayer.propTypes = {
13 | message: PropTypes.string
14 | };
15 |
--------------------------------------------------------------------------------
/5_Hooks/5.1_Function_Components/5.1.3_Review/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Learn ReactJS
8 |
9 |
10 |
11 | Learn ReactJS
8 |
9 |
10 |
11 | Learn ReactJS
8 |
9 |
10 |
11 | Learn ReactJS
8 |
9 |
10 |
11 |
12 |
7 |
8 |
Learn ReactJS
8 |
9 |
10 |
11 | Learn ReactJS
8 |
9 |
10 |
11 | Random Color
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/5_Hooks/5.2_The_State_Hook/5.2.1_Why_Use_Hooks/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Learn ReactJS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/5_Hooks/5.2_The_State_Hook/5.2.3_Initialize_State/styles.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | height: 100%;
3 | background-color: #ffffff;
4 | text-align: center;
5 | margin: 0;
6 | }
7 |
8 | * {
9 | font-family: Helvetica, Arial, sans-serif;
10 | box-sizing: border-box;
11 | }
12 |
13 | #app {
14 | position: relative;
15 | height: 100%;
16 | width: 100%;
17 | padding: 4px;
18 | }
19 |
20 | div {
21 | padding: 20px 0 0;
22 | height: 100%;
23 | }
24 |
--------------------------------------------------------------------------------
/7_Additional_React_Basics/7.2_Container_Components_From_Presentational_Components/7.2.5_Remove_Logic_from_Presentational_Component/components/GuineaPigs.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export class GuineaPigs extends React.Component {
4 | render() {
5 | let src = this.props.src
6 | return (
7 |
8 |
Cute Guinea Pigs
9 |
10 |
{this.props.message} ;
7 | }
8 | }
9 |
10 | // This propTypes object should have
11 | // one property for each expected prop:
12 | MessageDisplayer.propTypes = {
13 | message: PropTypes.string
14 | };
15 |
--------------------------------------------------------------------------------
/7_Additional_React_Basics/7.3_PropTypes/7.3.4_PropTypes_in_Function_Components/components/GuineaPigs.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | export const GuineaPigs = (props) => {
5 | let src = props.src;
6 | return (
7 |
8 |
Cute Guinea Pigs
9 |
10 |
Learn ReactJS
8 |
9 |
10 |
11 |
12 | Learn ReactJS
8 |
9 |
10 |
11 | Learn ReactJS
8 |
9 |
10 |
11 | Learn ReactJS
8 |
9 |
10 |
11 |
12 | Passing Thoughts
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/1_JSX/1.1_Intro_to_JSX/1.1.11_ReactDOM.render_I/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Learn ReactJS
8 |
9 |
10 |
11 |
12 | PetBook
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/5_Hooks/5.2_The_State_Hook/5.2.5_Set_From_Previous_State/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Learn ReactJS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/5_Hooks/5.2_The_State_Hook/5.2.9_Lesson_Review/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Learn ReactJS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/5_Hooks/5.3_The_Effect_Hook/5.3.5_Fetch_Data/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Learn ReactJS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/5_Hooks/5.3_The_Effect_Hook/5.3.8_Lesson_Review/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Learn ReactJS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/7_Additional_React_Basics/7.6_Copycat_Project/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CopyCat
8 |
9 |
10 |
11 | Learn ReactJS
8 |
9 |
10 |
11 |
12 | Learn ReactJS
8 |
9 |
10 |
11 | Learn ReactJS
8 |
9 |
10 |
11 | Learn ReactJS
8 |
9 |
10 |
11 | Learn ReactJS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/5_Hooks/5.2_The_State_Hook/5.2.4_Use_State_Setter_Outside_of_JSX/styles.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | height: 100%;
3 | background-color: #ffffff;
4 | text-align: center;
5 | margin: 0;
6 | }
7 |
8 | * {
9 | font-family: Helvetica, Arial, sans-serif;
10 | box-sizing: border-box;
11 | }
12 |
13 | #app {
14 | position: relative;
15 | height: 100%;
16 | width: 100%;
17 | padding: 4px;
18 | }
19 |
20 | div {
21 | padding: 20px 0 0;
22 | height: 100%;
23 | }
24 |
--------------------------------------------------------------------------------
/5_Hooks/5.2_The_State_Hook/5.2.6_Arrays_in_State/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Learn ReactJS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/5_Hooks/5.2_The_State_Hook/5.2.7_Objects_in_State/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Learn ReactJS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/5_Hooks/5.3_The_Effect_Hook/5.3.3_Clean_Up_Effects/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Learn ReactJS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/5_Hooks/5.3_The_Effect_Hook/5.3.6_Rules_of_Hooks/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Learn ReactJS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/7_Additional_React_Basics/7.1_Style/7.1.6_Share_Styles_Across_Multiple_Components/facebookStyles.js:
--------------------------------------------------------------------------------
1 | // facebook color palette
2 |
3 | const blue = 'rgb(139, 157, 195)';
4 | const darkBlue = 'rgb(059, 089, 152)';
5 | const lightBlue = 'rgb(223, 227, 238)';
6 | const grey = 'rgb(247, 247, 247)';
7 | const white = 'rgb(255, 255, 255)';
8 |
9 | const colorStyles = {
10 | blue: blue,
11 | darkBlue: darkBlue,
12 | lightBlue: lightBlue,
13 | grey: grey,
14 | white: white
15 | };
16 |
--------------------------------------------------------------------------------
/1_JSX/1.2_Advanced_JSX/1.2.03_JavaScript_In_Your_JSX_In_Your_JavaScript/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Learn ReactJS
8 |
9 |
10 |
11 | Learn ReactJS
8 |
9 |
10 |
11 | Learn ReactJS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/5_Hooks/5.2_The_State_Hook/5.2.2_Update_Function_Component_State/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Learn ReactJS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/6_Stateless_Component_From_Stateful_Components/6.4_Video_Player_Project/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Video Player
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
--------------------------------------------------------------------------------
/7_Additional_React_Basics/7.1_Style/7.1.2_Inline_Styles/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Learn ReactJS
8 |
9 |
10 |
11 |
12 |
8 |
I am an h1.
10 |
11 | );
12 | }
13 | }
14 |
15 | ReactDOM.render(
16 | Learn ReactJS
8 |
9 |
10 |
11 |
12 | Learn ReactJS
8 |
9 |
10 |
11 | Learn ReactJS
8 |
9 |
10 |
11 | Learn ReactJS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/3_Components_Interacting/3.3_this.state/3.3.2_Setting_Initial_State/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Learn ReactJS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/5_Hooks/5.2_The_State_Hook/5.2.5_Set_From_Previous_State/styles.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | height: 100%;
3 | background-color: #ffffff;
4 | text-align: center;
5 | margin: 0;
6 | }
7 |
8 | * {
9 | font-family: Helvetica, Arial, sans-serif;
10 | box-sizing: border-box;
11 | }
12 |
13 | #app {
14 | position: relative;
15 | height: 100%;
16 | width: 100%;
17 | padding: 8px;
18 | }
19 |
20 | nav {
21 | display: flex;
22 | justify-content: space-between;
23 | }
24 |
--------------------------------------------------------------------------------
/5_Hooks/5.2_The_State_Hook/5.2.7_Objects_in_State/styles.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | height: 100%;
3 | background-color: #ffffff;
4 | text-align: left;
5 | margin: 0;
6 | }
7 |
8 | * {
9 | font-family: Helvetica, Arial, sans-serif;
10 | box-sizing: border-box;
11 | }
12 |
13 | #app {
14 | position: relative;
15 | height: 100%;
16 | width: 100%;
17 | padding: 8px;
18 | }
19 |
20 | input {
21 | width: 90%;
22 | max-width: 300px;
23 | margin: 5px 5%;
24 | }
25 |
--------------------------------------------------------------------------------
/5_Hooks/5.3_The_Effect_Hook/5.3.2_Function_Component_Effects/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Learn ReactJS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/7_Additional_React_Basics/7.1_Style/7.1.4_Style_Name_Syntax/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Learn ReactJS
8 |
9 |
10 |
11 |
12 | Learn ReactJS
8 |
9 |
10 |
11 |
12 | Learn ReactJS
8 |
9 |
10 |
11 |
12 | Learn ReactJS
8 |
9 |
10 |
11 |
12 | Learn ReactJS
8 |
9 |
10 |
11 |
12 | Learn ReactJS
8 |
9 |
10 |
11 |
12 | Learn ReactJS
8 |
9 |
10 |
11 | Learn ReactJS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/3_Components_Interacting/3.2_this.props/3.2.07_Put_an_Event_Handler_in_a_Component_Class/Example.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | class Example extends React.Component {
4 | handleEvent() {
5 | alert(`I am an event handler.
6 | If you see this message,
7 | then I have been called.`);
8 | }
9 |
10 | render() {
11 | return (
12 |
13 | Hello world
14 |
15 | );
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/3_Components_Interacting/3.3_this.state/3.3.3_Access_a_Component_s_state/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Learn ReactJS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/5_Hooks/5.2_The_State_Hook/5.2.4_Use_State_Setter_Outside_of_JSX/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Learn ReactJS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/5_Hooks/5.3_The_Effect_Hook/5.3.4_Control_When_Effects_Are_Called/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Learn ReactJS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/6_Stateless_Component_From_Stateful_Components/6.4_Video_Player_Project/Video.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export class Video extends React.Component {
4 | render() {
5 | return (
6 |
7 |
15 | );
16 | }
17 | }
18 |
--------------------------------------------------------------------------------
/7_Additional_React_Basics/7.3_PropTypes/7.3.2_Apply_PropTypes/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Learn ReactJS
8 |
9 |
10 |
11 |
12 | Learn ReactJS
8 |
9 |
10 |
11 |
12 | Learn ReactJS
8 |
9 |
10 |
11 | Learn ReactJS
8 |
9 |
10 |
11 |
12 | AAAAAH! ;
13 | }
14 | }
15 |
16 | ReactDOM.render(
17 | Learn ReactJS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/7_Additional_React_Basics/7.1_Style/7.1.3_Make_A_Style_Object_Variable/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Learn ReactJS
8 |
9 |
10 |
11 |
12 | Learn ReactJS
8 |
9 |
10 |
11 |
12 | Learn ReactJS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/3_Components_Interacting/3.2_this.props/3.2.04_Render_a_Component_s_props/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Learn ReactJS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/3_Components_Interacting/3.2_this.props/3.2.05_Pass_props_From_Component_To_Component/StewDescriber.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export class StewDescriber extends React.Component {
4 | render() {
5 | return (
6 |
7 |
I AM THE STEW DESCRIBER ;
8 | THE WORLD'S GREATEST STEW IS {this.props.stew.toUpperCase()}!
9 | HERE'S MY DESCRIPTION: IT'S MAD TASTY
10 |
11 | );
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/3_Components_Interacting/3.2_this.props/3.2.06_Render_Different_UI_Based_on_props/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Learn ReactJS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/3_Components_Interacting/3.2_this.props/3.2.08_Pass_an_Event_Handler_as_a_prop/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Learn ReactJS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/7_Additional_React_Basics/7.3_PropTypes/7.3.3_Add_Properties_to_PropTypes/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Learn ReactJS
8 |
9 |
10 |
11 |
12 | Learn ReactJS
8 |
9 |
10 |
11 |
12 | Learn ReactJS
8 |
9 |
10 |
11 |
12 | Learn ReactJS
8 |
9 |
10 |
11 |
12 | Learn ReactJS
8 |
9 |
10 |
11 |
12 | Learn ReactJS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/3_Components_Interacting/3.2_this.props/3.2.02_Access_a_Component_s_props/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Learn ReactJS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/3_Components_Interacting/3.2_this.props/3.2.03_Pass_props_to_a_Component/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Learn ReactJS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/3_Components_Interacting/3.2_this.props/3.2.05_Pass_props_From_Component_To_Component/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Learn ReactJS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/3_Components_Interacting/3.2_this.props/3.2.09_Receive_an_Event_Handler_as_a_prop/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Learn ReactJS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/7_Additional_React_Basics/7.1_Style/7.1.6_Share_Styles_Across_Multiple_Components/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Learn ReactJS
8 |
9 |
10 |
11 |
12 | Learn ReactJS
8 |
9 |
10 |
11 |
12 | Learn ReactJS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/3_Components_Interacting/3.2_this.props/3.2.07_Put_an_Event_Handler_in_a_Component_Class/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Learn ReactJS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/3_Components_Interacting/3.2_this.props/3.2.10_handleEvent_onEvent_and_this.props.onEvent/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Learn ReactJS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/3_Components_Interacting/3.2_this.props/3.2.11_this.props.children/List.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export class List extends React.Component {
4 | render() {
5 | let titleText = `Favorite ${this.props.type}`;
6 | if (this.props.children instanceof Array) {
7 | titleText += 's';
8 | }
9 | return (
10 |
11 |
{titleText}
12 |
13 |
Learn ReactJS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/3_Components_Interacting/3.3_this.state/3.3.6_this.setState_Automatically_Calls_render/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Learn ReactJS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/7_Additional_React_Basics/7.1_Style/7.1.6_Share_Styles_Across_Multiple_Components/AttentionGrabber.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { styles } from './styles';
3 |
4 | const h1Style = {
5 | color: styles.color,
6 | fontSize: styles.fontSize,
7 | fontFamily: styles.fontFamily,
8 | padding: styles.padding,
9 | margin: 0,
10 | };
11 |
12 | export class AttentionGrabber extends React.Component {
13 | render() {
14 | return WELCOME TO MY HOMEPAGE! ;
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/2_React_Components/2.2_Components_and_Advanced_JSX/2.2.2_Use_a_Variable_Attribute_in_a_Component/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Learn ReactJS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/2_React_Components/2.2_Components_and_Advanced_JSX/2.2.4_Use_a_Conditional_in_a_Render_Function/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Learn ReactJS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/2_React_Components/2.2_Components_and_Advanced_JSX/2.2.6_Use_an_Event_Listener_in_a_Component/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Learn ReactJS
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/7_Additional_React_Basics/7.3_PropTypes/7.3.4_PropTypes_in_Function_Components/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Learn ReactJS
8 |
9 |
10 |
11 |
9 | {page}
10 |
11 | )
12 | });
13 |
14 | return {navLinks} ;
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/3_Components_Interacting/3.2_this.props/3.2.12_defaultProps/Button.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | class Button extends React.Component {
5 | render() {
6 | return (
7 |
8 | {this.props.text}
9 |
10 | );
11 | }
12 | }
13 |
14 | // defaultProps goes here:
15 | Button.defaultProps = { text: 'I am a button' };
16 |
17 | ReactDOM.render(
18 | {this.state.date.toLocaleTimeString()}
13 | }
14 | }
15 |
16 | ReactDOM.render(Hello world ;
5 | }
6 | }
7 |
8 | // The same component class, written as a stateless functional component:
9 | export const MyComponentClass = () => {
10 | return Hello world ;
11 | }
12 |
13 | // Works the same either way:
14 | ReactDOM.render(
15 | Learn ReactJS
8 |
9 |
10 |
11 | Learn ReactJS
8 |
9 |
10 |
11 |
12 | Learn ReactJS
8 |
9 |
10 |
11 |
11 | {items.map((item, index) => (
12 |
13 | {item}
14 |
15 | ))}
16 |
17 | );
18 | }
19 |
--------------------------------------------------------------------------------
/6_Stateless_Component_From_Stateful_Components/6.2_Child_Components_Update_Their_Parents_state/6.2.2_Define_an_Event_Handler/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Learn ReactJS
8 |
9 |
10 |
11 |
12 | Learn ReactJS
8 |
9 |
10 |
11 |
12 | Learn ReactJS
8 |
9 |
10 |
11 |
12 |
14 | {this.state.title}
15 |
16 | );
17 | }
18 | }
19 |
20 | ReactDOM.render({this.state.title} `'
12 | ).to.equal(wrapper.find('h1').text());
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/5_Hooks/5.1_Function_Components/5.1.1_Stateless_Functional_Components/Example.js:
--------------------------------------------------------------------------------
1 | // A component class written in the usual way:
2 | export class MyComponentClass extends React.Component {
3 | render() {
4 | return Hello world ;
5 | }
6 | }
7 |
8 | // The same component class, written as a stateless functional component:
9 | export const MyComponentClass = () => {
10 | return Hello world ;
11 | }
12 |
13 | // Works the same either way:
14 | ReactDOM.render(
15 | Hello world ;
5 | }
6 | }
7 |
8 | // The same component class, written as a stateless functional component:
9 | export const MyComponentClass = () => {
10 | return Hello world ;
11 | }
12 |
13 | // Works the same either way:
14 | ReactDOM.render(
15 | Learn ReactJS
8 |
9 |
10 |
11 |
12 |
8 |
Hey, my name is Frarthur!
9 | Don't you think Frarthur is the prettiest name ever?
10 | Sure am glad that my parents picked Frarthur!
11 |
12 | );
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/6_Stateless_Component_From_Stateful_Components/6.3_Child_Components_Update_Their_Siblings_props/6.3.3_Pass_the_Right_props_to_the_Right_Siblings/Sibling.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export class Sibling extends React.Component {
4 | render() {
5 |
6 | return (
7 |
8 |
Hey, my name is Frarthur!
9 | Don't you think Frarthur is the prettiest name ever?
10 | Sure am glad that my parents picked Frarthur!
11 |
12 | );
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/1_JSX/1.2_Advanced_JSX/1.2.10_JSX_Conditionals_If_Statements_That_Do_Work/if.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | let message;
5 |
6 | if (user.age >= drinkingAge) {
7 | message = (
8 |
9 | Hey, check out this alcoholic beverage!
10 |
11 | );
12 | } else {
13 | message = (
14 |
15 | Hey, check out these earrings I got at Claire's!
16 |
17 | );
18 | }
19 |
20 | ReactDOM.render(
21 | message,
22 | document.getElementById('app')
23 | );
24 |
--------------------------------------------------------------------------------
/3_Components_Interacting/3.3_this.state/3.3.3_Access_a_Component_s_state/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | class App extends React.Component {
5 | // constructor method begins here:
6 | constructor(props) {
7 | super(props);
8 | this.state = { title: 'Best App' };
9 | }
10 |
11 | render() {
12 | return (
13 |
14 | {this.state.title}
15 |
16 | );
17 | }
18 | }
19 |
20 | ReactDOM.render({this.state.title} `'
12 | ).to.equal(wrapper.find('h1').text());
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/6_Stateless_Component_From_Stateful_Components/6.1_Stateless_Components_From_Stateful_Components/6.1.2_Build_a_Stateful_Component_Class/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Learn ReactJS
8 |
9 |
10 |
11 |
12 | Learn ReactJS
8 |
9 |
10 |
11 |
12 | Learn ReactJS
8 |
9 |
10 |
11 | Today I am going to {task}! ;
14 | }
15 | }
16 |
17 | ReactDOM.render(
18 | Learn ReactJS
8 |
9 |
10 |
11 |
12 | Learn ReactJS
8 |
9 |
10 |
11 |
12 | Learn ReactJS
8 |
9 |
10 |
11 |
12 | Learn ReactJS
8 |
9 |
10 |
11 |
8 |
I am an h1.
13 |
14 | );
15 | }
16 | }
17 |
18 | ReactDOM.render(
19 | Learn ReactJS
8 |
9 |
10 |
11 |
7 |
Annie the Anteater
8 |
9 |
10 | "I don't just eat ants, ants are more like a lifestyle for me." - Annie
11 |
12 |
Learn ReactJS
8 |
9 |
10 |
11 |
8 |
Hey, my name is {name}!
9 | Don't you think {name} is the prettiest name ever?
10 | Sure am glad that my parents picked {name}!
11 |
12 | );
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/6_Stateless_Component_From_Stateful_Components/6.3_Child_Components_Update_Their_Siblings_props/6.3.5_Stateless_Components_Inherit_From_Stateful_Components_Recap/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Learn ReactJS
8 |
9 |
10 |
11 |
12 |
10 |
CHECK OUT MY PROPS OBJECT
11 | {stringProps}
12 |
13 | );
14 | }
15 | }
16 |
17 | // ReactDOM.render goes here:
18 | ReactDOM.render(
8 |
Hey, my name is {name}!
9 | Don't you think {name} is the prettiest name ever?
10 | Sure am glad that my parents picked {name}!
11 |
12 | );
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/3_Components_Interacting/3.2_this.props/3.2.03_Pass_props_to_a_Component/PropsDisplayer.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | class PropsDisplayer extends React.Component {
5 | render() {
6 | const stringProps = JSON.stringify(this.props);
7 |
8 | return (
9 |
10 |
CHECK OUT MY PROPS OBJECT
11 | {stringProps}
12 |
13 | );
14 | }
15 | }
16 |
17 | // ReactDOM.render goes here:
18 | ReactDOM.render(
12 |
Use {name} input field below to rename this page!
13 |
setName(target.value)}
15 | value={name}
16 | type='text' />
17 |
12 |
Use {name} input field below to rename this page!
13 |
setName(target.value)}
15 | value={name}
16 | type='text' />
17 |
16 |
You clicked {count} times
17 |
18 | Click me
19 |
20 |
8 | hello sir it is truly great to meet you here on the web
9 |
10 | );
11 | } else {
12 | return (
13 |
14 | WELCOME "2" MY WEB SITE BABYYY!!!!!
15 |
16 | );
17 | }
18 | }
19 | }
20 |
--------------------------------------------------------------------------------
/5_Hooks/5.2_The_State_Hook/5.2.1_Why_Use_Hooks/Presentational/TasksList.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export default function TasksList({ allTasks, handleDelete }) {
4 | return (
5 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/5_Hooks/5.2_The_State_Hook/5.2.9_Lesson_Review/Presentational/TasksList.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export default function TasksList({ allTasks, handleDelete }) {
4 | return (
5 |
16 | );
17 | }
18 |
--------------------------------------------------------------------------------
/5_Hooks/5.3_The_Effect_Hook/5.3.6_Rules_of_Hooks/styles.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | height: 100%;
3 | background-color: #ffffff;
4 | text-align: center;
5 | margin: 0;
6 | }
7 |
8 | * {
9 | font-family: Helvetica, Arial, sans-serif;
10 | box-sizing: border-box;
11 | }
12 |
13 | #app {
14 | position: relative;
15 | height: 100%;
16 | width: 100%;
17 | padding: 8px;
18 | }
19 |
20 |
21 | h1 {
22 | margin: 8px 0;
23 | }
24 |
25 | ul {
26 | list-style: none;
27 | text-align: center;
28 | }
29 |
30 | ul {
31 | padding: 0;
32 | }
33 |
34 | li {
35 | border-radius: 5px 2px;
36 | margin: 8px 0;
37 | }
38 |
--------------------------------------------------------------------------------
/7_Additional_React_Basics/7.4_React_Forms/7.4.2_Input_onChange/Example.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export class Example extends React.Component {
4 | constructor(props) {
5 | super(props);
6 |
7 | this.state = { userInput: '' };
8 |
9 | this.handleChange = this.handleChange.bind(this);
10 | }
11 |
12 | handleChange(e) {
13 | this.setState({
14 | userInput: e.target.value
15 | });
16 | }
17 |
18 | render() {
19 | return (
20 | Tonight I'm going {task} ;
16 | }
17 | }
18 |
19 | ReactDOM.render(
20 |
9 |
10 | Hullo and, "Welcome to The Newzz," "On Line!"
11 |
12 |
13 |
14 | Latest: where is my phone?
15 |
16 |
12 | Click Me!
13 |
14 | );
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/7_Additional_React_Basics/7.1_Style/7.1.6_Share_Styles_Across_Multiple_Components/FacebookColorThief.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import { colorStyles } from './facebookStyles';
4 |
5 | let divStyle = {
6 | backgroundColor: styles.darkBlue,
7 | color: styles.white
8 | };
9 |
10 | export class Wow extends React.Component {
11 | render() {
12 | return (
13 |
14 | Wow, I stole these colors from Facebook!
15 |
16 | );
17 | }
18 | }
19 |
20 | ReactDOM.render(
21 |
9 |
My Favorite Foods
10 |
11 | Sushi Burrito
12 | Rhubarb Pie
13 | { !judgmental && Nacho Cheez Straight Out The Jar }
14 | Broiled Grapefruit
15 |
16 |
Document Clicks: {clickCount}
20 | );
21 | }
22 |
--------------------------------------------------------------------------------
/7_Additional_React_Basics/7.4_React_Forms/7.4.3_Write_an_Input_Event_Handler/Example.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export class Example extends React.Component {
4 | constructor(props) {
5 | super(props);
6 |
7 | this.state = { userInput: '' };
8 |
9 | this.handleChange = this.handleChange.bind(this);
10 | }
11 |
12 | handleChange(e) {
13 | this.setState({
14 | userInput: e.target.value
15 | });
16 | }
17 |
18 | render() {
19 | return (
20 |
9 |
10 |
All About Me!
11 |
I like movies and blah blah blah blah blah
12 |
13 |
` should return `Hey, my name is {this.props.name}! `.'
12 | ).to.match(/< *h1 *>Hey,? +my +name +is +deg[\!\.]?< *\/ *h1 *>/);
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/4_Lifecycle_Methods/4.1_Component_Lifecycle_Methods/4.1.4_componentWillUnmount/Clock.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export class Clock extends React.Component {
4 | constructor(props) {
5 | super(props);
6 | this.state = { date: new Date() };
7 | }
8 | render() {
9 | return {this.state.date.toLocaleTimeString()}
;
10 | }
11 | componentDidMount() {
12 | const oneSecond = 1000;
13 | this.intervalID = setInterval(() => {
14 | this.setState({ date: new Date() });
15 | }, oneSecond);
16 | }
17 |
18 | componentWillUnmount() {
19 | clearInterval(this.intervalID);
20 | }
21 | }
22 |
--------------------------------------------------------------------------------
/1_JSX/1.2_Advanced_JSX/1.2.08_Event_Listeners_in_JSX/app.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | function makeDoggy(e) {
5 | // Call this extremely useful function on an
9 | Title:
10 | {this.props.title}
11 |
14 | {this.props.author}
15 |
18 | {this.props.weeksOnList}
19 |
20 |
21 | );
22 | }
23 | }
24 |
25 | BestSeller.propTypes = {};
26 |
--------------------------------------------------------------------------------
/7_Additional_React_Basics/7.3_PropTypes/7.3.2_Apply_PropTypes/BestSeller.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | export class BestSeller extends React.Component {
5 | render() {
6 | return (
7 |
8 | Title:
9 | {this.props.title}
10 |
13 | {this.props.author}
14 |
17 | {this.props.weeksOnList}
18 |
19 |
20 | );
21 | }
22 | }
23 |
24 | BestSeller.propTypes = {};
25 |
--------------------------------------------------------------------------------
/2_React_Components/2.2_Components_and_Advanced_JSX/2.2.2_Use_a_Variable_Attribute_in_a_Component/app.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import ReactDOM from "react-dom";
3 |
4 |
5 | const owl = {
6 | title: 'Excellent Owl',
7 | src: 'https://content.codecademy.com/courses/React/react_photo-owl.jpg'
8 | };
9 |
10 | // Component class starts here:
11 | class Owl extends React.Component {
12 | render() {
13 | return (
14 |
15 |
{owl.title}
16 |
17 |
`'s `onClick` attribute should be `{this.props.onClick}`.").to.eql(wrapper.instance().handleClick);
12 | });
13 | });
14 |
--------------------------------------------------------------------------------
/5_Hooks/5.2_The_State_Hook/5.2.6_Arrays_in_State/test/test.js:
--------------------------------------------------------------------------------
1 | let shallow = require('enzyme/shallow'),
2 | appModule = require('../app'),
3 | components = appModule.__ReactComponents,
4 | TestedComponent = components[0];
5 |
6 | describe('', function () {
7 | it("The `'s `onClick` attribute should be `{this.props.onClick}`.").to.eql(wrapper.instance().handleClick);
12 | });
13 | });
14 |
--------------------------------------------------------------------------------
/5_Hooks/5.3_The_Effect_Hook/5.3.2_Function_Component_Effects/test/test.js:
--------------------------------------------------------------------------------
1 | let shallow = require('enzyme/shallow'),
2 | appModule = require('../app'),
3 | components = appModule.__ReactComponents,
4 | TestedComponent = components[0];
5 |
6 | describe('', function () {
7 | it("The {this.state.date.toLocaleTimeString()}
;
12 | }
13 |
14 | componentDidMount() {
15 | // Paste your code here.
16 | const oneSecond = 1000;
17 | setInterval(() => {
18 | this.setState({ date: new Date() });
19 | }, oneSecond);
20 | }
21 | }
22 |
23 | ReactDOM.render(` component?').to.be.ok;
9 |
10 | let wrapper = shallow(` should return `
9 |
Welcome to Anteater Towne!!!
10 |
11 |
12 | To view more anteater profiles just like this one, sign up for an account!
13 |
14 |
` component?').to.be.ok;
9 |
10 | let wrapper = shallow(` should return `
9 |
10 | Sachiko M
11 | Harvey Sid Fisher
12 |
13 |
14 | Nora the Piano Cat
15 |
16 |
17 | );
18 | }
19 | }
20 |
21 | ReactDOM.render(
22 |
14 |
I am an h1.
19 |
20 | );
21 | }
22 | }
23 |
24 | ReactDOM.render(
25 |
9 |
10 | Hullo and, "Welcome to The Newzz," "On Line!"
11 |
12 |
13 |
14 | Latest newzz: where is my phone?
15 |
16 |
15 |
16 |
THANK YOU FOR VISITING MY HOMEPAGE!
17 |
Time: {time}
22 |
9 |
WELCOME 2 MY SITE WHERE I DESCRIBE THINGS!!
10 | Today I will be describing stews! Tomorrow, who knows! Life is a journey
11 | Don't forget to clap back in the comments
13 |
14 | );
15 | }
16 | }
17 |
18 | ReactDOM.render(
19 |
9 |
10 | What is important now is to recover our senses.
11 |
12 |
13 |
15 | Susan Sontag
16 |
17 |
18 |
19 | );
20 | }
21 | }
22 |
23 | ReactDOM.render(
14 |
Cute Red Panda
15 |
19 |
12 |
Selected color: {color}
13 | {colorNames.map((colorName) => (
14 |
setColor(colorName)}
16 | key={colorName}>
17 | {colorName}
18 |
19 | ))}
20 |
16 | {this.props.usernames.map((username) => (
17 |
18 |
19 | @{username}
20 |
21 |
22 | ))}
23 |
24 | );
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/7_Additional_React_Basics/7.3_PropTypes/7.3.4_PropTypes_in_Function_Components/Example.js:
--------------------------------------------------------------------------------
1 | // Normal way to display a prop:
2 | export class MyComponentClass extends React.Component {
3 | render() {
4 | return {this.props.title} ;
5 | }
6 | }
7 |
8 | // Functional component way to display a prop:
9 | export const MyComponentClass = (props) => {
10 | return {props.title} ;
11 | }
12 |
13 | // Normal way to display a prop using a variable:
14 | export class MyComponentClass extends React.component {
15 | render() {
16 | let title = this.props.title;
17 | return {title} ;
18 | }
19 | }
20 |
21 | // Functional component way to display a prop using a variable:
22 | export const MyComponentClass = (props) => {
23 | let title = props.title;
24 | return {title} ;
25 | }
26 |
--------------------------------------------------------------------------------
/7_Additional_React_Basics/7.3_PropTypes/7.3.4_PropTypes_in_Function_Components/test/test.js:
--------------------------------------------------------------------------------
1 | let TestedComponent = require('../components/GuineaPigs').GuineaPigs,
2 | React = require('react');
3 |
4 | describe('', function () {
5 | it('', function () {
6 | let pT = TestedComponent.propTypes;
7 |
8 | {
9 | const message =
10 | '`GuineaPigs` should have a property with a name of `propTypes` and a value of an object.';
11 | expect(pT, message).to.exist;
12 | expect(typeof pT, message).to.equal('object');
13 | }
14 |
15 | expect(
16 | pT && pT.src,
17 | "`GuineaPigs`'s `propTypes` object should have a property of `src: React.PropTypes.string.isRequired`."
18 | ).to.equal(React.PropTypes.string.isRequired);
19 | });
20 | });
21 |
--------------------------------------------------------------------------------
/6_Stateless_Component_From_Stateful_Components/6.4_Video_Player_Project/Menu.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export class Menu extends React.Component {
4 | constructor(props) {
5 | super(props);
6 | this.handleClick = this.handleClick.bind(this);
7 | }
8 |
9 | handleClick(e) {
10 | const text = e.target.value;
11 | this.props.chooseVideo(text);
12 | }
13 |
14 | render() {
15 | return (
16 |
22 | );
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/7_Additional_React_Basics/7.3_PropTypes/7.3.3_Add_Properties_to_PropTypes/BestSeller.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import PropTypes from 'prop-types';
3 |
4 | export class BestSeller extends React.Component {
5 | render() {
6 | return (
7 |
8 | Title:
9 | {this.props.title}
10 |
13 | {this.props.author}
14 |
17 | {this.props.weeksOnList}
18 |
19 |
20 | );
21 | }
22 | }
23 |
24 | BestSeller.propTypes = {
25 | title: PropTypes.string.isRequired,
26 | author: PropTypes.string.isRequired,
27 | weeksOnList: PropTypes.number.isRequired
28 | };
29 |
--------------------------------------------------------------------------------
/2_React_Components/2.2_Components_and_Advanced_JSX/2.2.1_Use_Multiline_JSX_in_a_Component/QuoteMaker.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | class QuoteMaker extends React.Component {
5 | render() {
6 | return (
7 |
8 |
9 | The world is full of objects, more or less interesting; I do not wish to add any more.
10 |
11 |
12 |
14 | Douglas Huebler
15 |
16 |
17 |
18 | );
19 | }
20 | };
21 |
22 | ReactDOM.render(
23 |
7 |
8 | Hey my name is {this.props.name}!
9 |
10 |
11 |
12 | Frarthur
13 |
14 |
15 |
16 | Gromulus
17 |
18 |
19 |
20 | Thinkpiece
21 |
22 |
23 |
24 | );
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/6_Stateless_Component_From_Stateful_Components/6.2_Child_Components_Update_Their_Parents_state/6.2.3_Pass_the_Event_Handler/Child.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | export class Child extends React.Component {
4 | render() {
5 | return (
6 |
7 |
8 | Hey my name is {this.props.name}!
9 |
10 |
11 |
12 | Frarthur
13 |
14 |
15 |
16 | Gromulus
17 |
18 |
19 |
20 | Thinkpiece
21 |
22 |
23 |
24 | );
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/3_Components_Interacting/3.3_this.state/3.3.5_Call_this.setState_from_Another_Function/Mood.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | class Mood extends React.Component {
5 | constructor(props) {
6 | super(props);
7 | this.state = { mood: 'good' };
8 | this.toggleMood = this.toggleMood.bind(this);
9 | }
10 |
11 | toggleMood() {
12 | const newMood = this.state.mood == 'good' ? 'bad' : 'good';
13 | this.setState({ mood: newMood });
14 | }
15 |
16 | render() {
17 | return (
18 |
19 |
I'm feeling {this.state.mood}!
20 |
21 | Click Me
22 |
23 |
24 | );
25 | }
26 | }
27 |
28 | ReactDOM.render(
19 |
I'm feeling {this.state.mood}!
20 |
21 | Click Me
22 |
23 |
24 | );
25 | }
26 | }
27 |
28 | ReactDOM.render(
22 |
Use the input field below to rename this page!
23 |
this.setState({ name: target.value })}
25 | value={this.state.name}
26 | type='text' />
27 |
22 |
Use the input field below to rename this page!
23 |
this.setState({ name: target.value })}
25 | value={this.state.name}
26 | type='text' />
27 |
12 |
The color is {color}
13 |
setColor('Aquamarine')}>Aquamarine
14 |
setColor('BlueViolet')}>BlueViolet
15 |
setColor('Chartreuse')}>Chartreuse
16 |
setColor('CornflowerBlue')}>CornflowerBlue
17 |
20 |
I am an h1.
25 |
26 | );
27 | }
28 | }
29 |
30 | ReactDOM.render(
31 | Loading...
` instead of trying to map over `undefined` data',
16 | ).to.be.true;
17 | }
18 | expect(
19 | wrapper.find('p'),
20 | '`` element before the data has loaded',
21 | ).to.have.lengthOf(1);
22 | });
23 | });
24 |
--------------------------------------------------------------------------------
/6_Stateless_Component_From_Stateful_Components/6.2_Child_Components_Update_Their_Parents_state/6.2.3_Pass_the_Event_Handler/test/test.js:
--------------------------------------------------------------------------------
1 | let shallow = require('enzyme/shallow'),
2 | appModule = require('../Parent'),
3 | components = appModule.__ReactComponents,
4 | TestedComponent = components[0];
5 |
6 | describe('', function () {
7 | it('', function () {
8 | let wrapper = shallow(` should have a `changeName()` method.'
13 | ).to.equal('function');
14 |
15 | wrapper.instance().changeName('Glornald');
16 | expect(
17 | wrapper.state(),
18 | "``'s `changeName()` method should have a `newName` parameter. It should call `this.setState({ name: newName })`."
19 | ).to.eql({ name: 'Glornald' });
20 | });
21 | });
22 |
--------------------------------------------------------------------------------
/5_Hooks/5.2_The_State_Hook/5.2.1_Why_Use_Hooks/Presentational/NewTask.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export default function NewTask({ newTask, handleChange, handleSubmit }) {
4 | return (
5 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/5_Hooks/5.2_The_State_Hook/5.2.9_Lesson_Review/Presentational/NewTask.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 |
3 | export default function NewTask({ newTask, handleChange, handleSubmit }) {
4 | return (
5 |
24 | );
25 | }
26 |
--------------------------------------------------------------------------------
/5_Hooks/5.3_The_Effect_Hook/5.3.7_Separate_Hooks_for_Separate_Effects/styles.css:
--------------------------------------------------------------------------------
1 | html, body {
2 | height: 100%;
3 | background-color: #ffffff;
4 | text-align: center;
5 | margin: 0;
6 | }
7 |
8 | * {
9 | font-family: Helvetica, Arial, sans-serif;
10 | box-sizing: border-box;
11 | }
12 |
13 | #app {
14 | padding: 8px;
15 | }
16 |
17 | .content {
18 | display: flex;
19 | justify-content: space-evenly;
20 | overflow: hidden;
21 | }
22 |
23 | section {
24 | overflow: scroll;
25 | max-height: 80vh;
26 | padding: 0 40px 0;
27 | margin: 20px;
28 | }
29 |
30 | ul {
31 | list-style: none;
32 | position: relative;
33 | padding: 0;
34 | margin: 0;
35 | }
36 |
37 | li {
38 | padding-left: 1.5em;
39 | }
40 |
41 | li:before {
42 | position: absolute;
43 | content: "•";
44 | color: green;
45 | left: 0;
46 | }
47 |
48 | li.offline:before {
49 | color: red;
50 | }
51 |
--------------------------------------------------------------------------------
/3_Components_Interacting/3.3_this.state/3.3.5_Call_this.setState_from_Another_Function/Toggle.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | const green = '#39D1B4';
5 | const yellow = '#FFD712';
6 |
7 | class Toggle extends React.Component {
8 | constructor(props) {
9 | super(props)
10 | this.state = { color: green }
11 | this.changeColor = this.changeColor.bind(this);
12 | }
13 |
14 | changeColor() {
15 | const newColor = this.state.color == green ? yellow : green;
16 | this.setState({ color: newColor });
17 | }
18 |
19 | render() {
20 | return (
21 |
22 |
23 | Change color
24 |
25 |
26 | );
27 | }
28 | }
29 |
30 | ReactDOM.render(
22 |
23 | Change color
24 |
25 |
26 | );
27 | }
28 | }
29 |
30 | ReactDOM.render(
4 | 
;
9 | }
10 | }
11 |
--------------------------------------------------------------------------------
/2_React_Components/2.1_Your_First_React_Component/2.1.8_Create_a_Component_Instance/news.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 |
4 | class MyComponentClass extends React.Component {
5 | render() {
6 | return 
5 | 
9 | 
13 | 
17 | );
18 |
19 | ReactDOM.render(kitty, document.getElementById('app'));
20 |
--------------------------------------------------------------------------------
/5_Hooks/5.2_The_State_Hook/5.2.1_Why_Use_Hooks/test/test.js:
--------------------------------------------------------------------------------
1 | let shallow = require('enzyme/shallow'),
2 | appModule = require('../app'),
3 | components = appModule.__ReactComponents,
4 | TestedComponent = components[0];
5 |
6 | describe('', function () {
7 | it("The should have an onClick attribute.", function () {
8 | let wrapper = shallow(