├── 01_Day_JavaScript_Refresher └── 01_javascript_refresher.md ├── 02_Day_Introduction_to_React └── 02_introduction_to_react.md ├── 03_Day_Setting_Up ├── 03_setting_up.md └── 03_setting_up_boilerplate │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ └── index.html │ ├── src │ ├── images │ │ ├── asabeneh.jpg │ │ ├── css_logo.png │ │ ├── html_logo.png │ │ └── react_logo.png │ ├── index.js │ └── math.js │ └── yarn.lock ├── 04_Day_Components ├── 04_components.md └── 04_components_boilerplate │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ └── index.html │ ├── src │ ├── images │ │ ├── asabeneh.jpg │ │ ├── css_logo.png │ │ ├── html_logo.png │ │ ├── js_logo.png │ │ └── react_logo.png │ └── index.js │ └── yarn.lock ├── 05_Day_Props ├── 05_props.md └── 05_props_boilerplate │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ └── index.html │ ├── src │ ├── images │ │ ├── asabeneh.jpg │ │ ├── css_logo.png │ │ ├── html_logo.png │ │ ├── js_logo.png │ │ └── react_logo.png │ └── index.js │ └── yarn.lock ├── 06_Day_Map_List_Keys ├── 06_map_list_keys.md └── 06_map_list_keys_boilerplate │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ └── index.html │ ├── src │ ├── data │ │ ├── countries.js │ │ └── ten_most_highest_populations.js │ ├── images │ │ ├── asabeneh.jpg │ │ ├── css_logo.png │ │ ├── html_logo.png │ │ ├── js_logo.png │ │ └── react_logo.png │ └── index.js │ └── yarn.lock ├── 07_Day_Class_Components ├── 07_class_based_components_boilerplate │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ └── index.html │ ├── src │ │ ├── data │ │ │ ├── countries.js │ │ │ └── ten_most_highest_populations.js │ │ ├── images │ │ │ ├── asabeneh.jpg │ │ │ ├── css_logo.png │ │ │ ├── html_logo.png │ │ │ ├── js_logo.png │ │ │ └── react_logo.png │ │ └── index.js │ └── yarn.lock └── 07_class_components.md ├── 08_Day_States ├── 08_states.md └── 08_states_boilerplate │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ └── index.html │ ├── src │ ├── data │ │ ├── countries.js │ │ └── ten_most_highest_populations.js │ ├── images │ │ ├── asabeneh.jpg │ │ ├── css_logo.png │ │ ├── html_logo.png │ │ ├── js_logo.png │ │ └── react_logo.png │ └── index.js │ └── yarn.lock ├── 09_Day_Conditional_Rendering ├── 09_conditional_rendering.md └── 09_conditional_rendering_boilerplate │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ └── index.html │ ├── src │ ├── data │ │ ├── countries.js │ │ └── ten_most_highest_populations.js │ ├── images │ │ ├── asabeneh.jpg │ │ ├── css_logo.png │ │ ├── html_logo.png │ │ ├── js_logo.png │ │ └── react_logo.png │ └── index.js │ └── yarn.lock ├── 10_React_Project_Folder_Structure ├── 10_react_project_folder_structure.md └── 10_react_project_folder_structure_boilerplate │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ └── index.html │ ├── src │ ├── App.js │ ├── components │ │ ├── color │ │ │ └── HexaColor.js │ │ ├── country │ │ │ └── Country.js │ │ ├── footer │ │ │ └── Footer.js │ │ ├── header │ │ │ └── Header.js │ │ ├── main │ │ │ └── Main.js │ │ ├── shared │ │ │ └── Button.js │ │ └── user │ │ │ └── UserCard.js │ ├── data │ │ ├── countries.js │ │ └── ten_most_highest_populations.js │ ├── images │ │ ├── asabeneh.jpg │ │ ├── css_logo.png │ │ ├── html_logo.png │ │ ├── js_logo.png │ │ └── react_logo.png │ ├── index.js │ ├── styles │ │ ├── button-styles.js │ │ ├── common.css │ │ ├── country.css │ │ ├── footer.css │ │ ├── header.css │ │ ├── index.css │ │ └── user-card.css │ └── utils │ │ ├── display-date-and-time.js │ │ └── hexadecimal-color-generator.js │ └── yarn.lock ├── 11_Day_Events ├── 11_events.md └── 11_events_boilerplate │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ └── index.html │ ├── src │ ├── data │ │ ├── countries.js │ │ └── ten_most_highest_populations.js │ ├── images │ │ ├── asabeneh.jpg │ │ ├── css_logo.png │ │ ├── html_logo.png │ │ ├── js_logo.png │ │ └── react_logo.png │ └── index.js │ └── yarn.lock ├── 12_Day_Forms ├── 12_forms.md └── 12_forms_boilerplate │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ └── index.html │ ├── src │ ├── data │ │ ├── countries.js │ │ └── ten_most_highest_populations.js │ ├── images │ │ ├── asabeneh.jpg │ │ ├── css_logo.png │ │ ├── html_logo.png │ │ ├── js_logo.png │ │ └── react_logo.png │ └── index.js │ └── yarn.lock ├── 13_Day_Controlled_Versus_Uncontrolled_Input ├── 13_uncontrolled_input.md └── 13_uncontrolled_input_boilerplate │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ └── index.html │ ├── src │ ├── data │ │ ├── countries.js │ │ └── ten_most_highest_populations.js │ ├── images │ │ ├── asabeneh.jpg │ │ ├── css_logo.png │ │ ├── html_logo.png │ │ ├── js_logo.png │ │ └── react_logo.png │ └── index.js │ └── yarn.lock ├── 14_Day_Component_Life_Cycles ├── 14_component_life_cycles.md └── 14_component_life_cycles_boilerplate │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ └── index.html │ ├── src │ ├── data │ │ ├── countries.js │ │ └── ten_most_highest_populations.js │ ├── images │ │ ├── asabeneh.jpg │ │ ├── css_logo.png │ │ ├── html_logo.png │ │ ├── js_logo.png │ │ └── react_logo.png │ └── index.js │ └── yarn.lock ├── 15_Third_Party_Packages ├── 15_third_party_packages.md └── 15_third_pary_packages_boilerplate │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ └── index.html │ ├── src │ ├── data │ │ ├── countries.js │ │ └── ten_most_highest_populations.js │ ├── images │ │ ├── asabeneh.jpg │ │ ├── css_logo.png │ │ ├── html_logo.png │ │ ├── js_logo.png │ │ └── react_logo.png │ └── index.js │ └── yarn.lock ├── 16_Higher_Order_Component ├── 16_higher_order_component.md └── 16_higher_order_component_boilerplate │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ └── index.html │ ├── src │ ├── data │ │ ├── countries.js │ │ └── ten_most_highest_populations.js │ ├── images │ │ ├── asabeneh.jpg │ │ ├── css_logo.png │ │ ├── html_logo.png │ │ ├── js_logo.png │ │ └── react_logo.png │ └── index.js │ └── yarn.lock ├── 17_React_Router ├── 17_react_router.md └── 17_react_router_boilerplate │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ └── index.html │ ├── src │ ├── data │ │ ├── countries.js │ │ └── ten_most_highest_populations.js │ ├── images │ │ ├── asabeneh.jpg │ │ ├── css_logo.png │ │ ├── html_logo.png │ │ ├── js_logo.png │ │ └── react_logo.png │ └── index.js │ └── yarn.lock ├── 18_Fetch_And_Axios ├── 18_fetch_and_axios_boilerplate │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ └── index.html │ ├── src │ │ ├── data │ │ │ ├── countries.js │ │ │ └── ten_most_highest_populations.js │ │ ├── images │ │ │ ├── asabeneh.jpg │ │ │ ├── css_logo.png │ │ │ ├── html_logo.png │ │ │ ├── js_logo.png │ │ │ └── react_logo.png │ │ └── index.js │ └── yarn.lock └── 18_fetch_axios.md ├── 19_projects ├── 19_projects.md └── 19_projects_boilerplate │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ └── index.html │ ├── src │ ├── data │ │ ├── countries.js │ │ └── ten_most_highest_populations.js │ ├── images │ │ ├── asabeneh.jpg │ │ ├── css_logo.png │ │ ├── html_logo.png │ │ ├── js_logo.png │ │ └── react_logo.png │ └── index.js │ └── yarn.lock ├── 20_projects ├── 20_projects.md └── 20_projects_boilerplate │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ └── index.html │ ├── src │ ├── data │ │ ├── countries.js │ │ └── ten_most_highest_populations.js │ ├── images │ │ ├── asabeneh.jpg │ │ ├── css_logo.png │ │ ├── html_logo.png │ │ ├── js_logo.png │ │ └── react_logo.png │ └── index.js │ └── yarn.lock ├── 21_Introducing_Hooks ├── 21_introducing_hooks.md └── 21_introducing_hooks_boilerplate │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ └── index.html │ ├── src │ ├── data │ │ ├── countries.js │ │ └── ten_most_highest_populations.js │ ├── images │ │ ├── asabeneh.jpg │ │ ├── css_logo.png │ │ ├── html_logo.png │ │ ├── js_logo.png │ │ └── react_logo.png │ ├── index.js │ └── index.scss │ └── yarn.lock ├── 22_Form_Using_Hooks ├── 22_form_using_hooks.md └── 22_form_using_hooks_boilerplate │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ └── index.html │ ├── src │ ├── data │ │ ├── countries.js │ │ └── ten_most_highest_populations.js │ ├── images │ │ ├── asabeneh.jpg │ │ ├── css_logo.png │ │ ├── html_logo.png │ │ ├── js_logo.png │ │ └── react_logo.png │ ├── index.js │ └── index.scss │ └── yarn.lock ├── 23_Fetching_Data_Using_Hooks ├── 23_fetching_data_using_hooks.md └── 23_fetching_data_using_hooks_boilerplate │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ └── index.html │ ├── src │ ├── data │ │ ├── countries.js │ │ └── ten_most_highest_populations.js │ ├── images │ │ ├── asabeneh.jpg │ │ ├── css_logo.png │ │ ├── html_logo.png │ │ ├── js_logo.png │ │ └── react_logo.png │ ├── index.js │ └── index.scss │ └── yarn.lock ├── 24_projects ├── 24_projects.md └── 24_projects_boilerplate │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ └── index.html │ ├── src │ ├── data │ │ ├── countries.js │ │ └── ten_most_highest_populations.js │ ├── images │ │ ├── asabeneh.jpg │ │ ├── css_logo.png │ │ ├── html_logo.png │ │ ├── js_logo.png │ │ └── react_logo.png │ ├── index.js │ └── index.scss │ └── yarn.lock ├── 25_Custom_Hooks ├── 25_custom_hooks.md └── 25_custom_hooks_boilerplate │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ └── index.html │ ├── src │ ├── data │ │ ├── countries.js │ │ └── ten_most_highest_populations.js │ ├── images │ │ ├── asabeneh.jpg │ │ ├── css_logo.png │ │ ├── html_logo.png │ │ ├── js_logo.png │ │ └── react_logo.png │ ├── index.js │ ├── index.scss │ └── useFetch.js │ └── yarn.lock ├── 26_Context ├── 26_context.md └── 26_context_boilerplate │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ └── index.html │ ├── src │ ├── data │ │ ├── countries.js │ │ └── ten_most_highest_populations.js │ ├── images │ │ ├── asabeneh.jpg │ │ ├── css_logo.png │ │ ├── html_logo.png │ │ ├── js_logo.png │ │ └── react_logo.png │ ├── index.js │ ├── index.scss │ └── useFetch.js │ └── yarn.lock ├── 27_Ref ├── 27_ref.md └── 27_ref_boilerplate │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ └── index.html │ ├── src │ ├── data │ │ ├── countries.js │ │ └── ten_most_highest_populations.js │ ├── images │ │ ├── asabeneh.jpg │ │ ├── css_logo.png │ │ ├── html_logo.png │ │ ├── js_logo.png │ │ └── react_logo.png │ ├── index.js │ ├── index.scss │ └── useFetch.js │ └── yarn.lock ├── 28_project ├── 28_project.md └── 28_project_boilerplate │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ └── index.html │ ├── src │ ├── data │ │ ├── countries.js │ │ └── ten_most_highest_populations.js │ ├── images │ │ ├── asabeneh.jpg │ │ ├── css_logo.png │ │ ├── html_logo.png │ │ ├── js_logo.png │ │ └── react_logo.png │ ├── index.js │ ├── index.scss │ └── useFetch.js │ └── yarn.lock ├── 29_explore ├── 29_explore.md └── 29_explore_boilerplate │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ └── index.html │ ├── src │ ├── data │ │ ├── countries.js │ │ └── ten_most_highest_populations.js │ ├── images │ │ ├── asabeneh.jpg │ │ ├── css_logo.png │ │ ├── html_logo.png │ │ ├── js_logo.png │ │ └── react_logo.png │ ├── index.js │ ├── index.scss │ └── useFetch.js │ └── yarn.lock ├── 30_conclusions ├── 30_conclusions.md └── 30_conclusions_boilerplate │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ └── index.html │ ├── src │ ├── data │ │ ├── countries.js │ │ └── ten_most_highest_populations.js │ ├── images │ │ ├── asabeneh.jpg │ │ ├── css_logo.png │ │ ├── html_logo.png │ │ ├── js_logo.png │ │ └── react_logo.png │ ├── index.js │ ├── index.scss │ └── useFetch.js │ └── yarn.lock ├── images ├── 08_day_changing_background_exercise.gif ├── 08_day_select_country_exercise.gif ├── 123456.PNG ├── 30_days_of_react.jpg ├── adding_project_to_vscode.png ├── all_jsx_final.png ├── arithmetic copy.png ├── arithmetic.png ├── array_index copy.png ├── array_index.png ├── assignment_operators.png ├── average_cat_weight_and_age.png ├── become_patreon.png ├── className_warning.png ├── cleaned_launched.png ├── comparison_operators.png ├── components.png ├── components_example.png ├── console_log_multipl_arguments.png ├── create-react-app-first-release_jul-22-2016.png ├── create_react_app_file_cleaned.png ├── create_react_app_files.png ├── date_time_object.png ├── day_6_hexadecimal_colors_exercise.png ├── day_6_number_generater_exercise.png ├── day_6_ten_highest_populations_exercise.png ├── download_node.png ├── dynamic_data.png ├── first_react_app.png ├── frontend_technologies.png ├── google_chrome.png ├── hexadecimal_color_exercise.png ├── inecting_data_to_jsx_create_react_app.png ├── install_node.png ├── internal_style.png ├── js_code_on_chrome_console.png ├── js_code_vscode.png ├── js_internal_style_create_react_app.png ├── jsx_use_create_react_app.png ├── launched_on_new_tab.png ├── local_storage.png ├── map_list_id.png ├── multiple_script.png ├── news_letter_design.png ├── npm_package_day_15.png ├── npm_registry.png ├── opening_chrome_console_shortcut.png ├── opening_developer_tool.png ├── opening_project_on_vscode.png ├── paypal_lg.png ├── raising_syntax_error.png ├── react_app_starting.png ├── react_boilerplate.png ├── react_bolier_plate_cleaned.png ├── react_event_on_mouse_enter.gif ├── react_for_everyone.png ├── react_logo.gif ├── react_logo.png ├── react_popularity.png ├── react_repo_1_oct_2020.png ├── regex.png ├── removing_unique_id_warning.png ├── rendering_componnets.png ├── rendering_image.png ├── rendering_jsx.png ├── rendering_list.png ├── rendering_more_jsx_content_.png ├── rendering_more_jsx_content_create_react_app.png ├── rendering_multiple_jsx_elements.png ├── rendering_multiple_jsx_elements_create-react_app.png ├── running_script.png ├── scripts_on_vscode.png ├── string_indexes.png ├── styling_all_jsx_elements.png ├── styling_jsx_element.png ├── styling_jsx_inline_create_react_app.png ├── user_card_design_jsx.png ├── vsc_live_server.png ├── vscode.png ├── vscode_ui.png ├── vue_popularity.png ├── vue_repo_1_oct_2020.png └── web_storage.png └── readMe.md /03_Day_Setting_Up/03_setting_up_boilerplate/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /03_Day_Setting_Up/03_setting_up_boilerplate/README.md: -------------------------------------------------------------------------------- 1 | # 30 Days of React App: Day 3 2 | 3 | In the project directory, you can run to start the project 4 | 5 | ### `npm start` 6 | -------------------------------------------------------------------------------- /03_Day_Setting_Up/03_setting_up_boilerplate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "30-days-of-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /03_Day_Setting_Up/03_setting_up_boilerplate/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 14 | 15 | 30 Days Of React App 16 | 94 | 95 | 96 |
97 | 98 | 99 | -------------------------------------------------------------------------------- /03_Day_Setting_Up/03_setting_up_boilerplate/src/images/asabeneh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/03_Day_Setting_Up/03_setting_up_boilerplate/src/images/asabeneh.jpg -------------------------------------------------------------------------------- /03_Day_Setting_Up/03_setting_up_boilerplate/src/images/css_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/03_Day_Setting_Up/03_setting_up_boilerplate/src/images/css_logo.png -------------------------------------------------------------------------------- /03_Day_Setting_Up/03_setting_up_boilerplate/src/images/html_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/03_Day_Setting_Up/03_setting_up_boilerplate/src/images/html_logo.png -------------------------------------------------------------------------------- /03_Day_Setting_Up/03_setting_up_boilerplate/src/images/react_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/03_Day_Setting_Up/03_setting_up_boilerplate/src/images/react_logo.png -------------------------------------------------------------------------------- /03_Day_Setting_Up/03_setting_up_boilerplate/src/math.js: -------------------------------------------------------------------------------- 1 | // math.js 2 | export const addTwo = (a, b) => a + b 3 | export const multiply = (a, b) => a * b 4 | export const subtract = (a, b) => a - b 5 | 6 | export default(function doSomeMath() { 7 | return { 8 | addTwo, 9 | multiply, 10 | subtract, 11 | } 12 | })() 13 | -------------------------------------------------------------------------------- /04_Day_Components/04_components_boilerplate/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /04_Day_Components/04_components_boilerplate/README.md: -------------------------------------------------------------------------------- 1 | # 30 Days of React App: Day 4 2 | 3 | In the project directory, you can run to start the project 4 | 5 | ### `npm start` 6 | -------------------------------------------------------------------------------- /04_Day_Components/04_components_boilerplate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "30-days-of-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /04_Day_Components/04_components_boilerplate/src/images/asabeneh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/04_Day_Components/04_components_boilerplate/src/images/asabeneh.jpg -------------------------------------------------------------------------------- /04_Day_Components/04_components_boilerplate/src/images/css_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/04_Day_Components/04_components_boilerplate/src/images/css_logo.png -------------------------------------------------------------------------------- /04_Day_Components/04_components_boilerplate/src/images/html_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/04_Day_Components/04_components_boilerplate/src/images/html_logo.png -------------------------------------------------------------------------------- /04_Day_Components/04_components_boilerplate/src/images/js_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/04_Day_Components/04_components_boilerplate/src/images/js_logo.png -------------------------------------------------------------------------------- /04_Day_Components/04_components_boilerplate/src/images/react_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/04_Day_Components/04_components_boilerplate/src/images/react_logo.png -------------------------------------------------------------------------------- /05_Day_Props/05_props_boilerplate/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /05_Day_Props/05_props_boilerplate/README.md: -------------------------------------------------------------------------------- 1 | # 30 Days of React App: Day 5 2 | 3 | In the project directory, you can run to start the project 4 | 5 | ### `npm start` 6 | -------------------------------------------------------------------------------- /05_Day_Props/05_props_boilerplate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "30-days-of-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /05_Day_Props/05_props_boilerplate/src/images/asabeneh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/05_Day_Props/05_props_boilerplate/src/images/asabeneh.jpg -------------------------------------------------------------------------------- /05_Day_Props/05_props_boilerplate/src/images/css_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/05_Day_Props/05_props_boilerplate/src/images/css_logo.png -------------------------------------------------------------------------------- /05_Day_Props/05_props_boilerplate/src/images/html_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/05_Day_Props/05_props_boilerplate/src/images/html_logo.png -------------------------------------------------------------------------------- /05_Day_Props/05_props_boilerplate/src/images/js_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/05_Day_Props/05_props_boilerplate/src/images/js_logo.png -------------------------------------------------------------------------------- /05_Day_Props/05_props_boilerplate/src/images/react_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/05_Day_Props/05_props_boilerplate/src/images/react_logo.png -------------------------------------------------------------------------------- /06_Day_Map_List_Keys/06_map_list_keys_boilerplate/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /06_Day_Map_List_Keys/06_map_list_keys_boilerplate/README.md: -------------------------------------------------------------------------------- 1 | # 30 Days of React App: Day 6 2 | 3 | In the project directory, you can run to start the project 4 | 5 | ### `npm start` 6 | -------------------------------------------------------------------------------- /06_Day_Map_List_Keys/06_map_list_keys_boilerplate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "30-days-of-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/data/ten_most_highest_populations.js: -------------------------------------------------------------------------------- 1 | export const tenHighestPopulation = [ 2 | { country: 'World', population: 7693165599 }, 3 | { country: 'China', population: 1377422166 }, 4 | { country: 'India', population: 1295210000 }, 5 | { country: 'United States of America', population: 323947000 }, 6 | { country: 'Indonesia', population: 258705000 }, 7 | { country: 'Brazil', population: 206135893 }, 8 | { country: 'Pakistan', population: 194125062 }, 9 | { country: 'Nigeria', population: 186988000 }, 10 | { country: 'Bangladesh', population: 161006790 }, 11 | { country: 'Russian Federation', population: 146599183 }, 12 | { country: 'Japan', population: 126960000 }, 13 | ] 14 | -------------------------------------------------------------------------------- /06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/images/asabeneh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/images/asabeneh.jpg -------------------------------------------------------------------------------- /06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/images/css_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/images/css_logo.png -------------------------------------------------------------------------------- /06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/images/html_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/images/html_logo.png -------------------------------------------------------------------------------- /06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/images/js_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/images/js_logo.png -------------------------------------------------------------------------------- /06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/images/react_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/images/react_logo.png -------------------------------------------------------------------------------- /06_Day_Map_List_Keys/06_map_list_keys_boilerplate/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | 4 | 5 | // importing data 6 | 7 | import { countriesData } from './data/countries' 8 | import { tenMostHighestPopulations } from './data/ten_most_highest_populations' 9 | 10 | const countries = [ 11 | { name: 'Finland', city: 'Helsinki' }, 12 | { name: 'Sweden', city: 'Stockholm' }, 13 | { name: 'Denmark', city: 'Copenhagen' }, 14 | { name: 'Norway', city: 'Oslo' }, 15 | { name: 'Iceland', city: 'Reykjavík' }, 16 | ] 17 | 18 | // Country component 19 | const Country = ({ country: { name, city } }) => { 20 | return ( 21 |
22 |

