From 746b724a1afa5589361bcf3065eaf78b1f21f349 Mon Sep 17 00:00:00 2001 From: Asabeneh Date: Sat, 3 Oct 2020 18:12:25 +0300 Subject: [PATCH] minor fixes --- .../01_javascript_refresher.md | 21 +++++++++------- .../02_introduction_to_react.md | 2 +- 03_Day_Setting_Up/03_day_setting_up.md | 24 +++++++++++++++---- readMe.md | 22 +++++++++-------- 4 files changed, 45 insertions(+), 24 deletions(-) diff --git a/01_Day_JavaScript_Refresher/01_javascript_refresher.md b/01_Day_JavaScript_Refresher/01_javascript_refresher.md index 2db442b..f4c049a 100644 --- a/01_Day_JavaScript_Refresher/01_javascript_refresher.md +++ b/01_Day_JavaScript_Refresher/01_javascript_refresher.md @@ -1,24 +1,27 @@
+

30 Days Of React: JavaScript Refresher

+ Twitter Follow - - Author: Asabeneh Yetayeh
- October, 2020 - +Author: +Asabeneh Yetayeh
+ October, 2020 +
+ [<< Day 0](../readMe.md) | [Day 2 >>](../02_Day_Introduction_to_React/02_introduction_to_react.md) ![30 Days of React banner](../images/30_days_of_react_banner_day_1.jpg) - [JavaScript Refresher](#javascript-refresher) - - [0. Adding JavaScript to a Web Page](#adding-javascript-to-a-web-page) + - [0. Adding JavaScript to a Web Page](#0-adding-javascript-to-a-web-page) - [Inline Script](#inline-script) - [Internal Script](#internal-script) - [External Script](#external-script) @@ -50,7 +53,7 @@ - [Reversing array order](#reversing-array-order) - [Sorting elements in array](#sorting-elements-in-array) - [Array of arrays](#array-of-arrays) - - [๐Ÿ’ป Exercise](#-exercise) + - [๐Ÿ’ป Exercise](#-exercise) - [Exercise: Level 1](#exercise-level-1) - [Exercise: Level 2](#exercise-level-2) - [Exercise: Level 3](#exercise-level-3) @@ -60,7 +63,7 @@ - [If Else if Else](#if-else-if-else) - [Switch](#switch) - [Ternary Operators](#ternary-operators) - - [๐Ÿ’ป Exercises](#-exercises) + - [๐Ÿ’ป Exercises](#-exercises) - [Exercises: Level 1](#exercises-level-1) - [Exercises: Level 2](#exercises-level-2) - [Exercises: Level 3](#exercises-level-3) @@ -91,7 +94,7 @@ - [Getting object values using Object.values()](#getting-object-values-using-objectvalues) - [Getting object keys and values using Object.entries()](#getting-object-keys-and-values-using-objectentries) - [Checking properties using hasOwnProperty()](#checking-properties-using-hasownproperty) - - [๐Ÿ’ป Exercises](#-exercises-1) + - [๐Ÿ’ป Exercises](#-exercises-1) - [Exercises: Level 1](#exercises-level-1-1) - [Exercises: Level 2](#exercises-level-2-1) - [Exercises: Level 3](#exercises-level-3-1) @@ -111,7 +114,7 @@ - [Arrow Function](#arrow-function) - [Function with default parameters](#function-with-default-parameters) - [Function declaration versus Arrow function](#function-declaration-versus-arrow-function) - - [๐Ÿ’ป Exercises](#-exercises-2) + - [๐Ÿ’ป Exercises](#-exercises-2) - [Exercises: Level 1](#exercises-level-1-2) - [Exercises: Level 2](#exercises-level-2-2) - [Exercises: Level 3](#exercises-level-3-2) diff --git a/02_Day_Introduction_to_React/02_introduction_to_react.md b/02_Day_Introduction_to_React/02_introduction_to_react.md index 1699c96..1867921 100644 --- a/02_Day_Introduction_to_React/02_introduction_to_react.md +++ b/02_Day_Introduction_to_React/02_introduction_to_react.md @@ -116,7 +116,7 @@ const welcome =

Welcome to 30 Days of React Challenge

const data = Oct 2, 2020 ``` -The above strange looking code seems a JavaScrip but it is not JavaScript and it seems an HTML but not completely an HTML element. It is a mix of JavaScript and an HTML element. JSX can allow us to use HTML in JavaScript. The HTML element in the above JSX is _h1_ and _small_. +The above strange looking code seems a JavaScript but it is not JavaScript and it seems an HTML but not completely an HTML element. It is a mix of JavaScript and an HTML element. JSX can allow us to use HTML in JavaScript. The HTML element in the above JSX is _h1_ and _small_. #### JSX Element diff --git a/03_Day_Setting_Up/03_day_setting_up.md b/03_Day_Setting_Up/03_day_setting_up.md index b956ee2..0d48075 100644 --- a/03_Day_Setting_Up/03_day_setting_up.md +++ b/03_Day_Setting_Up/03_day_setting_up.md @@ -37,11 +37,11 @@ # Setting Up -In the previous section, we learned about JSX and we access the React and ReactDOM package using CDN. However, in real life work in environment instead of CDN you will use create-react-app package to generate a React project starter(boilerplate). The initial _create-react-app_ was released on Jul 22, 2016. Before this time, developers used to configure webpack which a JavaScript module bundler, babel and all the necessary packages manually and this used to take half an hour or may be more. Now, create-react-app will take care of everything and you will be in charge developing product only instead of spending too much time configuring and setting up projects. Before we start using different tools, let's have a brief introduction for all the tools we are going to use in this challenge. You do not have understand everything but I will try to give a very short introduction about some of the tools and technologies which we use when we work with React. +In the previous section, we learned about JSX and we accessed the React and ReactDOM package using CDN. However, in real projects instead of CDN you will use the create-react-app package to generate a React project starter(boilerplate). The initial _create-react-app_ was released on Jul 22, 2016. Before this time, developers used to configure webpack which a JavaScript module bundler, babel and all the necessary packages manually and this used to take half an hour or may be more. Now, create-react-app will take care of everything and you will be in charge of developing the product only instead of spending too much time configuring and setting up projects. Before we start using different tools, let's have a brief introduction for all the tools we are going to use in this challenge. You do not have to understand everything but I will try to give a very short introduction about some of the tools and technologies which we use when we work with React. ## Node -Node is a JavaScript run time environment which allows to run JavaScript on the server. Node was created in 2019. Node has played a great role for the growth of JavaScript. React application starts by default at localhost 3000. The create-react-app has configured a node server for the React Application. We will see create-react-app soon. +Node is a JavaScript runtime environment which allows JavaScript to run on the server. Node was created in 2019. Node has played a great role for the growth of JavaScript. The React application starts by default at localhost 3000. The create-react-app has configured a node server for the React Application. That is why we need node and node modules. We will see create-react-app soon. If you do have node, install node. Install [node.js](https://nodejs.org/en/). @@ -51,7 +51,7 @@ After downloading double click and install ![Install node](../images/install_node.png) -We can check if node is installed on our local machine by opening our device terminal or command prompt. +We can check if node is installed on our local machine by opening our device terminal or command prompt and writing the following command. ```sh asabeneh $ node -v @@ -61,6 +61,22 @@ v12.18.0 ## Module A single or multiple functions which can be exported and imported when needed and can be included in a project. +In react we do not use link to access modules or packages instead we import the module. Let's see how to import and export a module or modules + +```js +// math.js +export const addTwo = (a, b) => a + b +export const multiply = (a, b) => a * b +export const subtract = (a, b) => a - b +default export doSomeMath = () => { + return { + addTwo, multiply, subtract + } + +} +``` + +Now let's import the _math.js_ modules to a different file ## Package @@ -155,7 +171,7 @@ It is good to know these folders and files. - favicon.io - a favicon - manifest.json - is use to make the application a progressive web app - other images- which can be used for open graph image or for other purposes - - rotots.txt - information if the website allow web scraping + - robots.txt - information if the website allow web scraping - src diff --git a/readMe.md b/readMe.md index 6ef5417..a07c798 100644 --- a/readMe.md +++ b/readMe.md @@ -18,12 +18,14 @@ -| # Day | Topics | -| ----- | :--------------------------------------------------------------------------------------------------------------------------: | -| 00 | [Introduction](#introduction)
[How to Use Repo](#how-to-use-repo)
[Requirements](#requirements)
[Setup](#setup) | -| 01 | [JavaScript Refresher](./01_Day_JavaScript_Refresher/01_javascript_refresher.md) | -| 02 | [Getting Started React](./02_Day_Introduction_to_React/02_introduction_to_react.md) | -| 03 | [Setting Up](./03_Day_Setting_Up/03_day_setting_up.md) | +[Day 1 >>](./01_Day_JavaScript_Refresher/01_javascript_refresher.md) + +| # Day | Topics | +| ----- | :-------------------------------------------------------------------------------------------------------------------------: | +| 00 | [Introduction](#introduction)
[How to Use Repo](#how-to-use-repo)
[Requirements](#requirements)
[Setup](#setup) | +| 01 | [JavaScript Refresher](./01_Day_JavaScript_Refresher/01_javascript_refresher.md) | +| 02 | [Getting Started React](./02_Day_Introduction_to_React/02_introduction_to_react.md) | +| 03 | [Setting Up](./03_Day_Setting_Up/03_day_setting_up.md) | ๐Ÿงก๐Ÿงก๐Ÿงก HAPPY CODING ๐Ÿงก๐Ÿงก๐Ÿงก
Support [**Asabeneh**](https://www.patreon.com/asabeneh?fan_landing=true) to create more educational materials @@ -31,16 +33,16 @@
-___ +--- - [Introduction](#introduction) - [Requirements](#requirements) - [How to Use Repo](#how-to-use-repo) - [Star and Fork this Repo](#star-and-fork-this-repo) - - [Clone your fork](#clone-your-fork) + - [Clone your Fork](#clone-your-fork) - [Create a New Branch](#create-a-new-branch) - [Structure Exercise Solutions](#structure-exercise-solutions) - - [Commit Exercise Solutions](#commit-exercise-solutions) + - [Commit Excercise Solutions](#commit-excercise-solutions) - [Update your Fork Daily](#update-your-fork-daily) - [Setup](#setup) - [Install Node.js](#install-nodejs) @@ -57,7 +59,7 @@ ___ - [Installing Visual Studio Code](#installing-visual-studio-code) - [How to Use Visual Studio Code](#how-to-use-visual-studio-code) -___ +--- ## Introduction