{name}

23 | {city} 24 |
25 | ) 26 | } 27 | 28 | // countries component 29 | const Countries = ({ countries }) => { 30 | const countryList = countries.map((country) => ( 31 | 32 | )) 33 | return
{countryList}
34 | } 35 | 36 | // The App, or the parent or the container component 37 | // Functional Component 38 | const App = () => { 39 | return ( 40 |
41 |
42 |

Countries List

43 | 44 |
45 |
46 | ) 47 | } 48 | const rootElement = document.getElementById('root') 49 | ReactDOM.render(, rootElement) 50 | -------------------------------------------------------------------------------- /07_Day_Class_Components/07_class_based_components_boilerplate/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /07_Day_Class_Components/07_class_based_components_boilerplate/README.md: -------------------------------------------------------------------------------- 1 | # 30 Days of React App: Day 7 2 | 3 | In the project directory, you can run to start the project 4 | 5 | ### `npm start` 6 | -------------------------------------------------------------------------------- /07_Day_Class_Components/07_class_based_components_boilerplate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "30-days-of-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /07_Day_Class_Components/07_class_based_components_boilerplate/src/data/ten_most_highest_populations.js: -------------------------------------------------------------------------------- 1 | export const tenHighestPopulation = [ 2 | { country: 'World', population: 7693165599 }, 3 | { country: 'China', population: 1377422166 }, 4 | { country: 'India', population: 1295210000 }, 5 | { country: 'United States of America', population: 323947000 }, 6 | { country: 'Indonesia', population: 258705000 }, 7 | { country: 'Brazil', population: 206135893 }, 8 | { country: 'Pakistan', population: 194125062 }, 9 | { country: 'Nigeria', population: 186988000 }, 10 | { country: 'Bangladesh', population: 161006790 }, 11 | { country: 'Russian Federation', population: 146599183 }, 12 | { country: 'Japan', population: 126960000 }, 13 | ] 14 | -------------------------------------------------------------------------------- /07_Day_Class_Components/07_class_based_components_boilerplate/src/images/asabeneh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/07_Day_Class_Components/07_class_based_components_boilerplate/src/images/asabeneh.jpg -------------------------------------------------------------------------------- /07_Day_Class_Components/07_class_based_components_boilerplate/src/images/css_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/07_Day_Class_Components/07_class_based_components_boilerplate/src/images/css_logo.png -------------------------------------------------------------------------------- /07_Day_Class_Components/07_class_based_components_boilerplate/src/images/html_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/07_Day_Class_Components/07_class_based_components_boilerplate/src/images/html_logo.png -------------------------------------------------------------------------------- /07_Day_Class_Components/07_class_based_components_boilerplate/src/images/js_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/07_Day_Class_Components/07_class_based_components_boilerplate/src/images/js_logo.png -------------------------------------------------------------------------------- /07_Day_Class_Components/07_class_based_components_boilerplate/src/images/react_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/07_Day_Class_Components/07_class_based_components_boilerplate/src/images/react_logo.png -------------------------------------------------------------------------------- /08_Day_States/08_states_boilerplate/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /08_Day_States/08_states_boilerplate/README.md: -------------------------------------------------------------------------------- 1 | # 30 Days of React App: Day 8 2 | 3 | In the project directory, you can run to start the project 4 | 5 | ### `npm start` 6 | -------------------------------------------------------------------------------- /08_Day_States/08_states_boilerplate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "30-days-of-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /08_Day_States/08_states_boilerplate/src/data/ten_most_highest_populations.js: -------------------------------------------------------------------------------- 1 | export const tenHighestPopulation = [ 2 | { country: 'World', population: 7693165599 }, 3 | { country: 'China', population: 1377422166 }, 4 | { country: 'India', population: 1295210000 }, 5 | { country: 'United States of America', population: 323947000 }, 6 | { country: 'Indonesia', population: 258705000 }, 7 | { country: 'Brazil', population: 206135893 }, 8 | { country: 'Pakistan', population: 194125062 }, 9 | { country: 'Nigeria', population: 186988000 }, 10 | { country: 'Bangladesh', population: 161006790 }, 11 | { country: 'Russian Federation', population: 146599183 }, 12 | { country: 'Japan', population: 126960000 }, 13 | ] 14 | -------------------------------------------------------------------------------- /08_Day_States/08_states_boilerplate/src/images/asabeneh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/08_Day_States/08_states_boilerplate/src/images/asabeneh.jpg -------------------------------------------------------------------------------- /08_Day_States/08_states_boilerplate/src/images/css_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/08_Day_States/08_states_boilerplate/src/images/css_logo.png -------------------------------------------------------------------------------- /08_Day_States/08_states_boilerplate/src/images/html_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/08_Day_States/08_states_boilerplate/src/images/html_logo.png -------------------------------------------------------------------------------- /08_Day_States/08_states_boilerplate/src/images/js_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/08_Day_States/08_states_boilerplate/src/images/js_logo.png -------------------------------------------------------------------------------- /08_Day_States/08_states_boilerplate/src/images/react_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/08_Day_States/08_states_boilerplate/src/images/react_logo.png -------------------------------------------------------------------------------- /09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/README.md: -------------------------------------------------------------------------------- 1 | # 30 Days of React App: Day 9 2 | 3 | In the project directory, you can run to start the project 4 | 5 | ### `npm start` 6 | -------------------------------------------------------------------------------- /09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "30-days-of-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/src/data/ten_most_highest_populations.js: -------------------------------------------------------------------------------- 1 | export const tenHighestPopulation = [ 2 | { country: 'World', population: 7693165599 }, 3 | { country: 'China', population: 1377422166 }, 4 | { country: 'India', population: 1295210000 }, 5 | { country: 'United States of America', population: 323947000 }, 6 | { country: 'Indonesia', population: 258705000 }, 7 | { country: 'Brazil', population: 206135893 }, 8 | { country: 'Pakistan', population: 194125062 }, 9 | { country: 'Nigeria', population: 186988000 }, 10 | { country: 'Bangladesh', population: 161006790 }, 11 | { country: 'Russian Federation', population: 146599183 }, 12 | { country: 'Japan', population: 126960000 }, 13 | ] 14 | -------------------------------------------------------------------------------- /09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/src/images/asabeneh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/src/images/asabeneh.jpg -------------------------------------------------------------------------------- /09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/src/images/css_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/src/images/css_logo.png -------------------------------------------------------------------------------- /09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/src/images/html_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/src/images/html_logo.png -------------------------------------------------------------------------------- /09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/src/images/js_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/src/images/js_logo.png -------------------------------------------------------------------------------- /09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/src/images/react_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/09_Day_Conditional_Rendering/09_conditional_rendering_boilerplate/src/images/react_logo.png -------------------------------------------------------------------------------- /10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/README.md: -------------------------------------------------------------------------------- 1 | # 30 Days of React App: Day 10 2 | 3 | In the project directory, you can run to start the project 4 | 5 | ### `npm start` 6 | -------------------------------------------------------------------------------- /10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "30-days-of-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 14 | 15 | 30 Days Of React App 16 | 17 | 18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Header from './components/header/Header' 3 | import Main from './components/main/Main' 4 | import Footer from './components/footer/Footer' 5 | import { countriesData } from './data/countries' 6 | import asabenehImage from './assets/images/asabeneh.jpg' 7 | import { showDate } from './utils/display-date-and-time' 8 | 9 | class App extends React.Component { 10 | state = { 11 | loggedIn: false, 12 | techs: ['HTML', 'CSS', 'JS'], 13 | message: 'Click show time or Greet people to change me', 14 | country: countriesData[1], 15 | } 16 | handleLogin = () => { 17 | this.setState({ 18 | loggedIn: !this.state.loggedIn, 19 | }) 20 | } 21 | handleTime = () => { 22 | let message = showDate(new Date()) 23 | this.setState({ message }) 24 | } 25 | greetPeople = () => { 26 | let message = 'Welcome to 30 Days Of React Challenge, 2020' 27 | this.setState({ message }) 28 | } 29 | 30 | render() { 31 | const data = { 32 | welcome: '30 Days Of React', 33 | title: 'Getting Started React', 34 | subtitle: 'JavaScript Library', 35 | author: { 36 | firstName: 'Asabeneh', 37 | lastName: 'Yetayeh', 38 | }, 39 | date: new Date(), 40 | } 41 | const techs = ['HTML', 'CSS', 'JavaScript'] 42 | const user = { ...data.author, image: asabenehImage } 43 | 44 | return ( 45 |
46 | {this.state.backgroundColor} 47 |
48 |
58 | 59 |
60 |
61 | ) 62 | } 63 | } 64 | 65 | export default App 66 | -------------------------------------------------------------------------------- /10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/components/color/HexaColor.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { hexaColor } from '../../utils/hexadecimal-color-generator' 3 | const HexaColor = (props) => { 4 | return ( 5 |
6 | {hexaColor()} 7 |
8 | ) 9 | } 10 | 11 | HexaColor.propTypes = {} 12 | 13 | export default HexaColor 14 | -------------------------------------------------------------------------------- /10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/components/country/Country.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | const Country = ({ 3 | country: { name, capital, flag, languages, population, currency }, 4 | }) => { 5 | const formatedCapital = 6 | capital.length > 0 ? ( 7 | <> 8 | Capital: 9 | {capital} 10 | 11 | ) : ( 12 | '' 13 | ) 14 | const formatLanguage = languages.length > 1 ? `Languages` : `Language` 15 | return ( 16 |
17 |
18 | {name} 19 |
20 |

{name.toUpperCase()}

21 |
22 |

{formatedCapital}

23 |

24 | {formatLanguage}: 25 | {languages.join(', ')} 26 |

27 |

28 | Population: 29 | {population.toLocaleString()} 30 |

31 |

32 | Currency: 33 | {currency} 34 |

35 |
36 |
37 | ) 38 | } 39 | 40 | export default Country 41 | -------------------------------------------------------------------------------- /10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/components/footer/Footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | const Footer = ({ date }) => { 3 | return ( 4 |
5 |
6 |

Copyright {date.getFullYear()}

7 |
8 |
9 | ) 10 | } 11 | export default Footer 12 | -------------------------------------------------------------------------------- /10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/components/header/Header.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import { showDate } from '../../utils/display-date-and-time' 4 | 5 | const Header = ({ 6 | data: { 7 | welcome, 8 | title, 9 | subtitle, 10 | author: { firstName, lastName }, 11 | date, 12 | }, 13 | }) => { 14 | return ( 15 |
16 |
17 |

{welcome}

18 |

{title}

19 |

{subtitle}

20 |

21 | {firstName} {lastName} 22 |

23 | {showDate(date)} 24 |
25 |
26 | ) 27 | } 28 | 29 | export default Header 30 | -------------------------------------------------------------------------------- /10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/components/shared/Button.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | // A button component 4 | const Button = ({ text, onClick, style }) => ( 5 | 8 | ) 9 | 10 | export default Button 11 | 12 | -------------------------------------------------------------------------------- /10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/components/user/UserCard.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | // User Card Component 4 | const UserCard = ({ user: { firstName, lastName, image } }) => ( 5 |
6 | asabeneh image 7 | 8 |

9 | {firstName} 10 | {lastName} 11 |

12 |
13 | ) 14 | 15 | export default UserCard 16 | -------------------------------------------------------------------------------- /10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/data/ten_most_highest_populations.js: -------------------------------------------------------------------------------- 1 | export const tenHighestPopulation = [ 2 | { country: 'World', population: 7693165599 }, 3 | { country: 'China', population: 1377422166 }, 4 | { country: 'India', population: 1295210000 }, 5 | { country: 'United States of America', population: 323947000 }, 6 | { country: 'Indonesia', population: 258705000 }, 7 | { country: 'Brazil', population: 206135893 }, 8 | { country: 'Pakistan', population: 194125062 }, 9 | { country: 'Nigeria', population: 186988000 }, 10 | { country: 'Bangladesh', population: 161006790 }, 11 | { country: 'Russian Federation', population: 146599183 }, 12 | { country: 'Japan', population: 126960000 }, 13 | ] 14 | -------------------------------------------------------------------------------- /10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/images/asabeneh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/images/asabeneh.jpg -------------------------------------------------------------------------------- /10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/images/css_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/images/css_logo.png -------------------------------------------------------------------------------- /10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/images/html_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/images/html_logo.png -------------------------------------------------------------------------------- /10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/images/js_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/images/js_logo.png -------------------------------------------------------------------------------- /10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/images/react_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/images/react_logo.png -------------------------------------------------------------------------------- /10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/index.js: -------------------------------------------------------------------------------- 1 | // index.js 2 | import React from 'react' 3 | import ReactDOM from 'react-dom' 4 | import App from './App' 5 | import './styles/index.css' 6 | 7 | // class based component 8 | 9 | const rootElement = document.getElementById('root') 10 | ReactDOM.render(, rootElement) 11 | -------------------------------------------------------------------------------- /10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/styles/button-styles.js: -------------------------------------------------------------------------------- 1 | // CSS styles in JavaScript Object 2 | export const buttonStyles = { 3 | backgroundColor: '#61dbfb', 4 | padding: 10, 5 | border: 'none', 6 | borderRadius: 5, 7 | margin: 3, 8 | cursor: 'pointer', 9 | fontSize: 22, 10 | color: 'white', 11 | margin: '0 auto', 12 | } 13 | -------------------------------------------------------------------------------- /10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/styles/common.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | padding: 0; 4 | margin: 0; 5 | } 6 | 7 | html, 8 | body { 9 | height: 100%; 10 | line-height: 1.5; 11 | font-family: 'Roboto'; 12 | font-weight: 300; 13 | color: black; 14 | overflow-x: hidden; 15 | font-size: 110%; 16 | } 17 | #root { 18 | min-height: 100%; 19 | position: relative; 20 | letter-spacing: 1.25px; 21 | } 22 | 23 | .header-wrapper, 24 | .main-wrapper, 25 | .footer-wrapper { 26 | width: 85%; 27 | margin: auto; 28 | } 29 | 30 | .header-wrapper, 31 | .main-wrapper { 32 | padding: 10px; 33 | margin: 2px auto; 34 | } 35 | 36 | h1 { 37 | font-size: 70px; 38 | font-weight: 300; 39 | } 40 | 41 | h2, 42 | h3 { 43 | font-weight: 300; 44 | } 45 | 46 | main { 47 | padding: 10px; 48 | padding-bottom: 60px; 49 | } 50 | 51 | ul { 52 | margin-left: 15px; 53 | } 54 | 55 | ul li { 56 | list-style: none; 57 | } 58 | -------------------------------------------------------------------------------- /10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/styles/country.css: -------------------------------------------------------------------------------- 1 | /* Countries*/ 2 | .country { 3 | max-width: 50rem; 4 | min-width: 50rem; 5 | height: 35rem; 6 | text-align: center; 7 | margin: 0.75rem auto; 8 | padding: 2rem; 9 | border-radius: 0.2rem; 10 | background: white; 11 | box-shadow: 0 0.1rem 1rem #cfc9c7; 12 | } 13 | 14 | .country:hover { 15 | box-shadow: 0 0.1rem 1rem #cfc9c7; 16 | -webkit-transition: all 0.2s ease-in; 17 | transform: scale(1.015); 18 | } 19 | 20 | .country_flag { 21 | height: 12rem; 22 | width: 20rem; 23 | text-align: center; 24 | margin: auto; 25 | } 26 | 27 | .country img { 28 | display: block; 29 | margin: auto; 30 | max-width: 100%; 31 | max-height: 100%; 32 | min-width: 100%; 33 | min-height: 100%; 34 | border-radius: 0.3rem; 35 | box-shadow: 0 0 0.6rem 0.2rem rgb(241, 225, 225); 36 | } 37 | 38 | .country_name { 39 | font-size: 1.6rem; 40 | color: #ffa500; 41 | letter-spacing: 0.075rem; 42 | font-weight: bolder; 43 | margin: 1rem; 44 | color: #414141; 45 | font-weight: 900; 46 | } 47 | 48 | .country p { 49 | font-size: 1.6rem; 50 | font-weight: 500; 51 | padding: 0.2rem; 52 | color: #747474; 53 | 54 | text-align: left; 55 | letter-spacing: 0.05rem; 56 | } 57 | 58 | .country span { 59 | font-weight: 600; 60 | } 61 | -------------------------------------------------------------------------------- /10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/styles/footer.css: -------------------------------------------------------------------------------- 1 | footer { 2 | position: absolute; 3 | bottom: 0; 4 | width: 100%; 5 | height: 60px; 6 | /* Height of the footer */ 7 | background: #6cf; 8 | } 9 | 10 | .footer-wrapper { 11 | font-weight: 400; 12 | text-align: center; 13 | line-height: 60px; 14 | } -------------------------------------------------------------------------------- /10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/styles/header.css: -------------------------------------------------------------------------------- 1 | header { 2 | background-color: #61dbfb; 3 | padding: 25; 4 | padding: 10px; 5 | } 6 | -------------------------------------------------------------------------------- /10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/styles/index.css: -------------------------------------------------------------------------------- 1 | /* == General style === */ 2 | /* This CSS has to be broken into small files */ 3 | 4 | @import './common.css'; 5 | @import './header.css'; 6 | @import './footer.css'; 7 | @import './user-card.css'; 8 | @import './country.css'; 9 | -------------------------------------------------------------------------------- /10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/styles/user-card.css: -------------------------------------------------------------------------------- 1 | .user-card { 2 | margin-top: 10px; 3 | } 4 | .user-card > img { 5 | border-radius: 50%; 6 | width: 14%; 7 | } -------------------------------------------------------------------------------- /10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/utils/display-date-and-time.js: -------------------------------------------------------------------------------- 1 | export const showDate = (time) => { 2 | const months = [ 3 | 'January', 4 | 'February', 5 | 'March', 6 | 'April', 7 | 'May', 8 | 'June', 9 | 'July', 10 | 'August', 11 | 'September', 12 | 'October', 13 | 'November', 14 | 'December', 15 | ] 16 | 17 | const month = months[time.getMonth()].slice(0, 3) 18 | const year = time.getFullYear() 19 | const date = time.getDate() 20 | return `${month} ${date}, ${year}` 21 | } 22 | -------------------------------------------------------------------------------- /10_React_Project_Folder_Structure/10_react_project_folder_structure_boilerplate/src/utils/hexadecimal-color-generator.js: -------------------------------------------------------------------------------- 1 | // Hexadecimal color generator 2 | export const hexaColor = () => { 3 | let str = '0123456789abcdef' 4 | let color = '' 5 | for (let i = 0; i < 6; i++) { 6 | let index = Math.floor(Math.random() * str.length) 7 | color += str[index] 8 | } 9 | return '#' + color 10 | } -------------------------------------------------------------------------------- /11_Day_Events/11_events_boilerplate/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /11_Day_Events/11_events_boilerplate/README.md: -------------------------------------------------------------------------------- 1 | # 30 Days of React App: Day 11 2 | 3 | In the project directory, you can run to start the project 4 | 5 | ### `npm start` 6 | -------------------------------------------------------------------------------- /11_Day_Events/11_events_boilerplate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "30-days-of-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /11_Day_Events/11_events_boilerplate/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 30 Days Of React App 11 | 12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /11_Day_Events/11_events_boilerplate/src/data/ten_most_highest_populations.js: -------------------------------------------------------------------------------- 1 | export const tenHighestPopulation = [ 2 | { country: 'World', population: 7693165599 }, 3 | { country: 'China', population: 1377422166 }, 4 | { country: 'India', population: 1295210000 }, 5 | { country: 'United States of America', population: 323947000 }, 6 | { country: 'Indonesia', population: 258705000 }, 7 | { country: 'Brazil', population: 206135893 }, 8 | { country: 'Pakistan', population: 194125062 }, 9 | { country: 'Nigeria', population: 186988000 }, 10 | { country: 'Bangladesh', population: 161006790 }, 11 | { country: 'Russian Federation', population: 146599183 }, 12 | { country: 'Japan', population: 126960000 }, 13 | ] 14 | -------------------------------------------------------------------------------- /11_Day_Events/11_events_boilerplate/src/images/asabeneh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/11_Day_Events/11_events_boilerplate/src/images/asabeneh.jpg -------------------------------------------------------------------------------- /11_Day_Events/11_events_boilerplate/src/images/css_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/11_Day_Events/11_events_boilerplate/src/images/css_logo.png -------------------------------------------------------------------------------- /11_Day_Events/11_events_boilerplate/src/images/html_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/11_Day_Events/11_events_boilerplate/src/images/html_logo.png -------------------------------------------------------------------------------- /11_Day_Events/11_events_boilerplate/src/images/js_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/11_Day_Events/11_events_boilerplate/src/images/js_logo.png -------------------------------------------------------------------------------- /11_Day_Events/11_events_boilerplate/src/images/react_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/11_Day_Events/11_events_boilerplate/src/images/react_logo.png -------------------------------------------------------------------------------- /12_Day_Forms/12_forms_boilerplate/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /12_Day_Forms/12_forms_boilerplate/README.md: -------------------------------------------------------------------------------- 1 | # 30 Days of React App: Day 12 2 | 3 | In the project directory, you can run to start the project 4 | 5 | ### `npm start` 6 | -------------------------------------------------------------------------------- /12_Day_Forms/12_forms_boilerplate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "30-days-of-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /12_Day_Forms/12_forms_boilerplate/src/data/ten_most_highest_populations.js: -------------------------------------------------------------------------------- 1 | export const tenHighestPopulation = [ 2 | { country: 'World', population: 7693165599 }, 3 | { country: 'China', population: 1377422166 }, 4 | { country: 'India', population: 1295210000 }, 5 | { country: 'United States of America', population: 323947000 }, 6 | { country: 'Indonesia', population: 258705000 }, 7 | { country: 'Brazil', population: 206135893 }, 8 | { country: 'Pakistan', population: 194125062 }, 9 | { country: 'Nigeria', population: 186988000 }, 10 | { country: 'Bangladesh', population: 161006790 }, 11 | { country: 'Russian Federation', population: 146599183 }, 12 | { country: 'Japan', population: 126960000 }, 13 | ] 14 | -------------------------------------------------------------------------------- /12_Day_Forms/12_forms_boilerplate/src/images/asabeneh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/12_Day_Forms/12_forms_boilerplate/src/images/asabeneh.jpg -------------------------------------------------------------------------------- /12_Day_Forms/12_forms_boilerplate/src/images/css_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/12_Day_Forms/12_forms_boilerplate/src/images/css_logo.png -------------------------------------------------------------------------------- /12_Day_Forms/12_forms_boilerplate/src/images/html_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/12_Day_Forms/12_forms_boilerplate/src/images/html_logo.png -------------------------------------------------------------------------------- /12_Day_Forms/12_forms_boilerplate/src/images/js_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/12_Day_Forms/12_forms_boilerplate/src/images/js_logo.png -------------------------------------------------------------------------------- /12_Day_Forms/12_forms_boilerplate/src/images/react_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/12_Day_Forms/12_forms_boilerplate/src/images/react_logo.png -------------------------------------------------------------------------------- /13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/README.md: -------------------------------------------------------------------------------- 1 | # 30 Days of React App: Day 13 2 | 3 | In the project directory, you can run to start the project 4 | 5 | ### `npm start` 6 | -------------------------------------------------------------------------------- /13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "30-days-of-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/src/data/ten_most_highest_populations.js: -------------------------------------------------------------------------------- 1 | export const tenHighestPopulation = [ 2 | { country: 'World', population: 7693165599 }, 3 | { country: 'China', population: 1377422166 }, 4 | { country: 'India', population: 1295210000 }, 5 | { country: 'United States of America', population: 323947000 }, 6 | { country: 'Indonesia', population: 258705000 }, 7 | { country: 'Brazil', population: 206135893 }, 8 | { country: 'Pakistan', population: 194125062 }, 9 | { country: 'Nigeria', population: 186988000 }, 10 | { country: 'Bangladesh', population: 161006790 }, 11 | { country: 'Russian Federation', population: 146599183 }, 12 | { country: 'Japan', population: 126960000 }, 13 | ] 14 | -------------------------------------------------------------------------------- /13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/src/images/asabeneh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/src/images/asabeneh.jpg -------------------------------------------------------------------------------- /13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/src/images/css_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/src/images/css_logo.png -------------------------------------------------------------------------------- /13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/src/images/html_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/src/images/html_logo.png -------------------------------------------------------------------------------- /13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/src/images/js_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/src/images/js_logo.png -------------------------------------------------------------------------------- /13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/src/images/react_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/src/images/react_logo.png -------------------------------------------------------------------------------- /13_Day_Controlled_Versus_Uncontrolled_Input/13_uncontrolled_input_boilerplate/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import ReactDOM from 'react-dom' 3 | 4 | class App extends Component { 5 | firstName = React.createRef() 6 | lastName = React.createRef() 7 | country = React.createRef() 8 | title = React.createRef() 9 | 10 | handleSubmit = (e) => { 11 | // stops the default behavior of form element specifically refreshing of page 12 | e.preventDefault() 13 | 14 | console.log(this.firstName.current.value) 15 | console.log(this.lastName.current.value) 16 | console.log(this.title.current.value) 17 | console.log(this.country.current.value) 18 | 19 | const data = { 20 | firstName: this.firstName.current.value, 21 | lastName: this.lastName.current.value, 22 | title: this.title.current.value, 23 | country: this.country.current.value, 24 | } 25 | // the is the place we connect backend api to send the data to the database 26 | console.log(data) 27 | } 28 | 29 | render() { 30 | return ( 31 |
32 |

Add Student

33 |
34 |
35 | 42 |
43 |
44 | 51 |
52 |
53 | 60 |
61 |
62 | 69 |
70 | 71 | 72 |
73 |
74 | ) 75 | } 76 | } 77 | 78 | const rootElement = document.getElementById('root') 79 | ReactDOM.render(, rootElement) 80 | -------------------------------------------------------------------------------- /14_Day_Component_Life_Cycles/14_component_life_cycles_boilerplate/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /14_Day_Component_Life_Cycles/14_component_life_cycles_boilerplate/README.md: -------------------------------------------------------------------------------- 1 | # 30 Days of React App: Day 14 2 | 3 | In the project directory, you can run to start the project 4 | 5 | ### `npm start` 6 | -------------------------------------------------------------------------------- /14_Day_Component_Life_Cycles/14_component_life_cycles_boilerplate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "30-days-of-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /14_Day_Component_Life_Cycles/14_component_life_cycles_boilerplate/src/data/ten_most_highest_populations.js: -------------------------------------------------------------------------------- 1 | export const tenHighestPopulation = [ 2 | { country: 'World', population: 7693165599 }, 3 | { country: 'China', population: 1377422166 }, 4 | { country: 'India', population: 1295210000 }, 5 | { country: 'United States of America', population: 323947000 }, 6 | { country: 'Indonesia', population: 258705000 }, 7 | { country: 'Brazil', population: 206135893 }, 8 | { country: 'Pakistan', population: 194125062 }, 9 | { country: 'Nigeria', population: 186988000 }, 10 | { country: 'Bangladesh', population: 161006790 }, 11 | { country: 'Russian Federation', population: 146599183 }, 12 | { country: 'Japan', population: 126960000 }, 13 | ] 14 | -------------------------------------------------------------------------------- /14_Day_Component_Life_Cycles/14_component_life_cycles_boilerplate/src/images/asabeneh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/14_Day_Component_Life_Cycles/14_component_life_cycles_boilerplate/src/images/asabeneh.jpg -------------------------------------------------------------------------------- /14_Day_Component_Life_Cycles/14_component_life_cycles_boilerplate/src/images/css_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/14_Day_Component_Life_Cycles/14_component_life_cycles_boilerplate/src/images/css_logo.png -------------------------------------------------------------------------------- /14_Day_Component_Life_Cycles/14_component_life_cycles_boilerplate/src/images/html_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/14_Day_Component_Life_Cycles/14_component_life_cycles_boilerplate/src/images/html_logo.png -------------------------------------------------------------------------------- /14_Day_Component_Life_Cycles/14_component_life_cycles_boilerplate/src/images/js_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/14_Day_Component_Life_Cycles/14_component_life_cycles_boilerplate/src/images/js_logo.png -------------------------------------------------------------------------------- /14_Day_Component_Life_Cycles/14_component_life_cycles_boilerplate/src/images/react_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/14_Day_Component_Life_Cycles/14_component_life_cycles_boilerplate/src/images/react_logo.png -------------------------------------------------------------------------------- /14_Day_Component_Life_Cycles/14_component_life_cycles_boilerplate/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import ReactDOM from 'react-dom' 3 | 4 | class App extends Component { 5 | constructor(props) { 6 | super(props) 7 | console.log('I am the constructor and I will be the first to run.') 8 | this.state = { 9 | firstName: 'John', 10 | data: [], 11 | } 12 | } 13 | 14 | componentDidMount() { 15 | console.log('I am componentDidMount and I will be last to run.') 16 | const API_URL = 'https://restcountries.eu/rest/v2/all' 17 | fetch(API_URL) 18 | .then((response) => { 19 | return response.json() 20 | }) 21 | .then((data) => { 22 | console.log(data) 23 | this.setState({ 24 | data, 25 | }) 26 | }) 27 | .catch((error) => { 28 | console.log(error) 29 | }) 30 | } 31 | renderCountries = () => { 32 | return this.state.data.map((country) => { 33 | return ( 34 |
35 |
36 | {' '} 37 | {country.name}{' '} 38 |
39 |
40 |

{country.name}

41 |

Population: {country.population}

42 |
43 |
44 | ) 45 | }) 46 | } 47 | 48 | render() { 49 | return ( 50 |
51 |

React Component Life Cycle

52 |

Calling API

53 |
54 |

There are {this.state.data.length} countries in the api

55 |
{this.renderCountries()}
56 |
57 |
58 | ) 59 | } 60 | } 61 | 62 | const rootElement = document.getElementById('root') 63 | ReactDOM.render(, rootElement) 64 | -------------------------------------------------------------------------------- /15_Third_Party_Packages/15_third_pary_packages_boilerplate/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /15_Third_Party_Packages/15_third_pary_packages_boilerplate/README.md: -------------------------------------------------------------------------------- 1 | # 30 Days of React App: Day 15 2 | 3 | In the project directory, you can run to start the project 4 | 5 | ### `npm start` 6 | -------------------------------------------------------------------------------- /15_Third_Party_Packages/15_third_pary_packages_boilerplate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "30-days-of-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /15_Third_Party_Packages/15_third_pary_packages_boilerplate/src/data/ten_most_highest_populations.js: -------------------------------------------------------------------------------- 1 | export const tenHighestPopulation = [ 2 | { country: 'World', population: 7693165599 }, 3 | { country: 'China', population: 1377422166 }, 4 | { country: 'India', population: 1295210000 }, 5 | { country: 'United States of America', population: 323947000 }, 6 | { country: 'Indonesia', population: 258705000 }, 7 | { country: 'Brazil', population: 206135893 }, 8 | { country: 'Pakistan', population: 194125062 }, 9 | { country: 'Nigeria', population: 186988000 }, 10 | { country: 'Bangladesh', population: 161006790 }, 11 | { country: 'Russian Federation', population: 146599183 }, 12 | { country: 'Japan', population: 126960000 }, 13 | ] 14 | -------------------------------------------------------------------------------- /15_Third_Party_Packages/15_third_pary_packages_boilerplate/src/images/asabeneh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/15_Third_Party_Packages/15_third_pary_packages_boilerplate/src/images/asabeneh.jpg -------------------------------------------------------------------------------- /15_Third_Party_Packages/15_third_pary_packages_boilerplate/src/images/css_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/15_Third_Party_Packages/15_third_pary_packages_boilerplate/src/images/css_logo.png -------------------------------------------------------------------------------- /15_Third_Party_Packages/15_third_pary_packages_boilerplate/src/images/html_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/15_Third_Party_Packages/15_third_pary_packages_boilerplate/src/images/html_logo.png -------------------------------------------------------------------------------- /15_Third_Party_Packages/15_third_pary_packages_boilerplate/src/images/js_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/15_Third_Party_Packages/15_third_pary_packages_boilerplate/src/images/js_logo.png -------------------------------------------------------------------------------- /15_Third_Party_Packages/15_third_pary_packages_boilerplate/src/images/react_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/15_Third_Party_Packages/15_third_pary_packages_boilerplate/src/images/react_logo.png -------------------------------------------------------------------------------- /16_Higher_Order_Component/16_higher_order_component_boilerplate/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /16_Higher_Order_Component/16_higher_order_component_boilerplate/README.md: -------------------------------------------------------------------------------- 1 | # 30 Days of React App: Day 16 2 | 3 | In the project directory, you can run to start the project 4 | 5 | ### `npm start` 6 | -------------------------------------------------------------------------------- /16_Higher_Order_Component/16_higher_order_component_boilerplate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "30-days-of-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /16_Higher_Order_Component/16_higher_order_component_boilerplate/src/data/ten_most_highest_populations.js: -------------------------------------------------------------------------------- 1 | export const tenHighestPopulation = [ 2 | { country: 'World', population: 7693165599 }, 3 | { country: 'China', population: 1377422166 }, 4 | { country: 'India', population: 1295210000 }, 5 | { country: 'United States of America', population: 323947000 }, 6 | { country: 'Indonesia', population: 258705000 }, 7 | { country: 'Brazil', population: 206135893 }, 8 | { country: 'Pakistan', population: 194125062 }, 9 | { country: 'Nigeria', population: 186988000 }, 10 | { country: 'Bangladesh', population: 161006790 }, 11 | { country: 'Russian Federation', population: 146599183 }, 12 | { country: 'Japan', population: 126960000 }, 13 | ] 14 | -------------------------------------------------------------------------------- /16_Higher_Order_Component/16_higher_order_component_boilerplate/src/images/asabeneh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/16_Higher_Order_Component/16_higher_order_component_boilerplate/src/images/asabeneh.jpg -------------------------------------------------------------------------------- /16_Higher_Order_Component/16_higher_order_component_boilerplate/src/images/css_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/16_Higher_Order_Component/16_higher_order_component_boilerplate/src/images/css_logo.png -------------------------------------------------------------------------------- /16_Higher_Order_Component/16_higher_order_component_boilerplate/src/images/html_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/16_Higher_Order_Component/16_higher_order_component_boilerplate/src/images/html_logo.png -------------------------------------------------------------------------------- /16_Higher_Order_Component/16_higher_order_component_boilerplate/src/images/js_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/16_Higher_Order_Component/16_higher_order_component_boilerplate/src/images/js_logo.png -------------------------------------------------------------------------------- /16_Higher_Order_Component/16_higher_order_component_boilerplate/src/images/react_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/16_Higher_Order_Component/16_higher_order_component_boilerplate/src/images/react_logo.png -------------------------------------------------------------------------------- /17_React_Router/17_react_router_boilerplate/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /17_React_Router/17_react_router_boilerplate/README.md: -------------------------------------------------------------------------------- 1 | # 30 Days of React App: Day 17 2 | 3 | In the project directory, you can run to start the project 4 | 5 | ### `npm start` 6 | -------------------------------------------------------------------------------- /17_React_Router/17_react_router_boilerplate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "30-days-of-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /17_React_Router/17_react_router_boilerplate/src/data/ten_most_highest_populations.js: -------------------------------------------------------------------------------- 1 | export const tenHighestPopulation = [ 2 | { country: 'World', population: 7693165599 }, 3 | { country: 'China', population: 1377422166 }, 4 | { country: 'India', population: 1295210000 }, 5 | { country: 'United States of America', population: 323947000 }, 6 | { country: 'Indonesia', population: 258705000 }, 7 | { country: 'Brazil', population: 206135893 }, 8 | { country: 'Pakistan', population: 194125062 }, 9 | { country: 'Nigeria', population: 186988000 }, 10 | { country: 'Bangladesh', population: 161006790 }, 11 | { country: 'Russian Federation', population: 146599183 }, 12 | { country: 'Japan', population: 126960000 }, 13 | ] 14 | -------------------------------------------------------------------------------- /17_React_Router/17_react_router_boilerplate/src/images/asabeneh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/17_React_Router/17_react_router_boilerplate/src/images/asabeneh.jpg -------------------------------------------------------------------------------- /17_React_Router/17_react_router_boilerplate/src/images/css_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/17_React_Router/17_react_router_boilerplate/src/images/css_logo.png -------------------------------------------------------------------------------- /17_React_Router/17_react_router_boilerplate/src/images/html_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/17_React_Router/17_react_router_boilerplate/src/images/html_logo.png -------------------------------------------------------------------------------- /17_React_Router/17_react_router_boilerplate/src/images/js_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/17_React_Router/17_react_router_boilerplate/src/images/js_logo.png -------------------------------------------------------------------------------- /17_React_Router/17_react_router_boilerplate/src/images/react_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/17_React_Router/17_react_router_boilerplate/src/images/react_logo.png -------------------------------------------------------------------------------- /18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/README.md: -------------------------------------------------------------------------------- 1 | # 30 Days of React App: Day 18 2 | 3 | In the project directory, you can run to start the project 4 | 5 | ### `npm start` 6 | -------------------------------------------------------------------------------- /18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "30-days-of-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/src/data/ten_most_highest_populations.js: -------------------------------------------------------------------------------- 1 | export const tenHighestPopulation = [ 2 | { country: 'World', population: 7693165599 }, 3 | { country: 'China', population: 1377422166 }, 4 | { country: 'India', population: 1295210000 }, 5 | { country: 'United States of America', population: 323947000 }, 6 | { country: 'Indonesia', population: 258705000 }, 7 | { country: 'Brazil', population: 206135893 }, 8 | { country: 'Pakistan', population: 194125062 }, 9 | { country: 'Nigeria', population: 186988000 }, 10 | { country: 'Bangladesh', population: 161006790 }, 11 | { country: 'Russian Federation', population: 146599183 }, 12 | { country: 'Japan', population: 126960000 }, 13 | ] 14 | -------------------------------------------------------------------------------- /18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/src/images/asabeneh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/src/images/asabeneh.jpg -------------------------------------------------------------------------------- /18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/src/images/css_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/src/images/css_logo.png -------------------------------------------------------------------------------- /18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/src/images/html_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/src/images/html_logo.png -------------------------------------------------------------------------------- /18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/src/images/js_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/src/images/js_logo.png -------------------------------------------------------------------------------- /18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/src/images/react_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/src/images/react_logo.png -------------------------------------------------------------------------------- /18_Fetch_And_Axios/18_fetch_and_axios_boilerplate/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import ReactDOM from 'react-dom' 3 | import axios from 'axios' 4 | 5 | const Country = ({ country: { name, flag, population } }) => { 6 | return ( 7 |
8 |
9 | {name} 10 |
11 |

{name.toUpperCase()}

12 |
13 |

14 | Population: 15 | {population} 16 |

17 |
18 |
19 | ) 20 | } 21 | 22 | class App extends Component { 23 | state = { 24 | data: [], 25 | } 26 | 27 | componentDidMount() { 28 | this.fetchCountryData() 29 | } 30 | fetchCountryData = async () => { 31 | const url = 'https://restcountries.eu/rest/v2/all' 32 | try { 33 | const response = await axios.get(url) 34 | const data = await response.data 35 | this.setState({ 36 | data, 37 | }) 38 | } catch (error) { 39 | console.log(error) 40 | } 41 | } 42 | 43 | render() { 44 | return ( 45 |
46 |

React Component Life Cycle

47 |

Calling API

48 |
49 |

There are {this.state.data.length} countries in the api

50 |
51 | {this.state.data.map((country) => ( 52 | 53 | ))} 54 |
55 |
56 |
57 | ) 58 | } 59 | } 60 | 61 | const rootElement = document.getElementById('root') 62 | ReactDOM.render(, rootElement) 63 | -------------------------------------------------------------------------------- /19_projects/19_projects.md: -------------------------------------------------------------------------------- 1 |
2 |

30 Days Of React: Projects

3 | 4 | 5 |
6 | 7 | [<< Day 18](../18_Fetch_And_Axios/18_fetch_axios.md) | [Day 20>>]() 8 | 9 | 10 | 11 | - [Projects](#projects) 12 | - [Exercises](#exercises) 13 | - [Exercises: Level 1](#exercises-level-1) 14 | 15 | # Projects 16 | 17 | Congratulations for making it to this far. Now, you have a solid understanding of React. I believe we have covered most important features of React and your are ready to work on projects. What we have covered so far is the old version of React. Starting from Day 20, we will learn React Hooks. In the next three days you will work on projects only. 18 | 19 | # Exercises 20 | 21 | ## Exercises: Level 1 22 | 23 | Use the following two APIs, [all cats](https://api.thecatapi.com/v1/breeds) and [a single cat][https://api.thecatapi.com/v1/images/search?breed_id=abys]. In the single cat API, you can get url property which is the image of the cat. 24 | Your result should look like this [demo](https://www.30daysofreact.com/day-19/cats). 25 | 26 | 🎉 CONGRATULATIONS ! 🎉 27 | 28 | [<< Day 18](../18_Fetch_And_Axios/18_fetch_axios.md) | [Day 20>>]() 29 | -------------------------------------------------------------------------------- /19_projects/19_projects_boilerplate/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /19_projects/19_projects_boilerplate/README.md: -------------------------------------------------------------------------------- 1 | # 30 Days of React App: Day 19 2 | 3 | In the project directory, you can run to start the project 4 | 5 | ### `npm start` 6 | -------------------------------------------------------------------------------- /19_projects/19_projects_boilerplate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "30-days-of-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /19_projects/19_projects_boilerplate/src/data/ten_most_highest_populations.js: -------------------------------------------------------------------------------- 1 | export const tenHighestPopulation = [ 2 | { country: 'World', population: 7693165599 }, 3 | { country: 'China', population: 1377422166 }, 4 | { country: 'India', population: 1295210000 }, 5 | { country: 'United States of America', population: 323947000 }, 6 | { country: 'Indonesia', population: 258705000 }, 7 | { country: 'Brazil', population: 206135893 }, 8 | { country: 'Pakistan', population: 194125062 }, 9 | { country: 'Nigeria', population: 186988000 }, 10 | { country: 'Bangladesh', population: 161006790 }, 11 | { country: 'Russian Federation', population: 146599183 }, 12 | { country: 'Japan', population: 126960000 }, 13 | ] 14 | -------------------------------------------------------------------------------- /19_projects/19_projects_boilerplate/src/images/asabeneh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/19_projects/19_projects_boilerplate/src/images/asabeneh.jpg -------------------------------------------------------------------------------- /19_projects/19_projects_boilerplate/src/images/css_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/19_projects/19_projects_boilerplate/src/images/css_logo.png -------------------------------------------------------------------------------- /19_projects/19_projects_boilerplate/src/images/html_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/19_projects/19_projects_boilerplate/src/images/html_logo.png -------------------------------------------------------------------------------- /19_projects/19_projects_boilerplate/src/images/js_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/19_projects/19_projects_boilerplate/src/images/js_logo.png -------------------------------------------------------------------------------- /19_projects/19_projects_boilerplate/src/images/react_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/19_projects/19_projects_boilerplate/src/images/react_logo.png -------------------------------------------------------------------------------- /19_projects/19_projects_boilerplate/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import ReactDOM from 'react-dom' 3 | import axios from 'axios' 4 | 5 | const Country = ({ 6 | country: { name, capital, flag, languages, population, currency }, 7 | }) => { 8 | const formatedCapital = 9 | capital.length > 0 ? ( 10 | <> 11 | Capital: 12 | {capital} 13 | 14 | ) : ( 15 | '' 16 | ) 17 | const formatLanguage = languages.length > 1 ? `Languages` : `Language` 18 | console.log(languages) 19 | return ( 20 |
21 |
22 | {name} 23 |
24 |

{name.toUpperCase()}

25 |
26 |

{formatedCapital}

27 |

28 | {formatLanguage}: 29 | {languages.map((language) => language.name).join(', ')} 30 |

31 |

32 | Population: 33 | {population.toLocaleString()} 34 |

35 |

36 | Currency: 37 | {currency} 38 |

39 |
40 |
41 | ) 42 | } 43 | 44 | class App extends Component { 45 | state = { 46 | data: [], 47 | } 48 | 49 | componentDidMount() { 50 | this.fetchCountryData() 51 | } 52 | fetchCountryData = async () => { 53 | const url = 'https://restcountries.eu/rest/v2/all' 54 | try { 55 | const response = await axios.get(url) 56 | const data = await response.data 57 | this.setState({ 58 | data, 59 | }) 60 | } catch (error) { 61 | console.log(error) 62 | } 63 | } 64 | 65 | render() { 66 | return ( 67 |
68 |

React Component Life Cycle

69 |

Calling API

70 |
71 |

There are {this.state.data.length} countries in the api

72 |
73 | {this.state.data.map((country) => ( 74 | 75 | ))} 76 |
77 |
78 |
79 | ) 80 | } 81 | } 82 | 83 | const rootElement = document.getElementById('root') 84 | ReactDOM.render(, rootElement) 85 | -------------------------------------------------------------------------------- /20_projects/20_projects.md: -------------------------------------------------------------------------------- 1 |
2 |

30 Days Of React: Projects

3 | 4 | 5 |
6 | 7 | [<< Day 19](../19_projects/19_projects.md) | [Day 21>>]() 8 | 9 | 10 | 11 | - [Projects](#projects) 12 | - [Exercises](#exercises) 13 | - [Exercises: Level 1](#exercises-level-1) 14 | 15 | # Projects 16 | 17 | Congratulations for making it to this far. Now, you have a solid understanding of React. I believe we have covered most important features of React and your are ready to work on projects. What we have covered so far is the old version of React. Starting from Day 20, we will learn React Hooks. In the next three days you will work on projects only. 18 | 19 | # Exercises 20 | 21 | ## Exercises: Level 1 22 | 23 | Use the following two APIs, [all cats](https://api.thecatapi.com/v1/breeds) and [a single cat][https://api.thecatapi.com/v1/images/search?breed_id=abys]. In the single cat API, you can get url property which is the image of the cat. 24 | Your result should look like this [demo](https://www.30daysofreact.com/day-20/cats). 25 | 26 | 🎉 CONGRATULATIONS ! 🎉 27 | 28 | [<< Day 19](../19_projects/19_projects.md) | [Day 21>>]() 29 | -------------------------------------------------------------------------------- /20_projects/20_projects_boilerplate/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /20_projects/20_projects_boilerplate/README.md: -------------------------------------------------------------------------------- 1 | # 30 Days of React App: Day 20 2 | 3 | In the project directory, you can run to start the project 4 | 5 | ### `npm start` 6 | -------------------------------------------------------------------------------- /20_projects/20_projects_boilerplate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "30-days-of-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /20_projects/20_projects_boilerplate/src/data/ten_most_highest_populations.js: -------------------------------------------------------------------------------- 1 | export const tenHighestPopulation = [ 2 | { country: 'World', population: 7693165599 }, 3 | { country: 'China', population: 1377422166 }, 4 | { country: 'India', population: 1295210000 }, 5 | { country: 'United States of America', population: 323947000 }, 6 | { country: 'Indonesia', population: 258705000 }, 7 | { country: 'Brazil', population: 206135893 }, 8 | { country: 'Pakistan', population: 194125062 }, 9 | { country: 'Nigeria', population: 186988000 }, 10 | { country: 'Bangladesh', population: 161006790 }, 11 | { country: 'Russian Federation', population: 146599183 }, 12 | { country: 'Japan', population: 126960000 }, 13 | ] 14 | -------------------------------------------------------------------------------- /20_projects/20_projects_boilerplate/src/images/asabeneh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/20_projects/20_projects_boilerplate/src/images/asabeneh.jpg -------------------------------------------------------------------------------- /20_projects/20_projects_boilerplate/src/images/css_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/20_projects/20_projects_boilerplate/src/images/css_logo.png -------------------------------------------------------------------------------- /20_projects/20_projects_boilerplate/src/images/html_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/20_projects/20_projects_boilerplate/src/images/html_logo.png -------------------------------------------------------------------------------- /20_projects/20_projects_boilerplate/src/images/js_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/20_projects/20_projects_boilerplate/src/images/js_logo.png -------------------------------------------------------------------------------- /20_projects/20_projects_boilerplate/src/images/react_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/20_projects/20_projects_boilerplate/src/images/react_logo.png -------------------------------------------------------------------------------- /20_projects/20_projects_boilerplate/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import ReactDOM from 'react-dom' 3 | import axios from 'axios' 4 | 5 | const Country = ({ 6 | country: { name, capital, flag, languages, population, currency }, 7 | }) => { 8 | const formatedCapital = 9 | capital.length > 0 ? ( 10 | <> 11 | Capital: 12 | {capital} 13 | 14 | ) : ( 15 | '' 16 | ) 17 | const formatLanguage = languages.length > 1 ? `Languages` : `Language` 18 | console.log(languages) 19 | return ( 20 |
21 |
22 | {name} 23 |
24 |

{name.toUpperCase()}

25 |
26 |

{formatedCapital}

27 |

28 | {formatLanguage}: 29 | {languages.map((language) => language.name).join(', ')} 30 |

31 |

32 | Population: 33 | {population.toLocaleString()} 34 |

35 |

36 | Currency: 37 | {currency} 38 |

39 |
40 |
41 | ) 42 | } 43 | 44 | class App extends Component { 45 | state = { 46 | data: [], 47 | } 48 | 49 | componentDidMount() { 50 | this.fetchCountryData() 51 | } 52 | fetchCountryData = async () => { 53 | const url = 'https://restcountries.eu/rest/v2/all' 54 | try { 55 | const response = await axios.get(url) 56 | const data = await response.data 57 | this.setState({ 58 | data, 59 | }) 60 | } catch (error) { 61 | console.log(error) 62 | } 63 | } 64 | 65 | render() { 66 | return ( 67 |
68 |

React Component Life Cycle

69 |

Calling API

70 |
71 |

There are {this.state.data.length} countries in the api

72 |
73 | {this.state.data.map((country) => ( 74 | 75 | ))} 76 |
77 |
78 |
79 | ) 80 | } 81 | } 82 | 83 | const rootElement = document.getElementById('root') 84 | ReactDOM.render(, rootElement) 85 | -------------------------------------------------------------------------------- /21_Introducing_Hooks/21_introducing_hooks_boilerplate/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /21_Introducing_Hooks/21_introducing_hooks_boilerplate/README.md: -------------------------------------------------------------------------------- 1 | # 30 Days of React App: Day 21 2 | 3 | In the project directory, you can run to start the project 4 | 5 | ### `npm start` 6 | -------------------------------------------------------------------------------- /21_Introducing_Hooks/21_introducing_hooks_boilerplate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "30-days-of-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /21_Introducing_Hooks/21_introducing_hooks_boilerplate/src/data/ten_most_highest_populations.js: -------------------------------------------------------------------------------- 1 | export const tenHighestPopulation = [ 2 | { country: 'World', population: 7693165599 }, 3 | { country: 'China', population: 1377422166 }, 4 | { country: 'India', population: 1295210000 }, 5 | { country: 'United States of America', population: 323947000 }, 6 | { country: 'Indonesia', population: 258705000 }, 7 | { country: 'Brazil', population: 206135893 }, 8 | { country: 'Pakistan', population: 194125062 }, 9 | { country: 'Nigeria', population: 186988000 }, 10 | { country: 'Bangladesh', population: 161006790 }, 11 | { country: 'Russian Federation', population: 146599183 }, 12 | { country: 'Japan', population: 126960000 }, 13 | ] 14 | -------------------------------------------------------------------------------- /21_Introducing_Hooks/21_introducing_hooks_boilerplate/src/images/asabeneh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/21_Introducing_Hooks/21_introducing_hooks_boilerplate/src/images/asabeneh.jpg -------------------------------------------------------------------------------- /21_Introducing_Hooks/21_introducing_hooks_boilerplate/src/images/css_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/21_Introducing_Hooks/21_introducing_hooks_boilerplate/src/images/css_logo.png -------------------------------------------------------------------------------- /21_Introducing_Hooks/21_introducing_hooks_boilerplate/src/images/html_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/21_Introducing_Hooks/21_introducing_hooks_boilerplate/src/images/html_logo.png -------------------------------------------------------------------------------- /21_Introducing_Hooks/21_introducing_hooks_boilerplate/src/images/js_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/21_Introducing_Hooks/21_introducing_hooks_boilerplate/src/images/js_logo.png -------------------------------------------------------------------------------- /21_Introducing_Hooks/21_introducing_hooks_boilerplate/src/images/react_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/21_Introducing_Hooks/21_introducing_hooks_boilerplate/src/images/react_logo.png -------------------------------------------------------------------------------- /21_Introducing_Hooks/21_introducing_hooks_boilerplate/src/index.scss: -------------------------------------------------------------------------------- 1 | /* == General style === */ 2 | 3 | * { 4 | box-sizing: border-box; 5 | padding: 0; 6 | margin: 0; 7 | } 8 | 9 | html, 10 | body { 11 | height: 100%; 12 | line-height: 1.5; 13 | font-family: 'Montserrat'; 14 | font-weight: 300; 15 | color: black; 16 | } 17 | 18 | .root { 19 | min-height: 100%; 20 | position: relative; 21 | } 22 | 23 | .header-wrapper, 24 | .main-wrapper, 25 | .footer-wrapper { 26 | width: 85%; 27 | margin: auto; 28 | } 29 | 30 | .header-wrapper, 31 | .main-wrapper { 32 | padding: 10px; 33 | margin: 2px auto; 34 | } 35 | 36 | h1 { 37 | font-size: 70px; 38 | font-weight: 300; 39 | } 40 | 41 | h2, 42 | h3 { 43 | font-weight: 300; 44 | } 45 | 46 | header { 47 | background-color: #61dbfb; 48 | padding: 25; 49 | padding: 10px; 50 | } 51 | 52 | main { 53 | padding: 10px; 54 | padding-bottom: 60px; 55 | /* Height of the footer */ 56 | } 57 | 58 | ul { 59 | margin-left: 15px; 60 | } 61 | 62 | ul li { 63 | list-style: none; 64 | } 65 | 66 | footer { 67 | position: absolute; 68 | bottom: 0; 69 | width: 100%; 70 | height: 60px; 71 | /* Height of the footer */ 72 | background: #6cf; 73 | } 74 | 75 | .footer-wrapper { 76 | font-weight: 400; 77 | text-align: center; 78 | line-height: 60px; 79 | } 80 | .user-card { 81 | margin-top: 10px; 82 | } 83 | .user-card > img { 84 | border-radius: 50%; 85 | width: 14%; 86 | } 87 | -------------------------------------------------------------------------------- /22_Form_Using_Hooks/22_form_using_hooks_boilerplate/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /22_Form_Using_Hooks/22_form_using_hooks_boilerplate/README.md: -------------------------------------------------------------------------------- 1 | # 30 Days of React App: Day 22 2 | 3 | In the project directory, you can run to start the project 4 | 5 | ### `npm start` 6 | -------------------------------------------------------------------------------- /22_Form_Using_Hooks/22_form_using_hooks_boilerplate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "30-days-of-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /22_Form_Using_Hooks/22_form_using_hooks_boilerplate/src/data/ten_most_highest_populations.js: -------------------------------------------------------------------------------- 1 | export const tenHighestPopulation = [ 2 | { country: 'World', population: 7693165599 }, 3 | { country: 'China', population: 1377422166 }, 4 | { country: 'India', population: 1295210000 }, 5 | { country: 'United States of America', population: 323947000 }, 6 | { country: 'Indonesia', population: 258705000 }, 7 | { country: 'Brazil', population: 206135893 }, 8 | { country: 'Pakistan', population: 194125062 }, 9 | { country: 'Nigeria', population: 186988000 }, 10 | { country: 'Bangladesh', population: 161006790 }, 11 | { country: 'Russian Federation', population: 146599183 }, 12 | { country: 'Japan', population: 126960000 }, 13 | ] 14 | -------------------------------------------------------------------------------- /22_Form_Using_Hooks/22_form_using_hooks_boilerplate/src/images/asabeneh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/22_Form_Using_Hooks/22_form_using_hooks_boilerplate/src/images/asabeneh.jpg -------------------------------------------------------------------------------- /22_Form_Using_Hooks/22_form_using_hooks_boilerplate/src/images/css_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/22_Form_Using_Hooks/22_form_using_hooks_boilerplate/src/images/css_logo.png -------------------------------------------------------------------------------- /22_Form_Using_Hooks/22_form_using_hooks_boilerplate/src/images/html_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/22_Form_Using_Hooks/22_form_using_hooks_boilerplate/src/images/html_logo.png -------------------------------------------------------------------------------- /22_Form_Using_Hooks/22_form_using_hooks_boilerplate/src/images/js_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/22_Form_Using_Hooks/22_form_using_hooks_boilerplate/src/images/js_logo.png -------------------------------------------------------------------------------- /22_Form_Using_Hooks/22_form_using_hooks_boilerplate/src/images/react_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/22_Form_Using_Hooks/22_form_using_hooks_boilerplate/src/images/react_logo.png -------------------------------------------------------------------------------- /22_Form_Using_Hooks/22_form_using_hooks_boilerplate/src/index.scss: -------------------------------------------------------------------------------- 1 | /* == General style === */ 2 | 3 | * { 4 | box-sizing: border-box; 5 | padding: 0; 6 | margin: 0; 7 | } 8 | 9 | html, 10 | body { 11 | height: 100%; 12 | line-height: 1.5; 13 | font-family: 'Montserrat'; 14 | font-weight: 300; 15 | color: black; 16 | } 17 | 18 | .root { 19 | min-height: 100%; 20 | position: relative; 21 | } 22 | 23 | .header-wrapper, 24 | .main-wrapper, 25 | .footer-wrapper { 26 | width: 85%; 27 | margin: auto; 28 | } 29 | 30 | .header-wrapper, 31 | .main-wrapper { 32 | padding: 10px; 33 | margin: 2px auto; 34 | } 35 | 36 | h1 { 37 | font-size: 70px; 38 | font-weight: 300; 39 | } 40 | 41 | h2, 42 | h3 { 43 | font-weight: 300; 44 | } 45 | 46 | header { 47 | background-color: #61dbfb; 48 | padding: 25; 49 | padding: 10px; 50 | } 51 | 52 | main { 53 | padding: 10px; 54 | padding-bottom: 60px; 55 | /* Height of the footer */ 56 | } 57 | 58 | ul { 59 | margin-left: 15px; 60 | } 61 | 62 | ul li { 63 | list-style: none; 64 | } 65 | 66 | footer { 67 | position: absolute; 68 | bottom: 0; 69 | width: 100%; 70 | height: 60px; 71 | /* Height of the footer */ 72 | background: #6cf; 73 | } 74 | 75 | .footer-wrapper { 76 | font-weight: 400; 77 | text-align: center; 78 | line-height: 60px; 79 | } 80 | .user-card { 81 | margin-top: 10px; 82 | } 83 | .user-card > img { 84 | border-radius: 50%; 85 | width: 14%; 86 | } 87 | -------------------------------------------------------------------------------- /23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks_boilerplate/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks_boilerplate/README.md: -------------------------------------------------------------------------------- 1 | # 30 Days of React App: Day 23 2 | 3 | In the project directory, you can run to start the project 4 | 5 | ### `npm start` 6 | -------------------------------------------------------------------------------- /23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks_boilerplate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "30-days-of-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks_boilerplate/src/data/ten_most_highest_populations.js: -------------------------------------------------------------------------------- 1 | export const tenHighestPopulation = [ 2 | { country: 'World', population: 7693165599 }, 3 | { country: 'China', population: 1377422166 }, 4 | { country: 'India', population: 1295210000 }, 5 | { country: 'United States of America', population: 323947000 }, 6 | { country: 'Indonesia', population: 258705000 }, 7 | { country: 'Brazil', population: 206135893 }, 8 | { country: 'Pakistan', population: 194125062 }, 9 | { country: 'Nigeria', population: 186988000 }, 10 | { country: 'Bangladesh', population: 161006790 }, 11 | { country: 'Russian Federation', population: 146599183 }, 12 | { country: 'Japan', population: 126960000 }, 13 | ] 14 | -------------------------------------------------------------------------------- /23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks_boilerplate/src/images/asabeneh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks_boilerplate/src/images/asabeneh.jpg -------------------------------------------------------------------------------- /23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks_boilerplate/src/images/css_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks_boilerplate/src/images/css_logo.png -------------------------------------------------------------------------------- /23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks_boilerplate/src/images/html_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks_boilerplate/src/images/html_logo.png -------------------------------------------------------------------------------- /23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks_boilerplate/src/images/js_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks_boilerplate/src/images/js_logo.png -------------------------------------------------------------------------------- /23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks_boilerplate/src/images/react_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks_boilerplate/src/images/react_logo.png -------------------------------------------------------------------------------- /23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks_boilerplate/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react' 2 | import axios from 'axios' 3 | import ReactDOM from 'react-dom' 4 | 5 | const Country = ({ country: { name, flag } }) => { 6 | return ( 7 |
8 |
9 | {name} 10 |
11 |

{name.toUpperCase()}

12 |
13 |

14 | Population: 15 |

16 |
17 |
18 | ) 19 | } 20 | 21 | const App = (props) => { 22 | // setting initial state and method to update state 23 | const [data, setData] = useState([]) 24 | 25 | useEffect(() => { 26 | fetchData() 27 | }, []) 28 | 29 | const fetchData = async () => { 30 | const url = 'https://restcountries.eu/rest/v2/all' 31 | try { 32 | const response = await fetch(url) 33 | const data = await response.json() 34 | setData(data) 35 | } catch (error) { 36 | console.log(error) 37 | } 38 | } 39 | 40 | return ( 41 |
42 |

Fetching Data Using Hook

43 |

Calling API

44 |
45 |

There are {data.length} countries in the api

46 |
47 | {data.map((country) => ( 48 | 49 | ))} 50 |
51 |
52 |
53 | ) 54 | } 55 | 56 | const rootElement = document.getElementById('root') 57 | ReactDOM.render(, rootElement) 58 | -------------------------------------------------------------------------------- /23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks_boilerplate/src/index.scss: -------------------------------------------------------------------------------- 1 | /* == General style === */ 2 | 3 | * { 4 | box-sizing: border-box; 5 | padding: 0; 6 | margin: 0; 7 | } 8 | 9 | html, 10 | body { 11 | height: 100%; 12 | line-height: 1.5; 13 | font-family: 'Montserrat'; 14 | font-weight: 300; 15 | color: black; 16 | } 17 | 18 | .root { 19 | min-height: 100%; 20 | position: relative; 21 | } 22 | 23 | .header-wrapper, 24 | .main-wrapper, 25 | .footer-wrapper { 26 | width: 85%; 27 | margin: auto; 28 | } 29 | 30 | .header-wrapper, 31 | .main-wrapper { 32 | padding: 10px; 33 | margin: 2px auto; 34 | } 35 | 36 | h1 { 37 | font-size: 70px; 38 | font-weight: 300; 39 | } 40 | 41 | h2, 42 | h3 { 43 | font-weight: 300; 44 | } 45 | 46 | header { 47 | background-color: #61dbfb; 48 | padding: 25; 49 | padding: 10px; 50 | } 51 | 52 | main { 53 | padding: 10px; 54 | padding-bottom: 60px; 55 | /* Height of the footer */ 56 | } 57 | 58 | ul { 59 | margin-left: 15px; 60 | } 61 | 62 | ul li { 63 | list-style: none; 64 | } 65 | 66 | footer { 67 | position: absolute; 68 | bottom: 0; 69 | width: 100%; 70 | height: 60px; 71 | /* Height of the footer */ 72 | background: #6cf; 73 | } 74 | 75 | .footer-wrapper { 76 | font-weight: 400; 77 | text-align: center; 78 | line-height: 60px; 79 | } 80 | .user-card { 81 | margin-top: 10px; 82 | } 83 | .user-card > img { 84 | border-radius: 50%; 85 | width: 14%; 86 | } 87 | -------------------------------------------------------------------------------- /24_projects/24_projects.md: -------------------------------------------------------------------------------- 1 |
2 |

30 Days Of React: Projects

3 | 4 | 5 |
6 | 7 | [<< Day 23](../23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks.md) | [Day 25>>](../25_Custom_Hooks/25_custom_hooks.md) 8 | 9 | 10 | 11 | # Project Using React Hooks 12 | 13 | # Exercises 14 | 15 | 1 Build the following application using [countries API](https://restcountries.eu/rest/v2/all). 16 | [DEMO](https://www.30daysofreact.com/day-23/countries-data) 17 | 18 | 🎉 CONGRATULATIONS ! 🎉 19 | 20 | [<< Day 23](../23_Fetching_Data_Using_Hooks/23_fetching_data_using_hooks.md) | [Day 25>>](../25_Custom_Hooks/25_custom_hooks.md) 21 | -------------------------------------------------------------------------------- /24_projects/24_projects_boilerplate/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /24_projects/24_projects_boilerplate/README.md: -------------------------------------------------------------------------------- 1 | # 30 Days of React App: Day 24 2 | 3 | In the project directory, you can run to start the project 4 | 5 | ### `npm start` 6 | -------------------------------------------------------------------------------- /24_projects/24_projects_boilerplate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "30-days-of-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /24_projects/24_projects_boilerplate/src/data/ten_most_highest_populations.js: -------------------------------------------------------------------------------- 1 | export const tenHighestPopulation = [ 2 | { country: 'World', population: 7693165599 }, 3 | { country: 'China', population: 1377422166 }, 4 | { country: 'India', population: 1295210000 }, 5 | { country: 'United States of America', population: 323947000 }, 6 | { country: 'Indonesia', population: 258705000 }, 7 | { country: 'Brazil', population: 206135893 }, 8 | { country: 'Pakistan', population: 194125062 }, 9 | { country: 'Nigeria', population: 186988000 }, 10 | { country: 'Bangladesh', population: 161006790 }, 11 | { country: 'Russian Federation', population: 146599183 }, 12 | { country: 'Japan', population: 126960000 }, 13 | ] 14 | -------------------------------------------------------------------------------- /24_projects/24_projects_boilerplate/src/images/asabeneh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/24_projects/24_projects_boilerplate/src/images/asabeneh.jpg -------------------------------------------------------------------------------- /24_projects/24_projects_boilerplate/src/images/css_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/24_projects/24_projects_boilerplate/src/images/css_logo.png -------------------------------------------------------------------------------- /24_projects/24_projects_boilerplate/src/images/html_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/24_projects/24_projects_boilerplate/src/images/html_logo.png -------------------------------------------------------------------------------- /24_projects/24_projects_boilerplate/src/images/js_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/24_projects/24_projects_boilerplate/src/images/js_logo.png -------------------------------------------------------------------------------- /24_projects/24_projects_boilerplate/src/images/react_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/24_projects/24_projects_boilerplate/src/images/react_logo.png -------------------------------------------------------------------------------- /24_projects/24_projects_boilerplate/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react' 2 | import axios from 'axios' 3 | import ReactDOM from 'react-dom' 4 | 5 | const Country = ({ country: { name, flag } }) => { 6 | return ( 7 |
8 |
9 | {name} 10 |
11 |

{name.toUpperCase()}

12 |
13 |

14 | Population: 15 |

16 |
17 |
18 | ) 19 | } 20 | 21 | const App = (props) => { 22 | // setting initial state and method to update state 23 | const [data, setData] = useState([]) 24 | 25 | useEffect(() => { 26 | fetchData() 27 | }, []) 28 | 29 | const fetchData = async () => { 30 | const url = 'https://restcountries.eu/rest/v2/all' 31 | try { 32 | const response = await fetch(url) 33 | const data = await response.json() 34 | setData(data) 35 | } catch (error) { 36 | console.log(error) 37 | } 38 | } 39 | 40 | return ( 41 |
42 |

Fetching Data Using Hook

43 |

Calling API

44 |
45 |

There are {data.length} countries in the api

46 |
47 | {data.map((country) => ( 48 | 49 | ))} 50 |
51 |
52 |
53 | ) 54 | } 55 | 56 | const rootElement = document.getElementById('root') 57 | ReactDOM.render(, rootElement) 58 | -------------------------------------------------------------------------------- /24_projects/24_projects_boilerplate/src/index.scss: -------------------------------------------------------------------------------- 1 | /* == General style === */ 2 | 3 | * { 4 | box-sizing: border-box; 5 | padding: 0; 6 | margin: 0; 7 | } 8 | 9 | html, 10 | body { 11 | height: 100%; 12 | line-height: 1.5; 13 | font-family: 'Montserrat'; 14 | font-weight: 300; 15 | color: black; 16 | } 17 | 18 | .root { 19 | min-height: 100%; 20 | position: relative; 21 | } 22 | 23 | .header-wrapper, 24 | .main-wrapper, 25 | .footer-wrapper { 26 | width: 85%; 27 | margin: auto; 28 | } 29 | 30 | .header-wrapper, 31 | .main-wrapper { 32 | padding: 10px; 33 | margin: 2px auto; 34 | } 35 | 36 | h1 { 37 | font-size: 70px; 38 | font-weight: 300; 39 | } 40 | 41 | h2, 42 | h3 { 43 | font-weight: 300; 44 | } 45 | 46 | header { 47 | background-color: #61dbfb; 48 | padding: 25; 49 | padding: 10px; 50 | } 51 | 52 | main { 53 | padding: 10px; 54 | padding-bottom: 60px; 55 | /* Height of the footer */ 56 | } 57 | 58 | ul { 59 | margin-left: 15px; 60 | } 61 | 62 | ul li { 63 | list-style: none; 64 | } 65 | 66 | footer { 67 | position: absolute; 68 | bottom: 0; 69 | width: 100%; 70 | height: 60px; 71 | /* Height of the footer */ 72 | background: #6cf; 73 | } 74 | 75 | .footer-wrapper { 76 | font-weight: 400; 77 | text-align: center; 78 | line-height: 60px; 79 | } 80 | .user-card { 81 | margin-top: 10px; 82 | } 83 | .user-card > img { 84 | border-radius: 50%; 85 | width: 14%; 86 | } 87 | -------------------------------------------------------------------------------- /25_Custom_Hooks/25_custom_hooks_boilerplate/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /25_Custom_Hooks/25_custom_hooks_boilerplate/README.md: -------------------------------------------------------------------------------- 1 | # 30 Days of React App: Day 25 2 | 3 | In the project directory, you can run to start the project 4 | 5 | ### `npm start` 6 | -------------------------------------------------------------------------------- /25_Custom_Hooks/25_custom_hooks_boilerplate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "30-days-of-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /25_Custom_Hooks/25_custom_hooks_boilerplate/src/data/ten_most_highest_populations.js: -------------------------------------------------------------------------------- 1 | export const tenHighestPopulation = [ 2 | { country: 'World', population: 7693165599 }, 3 | { country: 'China', population: 1377422166 }, 4 | { country: 'India', population: 1295210000 }, 5 | { country: 'United States of America', population: 323947000 }, 6 | { country: 'Indonesia', population: 258705000 }, 7 | { country: 'Brazil', population: 206135893 }, 8 | { country: 'Pakistan', population: 194125062 }, 9 | { country: 'Nigeria', population: 186988000 }, 10 | { country: 'Bangladesh', population: 161006790 }, 11 | { country: 'Russian Federation', population: 146599183 }, 12 | { country: 'Japan', population: 126960000 }, 13 | ] 14 | -------------------------------------------------------------------------------- /25_Custom_Hooks/25_custom_hooks_boilerplate/src/images/asabeneh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/25_Custom_Hooks/25_custom_hooks_boilerplate/src/images/asabeneh.jpg -------------------------------------------------------------------------------- /25_Custom_Hooks/25_custom_hooks_boilerplate/src/images/css_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/25_Custom_Hooks/25_custom_hooks_boilerplate/src/images/css_logo.png -------------------------------------------------------------------------------- /25_Custom_Hooks/25_custom_hooks_boilerplate/src/images/html_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/25_Custom_Hooks/25_custom_hooks_boilerplate/src/images/html_logo.png -------------------------------------------------------------------------------- /25_Custom_Hooks/25_custom_hooks_boilerplate/src/images/js_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/25_Custom_Hooks/25_custom_hooks_boilerplate/src/images/js_logo.png -------------------------------------------------------------------------------- /25_Custom_Hooks/25_custom_hooks_boilerplate/src/images/react_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/25_Custom_Hooks/25_custom_hooks_boilerplate/src/images/react_logo.png -------------------------------------------------------------------------------- /25_Custom_Hooks/25_custom_hooks_boilerplate/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react' 2 | import axios from 'axios' 3 | import ReactDOM, { findDOMNode } from 'react-dom' 4 | import useFetch from './useFetch' 5 | 6 | const Country = ({ country: { name, flag, population } }) => { 7 | return ( 8 |
9 |
10 | {name} 11 |
12 |

{name.toUpperCase()}

13 |
14 |

15 | Population: 16 | {population} 17 |

18 |
19 |
20 | ) 21 | } 22 | 23 | const App = (props) => { 24 | const url = 'https://restcountries.eu/rest/v2/all' 25 | const data = useFetch(url) 26 | 27 | return ( 28 |
29 |

Custom Hooks

30 |

Calling API

31 |
32 |

There are {data.length} countries in the api

33 |
34 | {data.map((country) => ( 35 | 36 | ))} 37 |
38 |
39 |
40 | ) 41 | } 42 | 43 | const rootElement = document.getElementById('root') 44 | ReactDOM.render(, rootElement) 45 | -------------------------------------------------------------------------------- /25_Custom_Hooks/25_custom_hooks_boilerplate/src/index.scss: -------------------------------------------------------------------------------- 1 | /* == General style === */ 2 | 3 | * { 4 | box-sizing: border-box; 5 | padding: 0; 6 | margin: 0; 7 | } 8 | 9 | html, 10 | body { 11 | height: 100%; 12 | line-height: 1.5; 13 | font-family: 'Montserrat'; 14 | font-weight: 300; 15 | color: black; 16 | } 17 | 18 | .root { 19 | min-height: 100%; 20 | position: relative; 21 | } 22 | 23 | .header-wrapper, 24 | .main-wrapper, 25 | .footer-wrapper { 26 | width: 85%; 27 | margin: auto; 28 | } 29 | 30 | .header-wrapper, 31 | .main-wrapper { 32 | padding: 10px; 33 | margin: 2px auto; 34 | } 35 | 36 | h1 { 37 | font-size: 70px; 38 | font-weight: 300; 39 | } 40 | 41 | h2, 42 | h3 { 43 | font-weight: 300; 44 | } 45 | 46 | header { 47 | background-color: #61dbfb; 48 | padding: 25; 49 | padding: 10px; 50 | } 51 | 52 | main { 53 | padding: 10px; 54 | padding-bottom: 60px; 55 | /* Height of the footer */ 56 | } 57 | 58 | ul { 59 | margin-left: 15px; 60 | } 61 | 62 | ul li { 63 | list-style: none; 64 | } 65 | 66 | footer { 67 | position: absolute; 68 | bottom: 0; 69 | width: 100%; 70 | height: 60px; 71 | /* Height of the footer */ 72 | background: #6cf; 73 | } 74 | 75 | .footer-wrapper { 76 | font-weight: 400; 77 | text-align: center; 78 | line-height: 60px; 79 | } 80 | .user-card { 81 | margin-top: 10px; 82 | } 83 | .user-card > img { 84 | border-radius: 50%; 85 | width: 14%; 86 | } 87 | -------------------------------------------------------------------------------- /25_Custom_Hooks/25_custom_hooks_boilerplate/src/useFetch.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from 'react' 2 | 3 | export const useFetch = (url) => { 4 | const [data, setData] = useState([]) 5 | 6 | useEffect(() => { 7 | const fetchData = async () => { 8 | try { 9 | const response = await fetch(url) 10 | const data = await response.json() 11 | setData(data) 12 | } catch (error) { 13 | console.log(error) 14 | } 15 | } 16 | fetchData() 17 | }, [url]) 18 | 19 | return data 20 | } 21 | 22 | export default useFetch 23 | -------------------------------------------------------------------------------- /26_Context/26_context.md: -------------------------------------------------------------------------------- 1 |
2 |

30 Days Of React: Context

3 | 4 | 5 |
6 | 7 | [<< Day 25](../25_Custom_Hooks/25_custom_hooks.md) | [Day 27>>](../27_Ref/27_ref.md) 8 | 9 | 10 | # Context 11 | 12 | Context allow as to pass data through the component tree without having to pass props down manually to every child component at every level. 13 | 14 | In React, data is passed top-down (parent to child) via props, but this can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree. 15 | 16 | ## When to Use Context 17 | 18 | Context is designed to share data that can be considered “global” for a tree of React components, such as the current authenticated user, theme, or preferred language. For example, in the code below we manually thread through a “theme” prop in order to style the Button component: 19 | 20 | The above text has been taken from [react documentation](https://reactjs.org/docs/context.html) without any change. 21 | 22 | It seems the react documentation has pretty good information about context, you can go through the [react documentation](https://reactjs.org/docs/context.html). 23 | 24 | # Exercises 25 | 26 | 🎉 CONGRATULATIONS ! 🎉 27 | [<< Day 25](../25_Custom_Hooks/25_custom_hooks.md) | [Day 27>>](../27_Ref/27_ref.md) 28 | -------------------------------------------------------------------------------- /26_Context/26_context_boilerplate/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /26_Context/26_context_boilerplate/README.md: -------------------------------------------------------------------------------- 1 | # 30 Days of React App: Day 25 2 | 3 | In the project directory, you can run to start the project 4 | 5 | ### `npm start` 6 | -------------------------------------------------------------------------------- /26_Context/26_context_boilerplate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "30-days-of-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /26_Context/26_context_boilerplate/src/data/ten_most_highest_populations.js: -------------------------------------------------------------------------------- 1 | export const tenHighestPopulation = [ 2 | { country: 'World', population: 7693165599 }, 3 | { country: 'China', population: 1377422166 }, 4 | { country: 'India', population: 1295210000 }, 5 | { country: 'United States of America', population: 323947000 }, 6 | { country: 'Indonesia', population: 258705000 }, 7 | { country: 'Brazil', population: 206135893 }, 8 | { country: 'Pakistan', population: 194125062 }, 9 | { country: 'Nigeria', population: 186988000 }, 10 | { country: 'Bangladesh', population: 161006790 }, 11 | { country: 'Russian Federation', population: 146599183 }, 12 | { country: 'Japan', population: 126960000 }, 13 | ] 14 | -------------------------------------------------------------------------------- /26_Context/26_context_boilerplate/src/images/asabeneh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/26_Context/26_context_boilerplate/src/images/asabeneh.jpg -------------------------------------------------------------------------------- /26_Context/26_context_boilerplate/src/images/css_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/26_Context/26_context_boilerplate/src/images/css_logo.png -------------------------------------------------------------------------------- /26_Context/26_context_boilerplate/src/images/html_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/26_Context/26_context_boilerplate/src/images/html_logo.png -------------------------------------------------------------------------------- /26_Context/26_context_boilerplate/src/images/js_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/26_Context/26_context_boilerplate/src/images/js_logo.png -------------------------------------------------------------------------------- /26_Context/26_context_boilerplate/src/images/react_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/26_Context/26_context_boilerplate/src/images/react_logo.png -------------------------------------------------------------------------------- /26_Context/26_context_boilerplate/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from 'react' 2 | import axios from 'axios' 3 | import ReactDOM, { findDOMNode } from 'react-dom' 4 | import useFetch from './useFetch' 5 | 6 | const Country = ({ country: { name, flag, population } }) => { 7 | return ( 8 |
9 |
10 | {name} 11 |
12 |

{name.toUpperCase()}

13 |
14 |

15 | Population: 16 | {population} 17 |

18 |
19 |
20 | ) 21 | } 22 | 23 | const App = (props) => { 24 | const url = 'https://restcountries.eu/rest/v2/all' 25 | const data = useFetch(url) 26 | 27 | return ( 28 |
29 |

Custom Hooks

30 |

Calling API

31 |
32 |

There are {data.length} countries in the api

33 |
34 | {data.map((country) => ( 35 | 36 | ))} 37 |
38 |
39 |
40 | ) 41 | } 42 | 43 | const rootElement = document.getElementById('root') 44 | ReactDOM.render(, rootElement) 45 | -------------------------------------------------------------------------------- /26_Context/26_context_boilerplate/src/index.scss: -------------------------------------------------------------------------------- 1 | /* == General style === */ 2 | 3 | * { 4 | box-sizing: border-box; 5 | padding: 0; 6 | margin: 0; 7 | } 8 | 9 | html, 10 | body { 11 | height: 100%; 12 | line-height: 1.5; 13 | font-family: 'Montserrat'; 14 | font-weight: 300; 15 | color: black; 16 | } 17 | 18 | .root { 19 | min-height: 100%; 20 | position: relative; 21 | } 22 | 23 | .header-wrapper, 24 | .main-wrapper, 25 | .footer-wrapper { 26 | width: 85%; 27 | margin: auto; 28 | } 29 | 30 | .header-wrapper, 31 | .main-wrapper { 32 | padding: 10px; 33 | margin: 2px auto; 34 | } 35 | 36 | h1 { 37 | font-size: 70px; 38 | font-weight: 300; 39 | } 40 | 41 | h2, 42 | h3 { 43 | font-weight: 300; 44 | } 45 | 46 | header { 47 | background-color: #61dbfb; 48 | padding: 25; 49 | padding: 10px; 50 | } 51 | 52 | main { 53 | padding: 10px; 54 | padding-bottom: 60px; 55 | /* Height of the footer */ 56 | } 57 | 58 | ul { 59 | margin-left: 15px; 60 | } 61 | 62 | ul li { 63 | list-style: none; 64 | } 65 | 66 | footer { 67 | position: absolute; 68 | bottom: 0; 69 | width: 100%; 70 | height: 60px; 71 | /* Height of the footer */ 72 | background: #6cf; 73 | } 74 | 75 | .footer-wrapper { 76 | font-weight: 400; 77 | text-align: center; 78 | line-height: 60px; 79 | } 80 | .user-card { 81 | margin-top: 10px; 82 | } 83 | .user-card > img { 84 | border-radius: 50%; 85 | width: 14%; 86 | } 87 | -------------------------------------------------------------------------------- /26_Context/26_context_boilerplate/src/useFetch.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from 'react' 2 | 3 | export const useFetch = (url) => { 4 | const [data, setData] = useState([]) 5 | 6 | useEffect(() => { 7 | const fetchData = async () => { 8 | try { 9 | const response = await fetch(url) 10 | const data = await response.json() 11 | setData(data) 12 | } catch (error) { 13 | console.log(error) 14 | } 15 | } 16 | fetchData() 17 | }, [url]) 18 | 19 | return data 20 | } 21 | 22 | export default useFetch 23 | -------------------------------------------------------------------------------- /27_Ref/27_ref_boilerplate/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /27_Ref/27_ref_boilerplate/README.md: -------------------------------------------------------------------------------- 1 | # 30 Days of React App: Day 25 2 | 3 | In the project directory, you can run to start the project 4 | 5 | ### `npm start` 6 | -------------------------------------------------------------------------------- /27_Ref/27_ref_boilerplate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "30-days-of-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /27_Ref/27_ref_boilerplate/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 14 | 15 | 30 Days Of React App 16 | 106 | 107 | 108 | 109 |
110 | 111 | 112 | -------------------------------------------------------------------------------- /27_Ref/27_ref_boilerplate/src/data/ten_most_highest_populations.js: -------------------------------------------------------------------------------- 1 | export const tenHighestPopulation = [ 2 | { country: 'World', population: 7693165599 }, 3 | { country: 'China', population: 1377422166 }, 4 | { country: 'India', population: 1295210000 }, 5 | { country: 'United States of America', population: 323947000 }, 6 | { country: 'Indonesia', population: 258705000 }, 7 | { country: 'Brazil', population: 206135893 }, 8 | { country: 'Pakistan', population: 194125062 }, 9 | { country: 'Nigeria', population: 186988000 }, 10 | { country: 'Bangladesh', population: 161006790 }, 11 | { country: 'Russian Federation', population: 146599183 }, 12 | { country: 'Japan', population: 126960000 }, 13 | ] 14 | -------------------------------------------------------------------------------- /27_Ref/27_ref_boilerplate/src/images/asabeneh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/27_Ref/27_ref_boilerplate/src/images/asabeneh.jpg -------------------------------------------------------------------------------- /27_Ref/27_ref_boilerplate/src/images/css_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/27_Ref/27_ref_boilerplate/src/images/css_logo.png -------------------------------------------------------------------------------- /27_Ref/27_ref_boilerplate/src/images/html_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/27_Ref/27_ref_boilerplate/src/images/html_logo.png -------------------------------------------------------------------------------- /27_Ref/27_ref_boilerplate/src/images/js_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/27_Ref/27_ref_boilerplate/src/images/js_logo.png -------------------------------------------------------------------------------- /27_Ref/27_ref_boilerplate/src/images/react_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/27_Ref/27_ref_boilerplate/src/images/react_logo.png -------------------------------------------------------------------------------- /27_Ref/27_ref_boilerplate/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { useRef } from 'react' 2 | import ReactDOM from 'react-dom' 3 | 4 | const App = (props) => { 5 | const ref = useRef(null) 6 | const onClick = () => { 7 | ref.current.style.backgroundColor = '#61dbfb' 8 | ref.current.style.padding = '50px' 9 | ref.current.style.textAlign = 'center' 10 | } 11 | return ( 12 |
13 |

How to style HTML from the DOM tree using useRef

14 | 15 |
16 | ) 17 | } 18 | 19 | const rootElement = document.getElementById('root') 20 | ReactDOM.render(, rootElement) 21 | -------------------------------------------------------------------------------- /27_Ref/27_ref_boilerplate/src/index.scss: -------------------------------------------------------------------------------- 1 | /* == General style === */ 2 | 3 | * { 4 | box-sizing: border-box; 5 | padding: 0; 6 | margin: 0; 7 | } 8 | 9 | html, 10 | body { 11 | height: 100%; 12 | line-height: 1.5; 13 | font-family: 'Montserrat'; 14 | font-weight: 300; 15 | color: black; 16 | } 17 | 18 | .root { 19 | min-height: 100%; 20 | position: relative; 21 | } 22 | 23 | .header-wrapper, 24 | .main-wrapper, 25 | .footer-wrapper { 26 | width: 85%; 27 | margin: auto; 28 | } 29 | 30 | .header-wrapper, 31 | .main-wrapper { 32 | padding: 10px; 33 | margin: 2px auto; 34 | } 35 | 36 | h1 { 37 | font-size: 70px; 38 | font-weight: 300; 39 | } 40 | 41 | h2, 42 | h3 { 43 | font-weight: 300; 44 | } 45 | 46 | header { 47 | background-color: #61dbfb; 48 | padding: 25; 49 | padding: 10px; 50 | } 51 | 52 | main { 53 | padding: 10px; 54 | padding-bottom: 60px; 55 | /* Height of the footer */ 56 | } 57 | 58 | ul { 59 | margin-left: 15px; 60 | } 61 | 62 | ul li { 63 | list-style: none; 64 | } 65 | 66 | footer { 67 | position: absolute; 68 | bottom: 0; 69 | width: 100%; 70 | height: 60px; 71 | /* Height of the footer */ 72 | background: #6cf; 73 | } 74 | 75 | .footer-wrapper { 76 | font-weight: 400; 77 | text-align: center; 78 | line-height: 60px; 79 | } 80 | .user-card { 81 | margin-top: 10px; 82 | } 83 | .user-card > img { 84 | border-radius: 50%; 85 | width: 14%; 86 | } 87 | -------------------------------------------------------------------------------- /27_Ref/27_ref_boilerplate/src/useFetch.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from 'react' 2 | 3 | export const useFetch = (url) => { 4 | const [data, setData] = useState([]) 5 | useEffect(() => { 6 | const fetchData = async () => { 7 | try { 8 | const response = await fetch(url) 9 | const data = await response.json() 10 | setData(data) 11 | } catch (error) { 12 | console.log(error) 13 | } 14 | } 15 | fetchData() 16 | }, [url]) 17 | 18 | return data 19 | } 20 | 21 | export default useFetch 22 | -------------------------------------------------------------------------------- /28_project/28_project.md: -------------------------------------------------------------------------------- 1 |
2 |

30 Days Of React: Project

3 | 4 | 5 |
6 | 7 | [<< Day 27](../27_Ref/27_ref.md) | [Day 29>>]() 8 | 9 | 10 | # Projects 11 | 12 | Create Read Delete and Update(CRUD) 13 | Most applications use CRUD operations. For instance, you have been Reading(R) data by fetching from the cat API and countries API. You have been creating(C) when you use input field and item. However, we did not implement updating and deleting functionality so far. Since CRUD is a common operation almost in all big applications it is good to know how to implement it. In this section, we will develop a small application which has creating, reading, updating and deleting functionality. 14 | 15 | The todo list is a very common example to learn and master CRUD operations in almost every libraries and frameworks. I would also recommend you to develop a todo list, note taking or a tinny blog application for the sake of mastering CRUD. 16 | 17 | In this section, you and I will develop an old version of twitter post. 18 | 19 | # Exercises 20 | 21 | 1. Develop the following application, [twitter tweets](https://www.30daysofreact.com/day-28/twitter-clone). The application has all the CRUD operations. 22 | 23 | 🎉 CONGRATULATIONS ! 🎉 24 | 25 | [<< Day 27](../27_Ref/27_ref.md) | [Day 29>>]() 26 | -------------------------------------------------------------------------------- /28_project/28_project_boilerplate/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /28_project/28_project_boilerplate/README.md: -------------------------------------------------------------------------------- 1 | # 30 Days of React App: Day 25 2 | 3 | In the project directory, you can run to start the project 4 | 5 | ### `npm start` 6 | -------------------------------------------------------------------------------- /28_project/28_project_boilerplate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "30-days-of-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /28_project/28_project_boilerplate/src/data/ten_most_highest_populations.js: -------------------------------------------------------------------------------- 1 | export const tenHighestPopulation = [ 2 | { country: 'World', population: 7693165599 }, 3 | { country: 'China', population: 1377422166 }, 4 | { country: 'India', population: 1295210000 }, 5 | { country: 'United States of America', population: 323947000 }, 6 | { country: 'Indonesia', population: 258705000 }, 7 | { country: 'Brazil', population: 206135893 }, 8 | { country: 'Pakistan', population: 194125062 }, 9 | { country: 'Nigeria', population: 186988000 }, 10 | { country: 'Bangladesh', population: 161006790 }, 11 | { country: 'Russian Federation', population: 146599183 }, 12 | { country: 'Japan', population: 126960000 }, 13 | ] 14 | -------------------------------------------------------------------------------- /28_project/28_project_boilerplate/src/images/asabeneh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/28_project/28_project_boilerplate/src/images/asabeneh.jpg -------------------------------------------------------------------------------- /28_project/28_project_boilerplate/src/images/css_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/28_project/28_project_boilerplate/src/images/css_logo.png -------------------------------------------------------------------------------- /28_project/28_project_boilerplate/src/images/html_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/28_project/28_project_boilerplate/src/images/html_logo.png -------------------------------------------------------------------------------- /28_project/28_project_boilerplate/src/images/js_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/28_project/28_project_boilerplate/src/images/js_logo.png -------------------------------------------------------------------------------- /28_project/28_project_boilerplate/src/images/react_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/28_project/28_project_boilerplate/src/images/react_logo.png -------------------------------------------------------------------------------- /28_project/28_project_boilerplate/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { useRef } from 'react' 2 | import ReactDOM from 'react-dom' 3 | 4 | const App = (props) => { 5 | const ref = useRef(null) 6 | const onClick = () => { 7 | ref.current.style.backgroundColor = '#61dbfb' 8 | ref.current.style.padding = '50px' 9 | ref.current.style.textAlign = 'center' 10 | } 11 | return ( 12 |
13 |

How to style HTML from the DOM tree using useRef

14 | 15 |
16 | ) 17 | } 18 | 19 | const rootElement = document.getElementById('root') 20 | ReactDOM.render(, rootElement) 21 | -------------------------------------------------------------------------------- /28_project/28_project_boilerplate/src/index.scss: -------------------------------------------------------------------------------- 1 | /* == General style === */ 2 | 3 | * { 4 | box-sizing: border-box; 5 | padding: 0; 6 | margin: 0; 7 | } 8 | 9 | html, 10 | body { 11 | height: 100%; 12 | line-height: 1.5; 13 | font-family: 'Montserrat'; 14 | font-weight: 300; 15 | color: black; 16 | } 17 | 18 | .root { 19 | min-height: 100%; 20 | position: relative; 21 | } 22 | 23 | .header-wrapper, 24 | .main-wrapper, 25 | .footer-wrapper { 26 | width: 85%; 27 | margin: auto; 28 | } 29 | 30 | .header-wrapper, 31 | .main-wrapper { 32 | padding: 10px; 33 | margin: 2px auto; 34 | } 35 | 36 | h1 { 37 | font-size: 70px; 38 | font-weight: 300; 39 | } 40 | 41 | h2, 42 | h3 { 43 | font-weight: 300; 44 | } 45 | 46 | header { 47 | background-color: #61dbfb; 48 | padding: 25; 49 | padding: 10px; 50 | } 51 | 52 | main { 53 | padding: 10px; 54 | padding-bottom: 60px; 55 | /* Height of the footer */ 56 | } 57 | 58 | ul { 59 | margin-left: 15px; 60 | } 61 | 62 | ul li { 63 | list-style: none; 64 | } 65 | 66 | footer { 67 | position: absolute; 68 | bottom: 0; 69 | width: 100%; 70 | height: 60px; 71 | /* Height of the footer */ 72 | background: #6cf; 73 | } 74 | 75 | .footer-wrapper { 76 | font-weight: 400; 77 | text-align: center; 78 | line-height: 60px; 79 | } 80 | .user-card { 81 | margin-top: 10px; 82 | } 83 | .user-card > img { 84 | border-radius: 50%; 85 | width: 14%; 86 | } 87 | -------------------------------------------------------------------------------- /28_project/28_project_boilerplate/src/useFetch.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from 'react' 2 | 3 | export const useFetch = (url) => { 4 | const [data, setData] = useState([]) 5 | useEffect(() => { 6 | const fetchData = async () => { 7 | try { 8 | const response = await fetch(url) 9 | const data = await response.json() 10 | setData(data) 11 | } catch (error) { 12 | console.log(error) 13 | } 14 | } 15 | fetchData() 16 | }, [url]) 17 | 18 | return data 19 | } 20 | 21 | export default useFetch 22 | -------------------------------------------------------------------------------- /29_explore/29_explore.md: -------------------------------------------------------------------------------- 1 |
2 |

30 Days Of React: Project

3 | 4 | 5 |
6 | 7 | [<< Day 28](../27_Ref/27_ref.md) | [Day 29 >>](../29_explore/29_explore.md) 8 | 9 | 10 | 11 | # Explore 12 | 13 | Congratulations for making to this far. You are are unstoppable. So far you have learned lots of concepts and also built several mini-projects. I believe those mini-projects have helped you to understand React very well. After this, you can work on a sole or group React project. You can also expand your skill by using different packages (classnames, lodash, react-helmet, recharts, etc.), implementing PWA, styled components and CSS libraries with React application. In addition, learn SEO, accessibility, responsiveness and browser compatibility. Explore more and increase your knowledge in the domain. Read the [React documentation](https://reactjs.org/). Now, you should feel confident enough about your React skill and you should also start applying for entry or junior softer developer or front end developer positions. No one will tell you that you are read for a job, so you should make yourself ready. 14 | 15 | # Exercises 16 | 17 | ## Exercises: Level 1 18 | 19 | 1. Polish your GitHub and make your projects as clean as possible 20 | 2. Work on your portfolio 21 | 3. Create LinkedIn account if you don't have yet. If you have LinkedIn account make it as attractive as possible. It will give a high chance for potential recruiters and companies to know more about you. In addition, there are lots of materials and people who can be used as motivation on daily basis. 22 | 4. Follow the author on LinkedIn, Twitter or GitHuh if he created impact on your life. 23 | 5. Become an ambassador of CodingForAll by supporting and advocating our causes. 24 | 6. Write about 30DaysOfReact on different platforms and create an opportunity for others to get a valuable skill. 25 | 26 | ## Exercises: Level 2 27 | 28 | Coming ... 29 | 30 | 🎉 CONGRATULATIONS ! 🎉 31 | 32 | [<< Day 27](../27_Ref/27_ref.md) | [Day 29>>]() 33 | -------------------------------------------------------------------------------- /29_explore/29_explore_boilerplate/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /29_explore/29_explore_boilerplate/README.md: -------------------------------------------------------------------------------- 1 | # 30 Days of React App: Day 25 2 | 3 | In the project directory, you can run to start the project 4 | 5 | ### `npm start` 6 | -------------------------------------------------------------------------------- /29_explore/29_explore_boilerplate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "30-days-of-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /29_explore/29_explore_boilerplate/src/data/ten_most_highest_populations.js: -------------------------------------------------------------------------------- 1 | export const tenHighestPopulation = [ 2 | { country: 'World', population: 7693165599 }, 3 | { country: 'China', population: 1377422166 }, 4 | { country: 'India', population: 1295210000 }, 5 | { country: 'United States of America', population: 323947000 }, 6 | { country: 'Indonesia', population: 258705000 }, 7 | { country: 'Brazil', population: 206135893 }, 8 | { country: 'Pakistan', population: 194125062 }, 9 | { country: 'Nigeria', population: 186988000 }, 10 | { country: 'Bangladesh', population: 161006790 }, 11 | { country: 'Russian Federation', population: 146599183 }, 12 | { country: 'Japan', population: 126960000 }, 13 | ] 14 | -------------------------------------------------------------------------------- /29_explore/29_explore_boilerplate/src/images/asabeneh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/29_explore/29_explore_boilerplate/src/images/asabeneh.jpg -------------------------------------------------------------------------------- /29_explore/29_explore_boilerplate/src/images/css_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/29_explore/29_explore_boilerplate/src/images/css_logo.png -------------------------------------------------------------------------------- /29_explore/29_explore_boilerplate/src/images/html_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/29_explore/29_explore_boilerplate/src/images/html_logo.png -------------------------------------------------------------------------------- /29_explore/29_explore_boilerplate/src/images/js_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/29_explore/29_explore_boilerplate/src/images/js_logo.png -------------------------------------------------------------------------------- /29_explore/29_explore_boilerplate/src/images/react_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/29_explore/29_explore_boilerplate/src/images/react_logo.png -------------------------------------------------------------------------------- /29_explore/29_explore_boilerplate/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { useRef } from 'react' 2 | import ReactDOM from 'react-dom' 3 | 4 | const App = (props) => { 5 | const ref = useRef(null) 6 | const onClick = () => { 7 | ref.current.style.backgroundColor = '#61dbfb' 8 | ref.current.style.padding = '50px' 9 | ref.current.style.textAlign = 'center' 10 | } 11 | return ( 12 |
13 |

How to style HTML from the DOM tree using useRef

14 | 15 |
16 | ) 17 | } 18 | 19 | const rootElement = document.getElementById('root') 20 | ReactDOM.render(, rootElement) 21 | -------------------------------------------------------------------------------- /29_explore/29_explore_boilerplate/src/index.scss: -------------------------------------------------------------------------------- 1 | /* == General style === */ 2 | 3 | * { 4 | box-sizing: border-box; 5 | padding: 0; 6 | margin: 0; 7 | } 8 | 9 | html, 10 | body { 11 | height: 100%; 12 | line-height: 1.5; 13 | font-family: 'Montserrat'; 14 | font-weight: 300; 15 | color: black; 16 | } 17 | 18 | .root { 19 | min-height: 100%; 20 | position: relative; 21 | } 22 | 23 | .header-wrapper, 24 | .main-wrapper, 25 | .footer-wrapper { 26 | width: 85%; 27 | margin: auto; 28 | } 29 | 30 | .header-wrapper, 31 | .main-wrapper { 32 | padding: 10px; 33 | margin: 2px auto; 34 | } 35 | 36 | h1 { 37 | font-size: 70px; 38 | font-weight: 300; 39 | } 40 | 41 | h2, 42 | h3 { 43 | font-weight: 300; 44 | } 45 | 46 | header { 47 | background-color: #61dbfb; 48 | padding: 25; 49 | padding: 10px; 50 | } 51 | 52 | main { 53 | padding: 10px; 54 | padding-bottom: 60px; 55 | /* Height of the footer */ 56 | } 57 | 58 | ul { 59 | margin-left: 15px; 60 | } 61 | 62 | ul li { 63 | list-style: none; 64 | } 65 | 66 | footer { 67 | position: absolute; 68 | bottom: 0; 69 | width: 100%; 70 | height: 60px; 71 | /* Height of the footer */ 72 | background: #6cf; 73 | } 74 | 75 | .footer-wrapper { 76 | font-weight: 400; 77 | text-align: center; 78 | line-height: 60px; 79 | } 80 | .user-card { 81 | margin-top: 10px; 82 | } 83 | .user-card > img { 84 | border-radius: 50%; 85 | width: 14%; 86 | } 87 | -------------------------------------------------------------------------------- /29_explore/29_explore_boilerplate/src/useFetch.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from 'react' 2 | 3 | export const useFetch = (url) => { 4 | const [data, setData] = useState([]) 5 | useEffect(() => { 6 | const fetchData = async () => { 7 | try { 8 | const response = await fetch(url) 9 | const data = await response.json() 10 | setData(data) 11 | } catch (error) { 12 | console.log(error) 13 | } 14 | } 15 | fetchData() 16 | }, [url]) 17 | 18 | return data 19 | } 20 | 21 | export default useFetch 22 | -------------------------------------------------------------------------------- /30_conclusions/30_conclusions.md: -------------------------------------------------------------------------------- 1 |
2 |

30 Days Of React: Conclusions

3 | 4 | 5 |
6 | 7 | [<< Day 29](../29_explore/29_explore.md) 8 | 9 | 10 | 11 | # Conclusions 12 | 13 | In this challenge, we have covered React with and without hooks. All the most important features of React has been included. If you did all the exercises and projects in this challenge I would say your React and JavaScript level is very high. You are ready for developer positions. This challenge was made in this month and it will be updated and improved in the coming months. We will correct grammar and typo mistakes. Some content might be added, the pending exercises in some days challenge will be included. It is good to check it at some point, because there might be some interesting projects. 14 | You have been learning and coding for the last 30 days and you made it to this day. You are a special person and you deserve recognition. Therefore, you can claim a 30 Days React challenge completion certificate. In addition, celebrate your success with a friend and family. I will see you in another challenge or courses. Thank you for being a proactive community member and part of the challenge. Finally, recommend the material for a family, friend or enemy if you believe that it helped you and of course support the author to create more learning materials. 15 | 16 | ## Testimony 17 | Now it is time to express your thoughts about the Author and 30DaysOfReact. You can leave your testimonial on this [link](https://testimonial-vdzd.onrender.com) 18 | 19 | 20 | # Exercises 21 | 22 | 🎉 CONGRATULATIONS ! 🎉 23 | 24 | [<< Day 29](../29_explore/29_explore.md) 25 | -------------------------------------------------------------------------------- /30_conclusions/30_conclusions_boilerplate/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /30_conclusions/30_conclusions_boilerplate/README.md: -------------------------------------------------------------------------------- 1 | # 30 Days of React App: Day 25 2 | 3 | In the project directory, you can run to start the project 4 | 5 | ### `npm start` 6 | -------------------------------------------------------------------------------- /30_conclusions/30_conclusions_boilerplate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "30-days-of-react", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.3.2", 8 | "@testing-library/user-event": "^7.1.2", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.3" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /30_conclusions/30_conclusions_boilerplate/src/data/ten_most_highest_populations.js: -------------------------------------------------------------------------------- 1 | export const tenHighestPopulation = [ 2 | { country: 'World', population: 7693165599 }, 3 | { country: 'China', population: 1377422166 }, 4 | { country: 'India', population: 1295210000 }, 5 | { country: 'United States of America', population: 323947000 }, 6 | { country: 'Indonesia', population: 258705000 }, 7 | { country: 'Brazil', population: 206135893 }, 8 | { country: 'Pakistan', population: 194125062 }, 9 | { country: 'Nigeria', population: 186988000 }, 10 | { country: 'Bangladesh', population: 161006790 }, 11 | { country: 'Russian Federation', population: 146599183 }, 12 | { country: 'Japan', population: 126960000 }, 13 | ] 14 | -------------------------------------------------------------------------------- /30_conclusions/30_conclusions_boilerplate/src/images/asabeneh.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/30_conclusions/30_conclusions_boilerplate/src/images/asabeneh.jpg -------------------------------------------------------------------------------- /30_conclusions/30_conclusions_boilerplate/src/images/css_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/30_conclusions/30_conclusions_boilerplate/src/images/css_logo.png -------------------------------------------------------------------------------- /30_conclusions/30_conclusions_boilerplate/src/images/html_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/30_conclusions/30_conclusions_boilerplate/src/images/html_logo.png -------------------------------------------------------------------------------- /30_conclusions/30_conclusions_boilerplate/src/images/js_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/30_conclusions/30_conclusions_boilerplate/src/images/js_logo.png -------------------------------------------------------------------------------- /30_conclusions/30_conclusions_boilerplate/src/images/react_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/30_conclusions/30_conclusions_boilerplate/src/images/react_logo.png -------------------------------------------------------------------------------- /30_conclusions/30_conclusions_boilerplate/src/index.js: -------------------------------------------------------------------------------- 1 | import React, { useRef } from 'react' 2 | import ReactDOM from 'react-dom' 3 | 4 | const App = (props) => { 5 | const ref = useRef(null) 6 | const onClick = () => { 7 | ref.current.style.backgroundColor = '#61dbfb' 8 | ref.current.style.padding = '50px' 9 | ref.current.style.textAlign = 'center' 10 | } 11 | return ( 12 |
13 |

How to style HTML from the DOM tree using useRef

14 | 15 |
16 | ) 17 | } 18 | 19 | const rootElement = document.getElementById('root') 20 | ReactDOM.render(, rootElement) 21 | -------------------------------------------------------------------------------- /30_conclusions/30_conclusions_boilerplate/src/index.scss: -------------------------------------------------------------------------------- 1 | /* == General style === */ 2 | 3 | * { 4 | box-sizing: border-box; 5 | padding: 0; 6 | margin: 0; 7 | } 8 | 9 | html, 10 | body { 11 | height: 100%; 12 | line-height: 1.5; 13 | font-family: 'Montserrat'; 14 | font-weight: 300; 15 | color: black; 16 | } 17 | 18 | .root { 19 | min-height: 100%; 20 | position: relative; 21 | } 22 | 23 | .header-wrapper, 24 | .main-wrapper, 25 | .footer-wrapper { 26 | width: 85%; 27 | margin: auto; 28 | } 29 | 30 | .header-wrapper, 31 | .main-wrapper { 32 | padding: 10px; 33 | margin: 2px auto; 34 | } 35 | 36 | h1 { 37 | font-size: 70px; 38 | font-weight: 300; 39 | } 40 | 41 | h2, 42 | h3 { 43 | font-weight: 300; 44 | } 45 | 46 | header { 47 | background-color: #61dbfb; 48 | padding: 25; 49 | padding: 10px; 50 | } 51 | 52 | main { 53 | padding: 10px; 54 | padding-bottom: 60px; 55 | /* Height of the footer */ 56 | } 57 | 58 | ul { 59 | margin-left: 15px; 60 | } 61 | 62 | ul li { 63 | list-style: none; 64 | } 65 | 66 | footer { 67 | position: absolute; 68 | bottom: 0; 69 | width: 100%; 70 | height: 60px; 71 | /* Height of the footer */ 72 | background: #6cf; 73 | } 74 | 75 | .footer-wrapper { 76 | font-weight: 400; 77 | text-align: center; 78 | line-height: 60px; 79 | } 80 | .user-card { 81 | margin-top: 10px; 82 | } 83 | .user-card > img { 84 | border-radius: 50%; 85 | width: 14%; 86 | } 87 | -------------------------------------------------------------------------------- /30_conclusions/30_conclusions_boilerplate/src/useFetch.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from 'react' 2 | 3 | export const useFetch = (url) => { 4 | const [data, setData] = useState([]) 5 | useEffect(() => { 6 | const fetchData = async () => { 7 | try { 8 | const response = await fetch(url) 9 | const data = await response.json() 10 | setData(data) 11 | } catch (error) { 12 | console.log(error) 13 | } 14 | } 15 | fetchData() 16 | }, [url]) 17 | 18 | return data 19 | } 20 | 21 | export default useFetch 22 | -------------------------------------------------------------------------------- /images/08_day_changing_background_exercise.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/08_day_changing_background_exercise.gif -------------------------------------------------------------------------------- /images/08_day_select_country_exercise.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/08_day_select_country_exercise.gif -------------------------------------------------------------------------------- /images/123456.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/123456.PNG -------------------------------------------------------------------------------- /images/30_days_of_react.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/30_days_of_react.jpg -------------------------------------------------------------------------------- /images/adding_project_to_vscode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/adding_project_to_vscode.png -------------------------------------------------------------------------------- /images/all_jsx_final.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/all_jsx_final.png -------------------------------------------------------------------------------- /images/arithmetic copy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/arithmetic copy.png -------------------------------------------------------------------------------- /images/arithmetic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/arithmetic.png -------------------------------------------------------------------------------- /images/array_index copy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/array_index copy.png -------------------------------------------------------------------------------- /images/array_index.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/array_index.png -------------------------------------------------------------------------------- /images/assignment_operators.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/assignment_operators.png -------------------------------------------------------------------------------- /images/average_cat_weight_and_age.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/average_cat_weight_and_age.png -------------------------------------------------------------------------------- /images/become_patreon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/become_patreon.png -------------------------------------------------------------------------------- /images/className_warning.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/className_warning.png -------------------------------------------------------------------------------- /images/cleaned_launched.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/cleaned_launched.png -------------------------------------------------------------------------------- /images/comparison_operators.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/comparison_operators.png -------------------------------------------------------------------------------- /images/components.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/components.png -------------------------------------------------------------------------------- /images/components_example.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/components_example.png -------------------------------------------------------------------------------- /images/console_log_multipl_arguments.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/console_log_multipl_arguments.png -------------------------------------------------------------------------------- /images/create-react-app-first-release_jul-22-2016.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/create-react-app-first-release_jul-22-2016.png -------------------------------------------------------------------------------- /images/create_react_app_file_cleaned.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/create_react_app_file_cleaned.png -------------------------------------------------------------------------------- /images/create_react_app_files.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/create_react_app_files.png -------------------------------------------------------------------------------- /images/date_time_object.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/date_time_object.png -------------------------------------------------------------------------------- /images/day_6_hexadecimal_colors_exercise.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/day_6_hexadecimal_colors_exercise.png -------------------------------------------------------------------------------- /images/day_6_number_generater_exercise.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/day_6_number_generater_exercise.png -------------------------------------------------------------------------------- /images/day_6_ten_highest_populations_exercise.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/day_6_ten_highest_populations_exercise.png -------------------------------------------------------------------------------- /images/download_node.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/download_node.png -------------------------------------------------------------------------------- /images/dynamic_data.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/dynamic_data.png -------------------------------------------------------------------------------- /images/first_react_app.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/first_react_app.png -------------------------------------------------------------------------------- /images/frontend_technologies.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/frontend_technologies.png -------------------------------------------------------------------------------- /images/google_chrome.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/google_chrome.png -------------------------------------------------------------------------------- /images/hexadecimal_color_exercise.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/hexadecimal_color_exercise.png -------------------------------------------------------------------------------- /images/inecting_data_to_jsx_create_react_app.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/inecting_data_to_jsx_create_react_app.png -------------------------------------------------------------------------------- /images/install_node.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/install_node.png -------------------------------------------------------------------------------- /images/internal_style.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/internal_style.png -------------------------------------------------------------------------------- /images/js_code_on_chrome_console.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/js_code_on_chrome_console.png -------------------------------------------------------------------------------- /images/js_code_vscode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/js_code_vscode.png -------------------------------------------------------------------------------- /images/js_internal_style_create_react_app.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/js_internal_style_create_react_app.png -------------------------------------------------------------------------------- /images/jsx_use_create_react_app.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/jsx_use_create_react_app.png -------------------------------------------------------------------------------- /images/launched_on_new_tab.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/launched_on_new_tab.png -------------------------------------------------------------------------------- /images/local_storage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/local_storage.png -------------------------------------------------------------------------------- /images/map_list_id.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/map_list_id.png -------------------------------------------------------------------------------- /images/multiple_script.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/multiple_script.png -------------------------------------------------------------------------------- /images/news_letter_design.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/news_letter_design.png -------------------------------------------------------------------------------- /images/npm_package_day_15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/npm_package_day_15.png -------------------------------------------------------------------------------- /images/npm_registry.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/npm_registry.png -------------------------------------------------------------------------------- /images/opening_chrome_console_shortcut.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/opening_chrome_console_shortcut.png -------------------------------------------------------------------------------- /images/opening_developer_tool.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/opening_developer_tool.png -------------------------------------------------------------------------------- /images/opening_project_on_vscode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/opening_project_on_vscode.png -------------------------------------------------------------------------------- /images/paypal_lg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/paypal_lg.png -------------------------------------------------------------------------------- /images/raising_syntax_error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/raising_syntax_error.png -------------------------------------------------------------------------------- /images/react_app_starting.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/react_app_starting.png -------------------------------------------------------------------------------- /images/react_boilerplate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/react_boilerplate.png -------------------------------------------------------------------------------- /images/react_bolier_plate_cleaned.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/react_bolier_plate_cleaned.png -------------------------------------------------------------------------------- /images/react_event_on_mouse_enter.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/react_event_on_mouse_enter.gif -------------------------------------------------------------------------------- /images/react_for_everyone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/react_for_everyone.png -------------------------------------------------------------------------------- /images/react_logo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/react_logo.gif -------------------------------------------------------------------------------- /images/react_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/react_logo.png -------------------------------------------------------------------------------- /images/react_popularity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/react_popularity.png -------------------------------------------------------------------------------- /images/react_repo_1_oct_2020.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/react_repo_1_oct_2020.png -------------------------------------------------------------------------------- /images/regex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/regex.png -------------------------------------------------------------------------------- /images/removing_unique_id_warning.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/removing_unique_id_warning.png -------------------------------------------------------------------------------- /images/rendering_componnets.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/rendering_componnets.png -------------------------------------------------------------------------------- /images/rendering_image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/rendering_image.png -------------------------------------------------------------------------------- /images/rendering_jsx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/rendering_jsx.png -------------------------------------------------------------------------------- /images/rendering_list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/rendering_list.png -------------------------------------------------------------------------------- /images/rendering_more_jsx_content_.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/rendering_more_jsx_content_.png -------------------------------------------------------------------------------- /images/rendering_more_jsx_content_create_react_app.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/rendering_more_jsx_content_create_react_app.png -------------------------------------------------------------------------------- /images/rendering_multiple_jsx_elements.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/rendering_multiple_jsx_elements.png -------------------------------------------------------------------------------- /images/rendering_multiple_jsx_elements_create-react_app.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/rendering_multiple_jsx_elements_create-react_app.png -------------------------------------------------------------------------------- /images/running_script.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/running_script.png -------------------------------------------------------------------------------- /images/scripts_on_vscode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/scripts_on_vscode.png -------------------------------------------------------------------------------- /images/string_indexes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/string_indexes.png -------------------------------------------------------------------------------- /images/styling_all_jsx_elements.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/styling_all_jsx_elements.png -------------------------------------------------------------------------------- /images/styling_jsx_element.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/styling_jsx_element.png -------------------------------------------------------------------------------- /images/styling_jsx_inline_create_react_app.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/styling_jsx_inline_create_react_app.png -------------------------------------------------------------------------------- /images/user_card_design_jsx.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/user_card_design_jsx.png -------------------------------------------------------------------------------- /images/vsc_live_server.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/vsc_live_server.png -------------------------------------------------------------------------------- /images/vscode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/vscode.png -------------------------------------------------------------------------------- /images/vscode_ui.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/vscode_ui.png -------------------------------------------------------------------------------- /images/vue_popularity.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/vue_popularity.png -------------------------------------------------------------------------------- /images/vue_repo_1_oct_2020.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/vue_repo_1_oct_2020.png -------------------------------------------------------------------------------- /images/web_storage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pranjalstar/30-Days-React-Course/68ecd74b342f033bcb65a87d8a722d6e213e3124/images/web_storage.png --------------------------------------------------------------------------------