diff --git a/src/capstone/Capstone.js b/src/capstone/Capstone.js index c45cbe5..e6162b5 100644 --- a/src/capstone/Capstone.js +++ b/src/capstone/Capstone.js @@ -10,7 +10,7 @@ const EMPTY_TICKER_MSG = 'Please type a stock ticker and click Search button.'; /** * 🏆 - * The goal of this capstone project is to bring together most of the + * The goal of this capstone project is to bring together most of the * concepts you have learned in this tutorial together by building this feature. * The feature we are building is pretty straight forward. There's an input * field and a search button. When the user types in a valid stock ticker and @@ -32,7 +32,7 @@ class Capstone extends Component { handleSearch(stockTicker) { /** * ✏️ - * When this method is called, it will be given a stockTicker + * When this method is called, it will be given a stockTicker * as an argument. You need to call setState to set the stockTicker * state to the value provided to this function */ @@ -48,7 +48,7 @@ class Capstone extends Component { * Like: isEmpty(this.state.stockTicker) * 🧭 If it is empty assign
{EMPTY_TICKER_MSG}
to EmptyTickerMessage * 🧭 If the stockTicker is not empty assign null to EmptyTickerMessage - * You can either use ternery operator - + * You can either use ternery operator - * const a = isEmpty(b) ? c : null; * OR you can use '&&' operator - * const a = isEmpty(b) && c; diff --git a/src/capstone/CompanyFinancial.jsx b/src/capstone/CompanyFinancial.jsx index 3fe0187..71836a1 100644 --- a/src/capstone/CompanyFinancial.jsx +++ b/src/capstone/CompanyFinancial.jsx @@ -56,24 +56,24 @@ class CompanyFinancial extends Component { * every time either the props changes or the state changes for this component */ componentDidUpdate(prevProps, prevState) { - /** - * ✏️ - * You need to call the fetchCompanyFinancial method to fetch the - * comanyFinancial data when the parent passes you a different stockTicker - * 🧭 Remember to check if the stockTicker props changed before calling the - * fetchCompanyFinancial method though. You DON'T want to fetch the data - * if the stockTicker hasn't changed. If you don't check whether props - * changed your component will go in an infinite loop - it will be - * fetching the same data over and over again. - * This lifecycle method will be given multiple arguments. - * First argument is the value of props before this component updated - * Second argument is the value of the state before this component updated - * In our case we just want to check props to see if value for stockTicker - * changed and the way to do this is: - * if (this.props.stockTicker !== prevProps.stockTicker) { - * //Fetch data here only if the current props is not same as previous props - * } - */ + /** + * ✏️ + * You need to call the fetchCompanyFinancial method to fetch the + * comanyFinancial data when the parent passes you a different stockTicker + * 🧭 Remember to check if the stockTicker props changed before calling the + * fetchCompanyFinancial method though. You DON'T want to fetch the data + * if the stockTicker hasn't changed. If you don't check whether props + * changed your component will go in an infinite loop - it will be + * fetching the same data over and over again. + * This lifecycle method will be given multiple arguments. + * First argument is the value of props before this component updated + * Second argument is the value of the state before this component updated + * In our case we just want to check props to see if value for stockTicker + * changed and the way to do this is: + * if (this.props.stockTicker !== prevProps.stockTicker) { + * //Fetch data here only if the current props is not same as previous props + * } + */ } /** diff --git a/src/capstone/CompanyProfile.jsx b/src/capstone/CompanyProfile.jsx index 93e6f03..5785d7a 100644 --- a/src/capstone/CompanyProfile.jsx +++ b/src/capstone/CompanyProfile.jsx @@ -49,38 +49,38 @@ class CompanyProfile extends Component { */ } - /* + /** * 💡 * This is another lifecycle method. React will invoke this lifecyle method * after the component is updated. Remember the component will be updated * every time either the props changes or the state changes for this component */ componentDidUpdate(prevProps, prevState) { - /** - * ✏️ - * You need to call the fetchCompanyProfile method to fetch the - * comanyProfile data when the parent passes you a different stockTicker - * 🧭 Remember to check if the stockTicker props changed before calling the - * fetchCompanyProfile method though. You DON'T want to fetch the data - * if the stockTicker hasn't changed. If you don't check whether props - * changed your component will go in an infinite loop - it will be - * fetching the same data over and over again. - * This lifecycle method will be given multiple arguments. - * First argument is the value of props before this component updated - * Second argument is the value of the state before this component updated - * In our case we just want to check props to see if value for stockTicker - * changed and the way to do this is: - * if (this.props.stockTicker !== prevProps.stockTicker) { - * //Fetch data here only if the current props is not same as previous props - * } - */ + /** + * ✏️ + * You need to call the fetchCompanyProfile method to fetch the + * comanyProfile data when the parent passes you a different stockTicker + * 🧭 Remember to check if the stockTicker props changed before calling the + * fetchCompanyProfile method though. You DON'T want to fetch the data + * if the stockTicker hasn't changed. If you don't check whether props + * changed your component will go in an infinite loop - it will be + * fetching the same data over and over again. + * This lifecycle method will be given multiple arguments. + * First argument is the value of props before this component updated + * Second argument is the value of the state before this component updated + * In our case we just want to check props to see if value for stockTicker + * changed and the way to do this is: + * if (this.props.stockTicker !== prevProps.stockTicker) { + * //Fetch data here only if the current props is not same as previous props + * } + */ } /** * 💡 * This is a method to fetch the company profile data from the API. * Couple things to note here: - * 1. We are updating the errorMsg state to empty string. This is jus to + * 1. We are updating the errorMsg state to empty string. This is jus to * reset any error message we might have from previous search * 2. We invoke the API only when the stockTicker is truthy. No point in * calling the API if we don't have any value for stockTicker @@ -104,7 +104,7 @@ class CompanyProfile extends Component { * Updates the companyProfile state with the argument provided */ updateCompanyProfile(companyProfile) { - this.setState({ companyProfile }) + this.setState({ companyProfile }); } /** @@ -135,7 +135,7 @@ class CompanyProfile extends Component { /** * ✏️ * We want to render an error message if the API returns some error. - * We want to check if we have `errorMsg` state is not empty and + * We want to check if we have `errorMsg` state is not empty and * if it's not render the message inside a div * 🧭 There's an `isEmpty` function that's already imported. Use that * to check if the `errorMsg` state is empty @@ -143,7 +143,7 @@ class CompanyProfile extends Component { * 🧭 If it is empty assign null to ErrorMsg * 🧭 If the errorMsg is not empty assign
{this.state.errorMsg}
* to the ErrorMsg constant. - * You can either use ternery operator - + * You can either use ternery operator - * const a = isEmpty(b) ? c : null; * OR you can use '&&' operator - * const a = isEmpty(b) && c; @@ -156,7 +156,7 @@ class CompanyProfile extends Component { * 💡 * Here we are doing same thing as the ErrorMsg above * Instead of checking for `errorMsg` we are checking for `companyProfile` - * state. We are displaying the `div` only if the `companyProfile` + * state. We are displaying the `div` only if the `companyProfile` * state is not empty. */ diff --git a/src/capstone/Search.jsx b/src/capstone/Search.jsx index 917124b..abadff3 100644 --- a/src/capstone/Search.jsx +++ b/src/capstone/Search.jsx @@ -6,7 +6,7 @@ import style from './solution/style'; * This component houses the input and the Search button. * When the user types in something we handle the change event and * store the values typed in the input field to the state - * When user clicks the Search button it will invoke a callback function + * When user clicks the Search button it will invoke a callback function * that was passed to this component as a props with the latest input value * as an argument */ diff --git a/src/exercise/06-LifecycleMethods.js b/src/exercise/06-LifecycleMethods.js index 182b0c3..7a80d3e 100644 --- a/src/exercise/06-LifecycleMethods.js +++ b/src/exercise/06-LifecycleMethods.js @@ -68,7 +68,7 @@ class CompanyProfile extends Component { /** * 🚨 🚨 DO NOT DELETE OR CHANGE THIS.🚨 🚨 - * This is how you would use your above component and + * This is how you would use your above component and * the output of this code is displayed on the browser */ const Usage = (props) => { diff --git a/src/exercise/07-HandlingEvents.js b/src/exercise/07-HandlingEvents.js index ffb6419..9cb81da 100644 --- a/src/exercise/07-HandlingEvents.js +++ b/src/exercise/07-HandlingEvents.js @@ -63,7 +63,7 @@ class FancyInput extends Component { /** * 🚨 🚨 DO NOT DELETE OR CHANGE THIS.🚨 🚨 - * This is how you would use your above component + * This is how you would use your above component * The output of this code is displayed on the browser on the left hand side */ const Usage = (props) => { diff --git a/src/tutorial/01-HelloWorld.md b/src/tutorial/01-HelloWorld.md index c25e375..f32340b 100644 --- a/src/tutorial/01-HelloWorld.md +++ b/src/tutorial/01-HelloWorld.md @@ -26,7 +26,7 @@ You should try this for yourself. Open the exercise file and edit the function t -Notice that `React.createElement` is a simple javascript function which takes three arguments. First argument is the element you want to render. In our case it's a `div` element. Second argument is any properties we want to pass to that element. In our case we are not passing anything so it's null. Third argument is the children for this component. In this case it's the text we want to display - `Hello World`. So with this we are telling React to render a div element like this: +Notice that `React.createElement` is a simple JavaScript function which takes three arguments. First argument is the element you want to render. In our case it's a `div` element. Second argument is any properties we want to pass to that element. In our case we are not passing anything so it's null. Third argument is the children for this component. In this case it's the text we want to display - `Hello World`. So with this we are telling React to render a div element like this: ```html
@@ -36,11 +36,11 @@ Notice that `React.createElement` is a simple javascript function which takes th Congratulations, you have created your first Hello World React component. -Now your inquisitive mind is probably asking - how in the world React renders this thing on the browser? +Now your inquisitive mind is probably asking - how in the world does React render this thing on the browser? ## Rendering -Let's step back from React for a moment and think about how we can create the similar Hello World `div` using pure Javascript. Yes pure Javascript - without any frameworks. +Let's step back from React for a moment and think about how we can create the similar Hello World `div` using pure JavaScript. Yes pure JavaScript - without any frameworks. ### Good Ol' Days @@ -55,7 +55,7 @@ Let's imagine you have a barebone `html` file that looks like below. It has a `d ``` -Now imagine inside the `div` with id `root` we want to render another `div` that says `Hello World`. The only catch is we want to do that programmatically using pure Javascript. +Now imagine inside the `div` with id `root` we want to render another `div` that says `Hello World`. The only catch is we want to do that programmatically using pure JavaScript. To achieve this we can probably do something like this: ```js @@ -73,7 +73,7 @@ Here we are creating a `div` node with `Hello World` text and appending that `di We can actually write our entire application this way - creating elements, removing elements, appending elements, etc ourselves. As a matter of fact we did write applications this way before all these UI frameworks/libraries started to mushroom. ### Age of React -A simple example like the one above are not that hard to write with pure Javascript but once your application gets bigger, it gets messier. That's where libraries like React come to the rescue - they hide away from us the messier part of rendering on the browser. +A simple example like the one above are not that hard to write with pure JavaScript but once your application gets bigger, it gets messier. That's where libraries like React come to the rescue - they hide away from us the messier part of rendering on the browser. The Core React library itself doesn't really know how to render anything on the browser because it is designed to work in a web browser as well as native applications. Thus the job of rendering your component on the browser is done by another library provided by React team called `ReactDOM`. @@ -85,7 +85,7 @@ ReactDOM.render(HelloWorld, document.getElementById('root')) Here we are calling a function called `render` on `ReactDOM` object. The first argument of the function is the component you want to render - in our case `HelloWorld`. Second argument is a document selector. ReactDOM appends the component we want to display (first argument) as a child of the node returned by the selector (second argument). -Compare this solution to the pure Javascript solution we looked at earlier. With pure Javascript we were doing the DOM manipulation ourselves - creating the `div`, appending the text and appending the newly created `div` to the `div` with id `root` as its child. But with React we are not doing any DOM manipulation ourselves. Basically we are saying to React - +Compare this solution to the pure JavaScript solution we looked at earlier. With pure JavaScript we were doing the DOM manipulation ourselves - creating the `div`, appending the text and appending the newly created `div` to the `div` with id `root` as its child. But with React we are not doing any DOM manipulation ourselves. Basically we are saying to React - > Hey React I have a component I want to render. I will tell you what the component should look like when it's rendered (remember this is what the return of the Component function tells). I will also tell you where to render this component (second argument we passed to `ReactDOM.render` function). But I don't want to get involved in DOM manipulation - I will let you do all the DOM manipulation yourself. You can call all these DOM api like `document.createElement`, `.append`, `.appendChild` etc. whenever you wish - I trust you and I don't care as long as I see on the browser what I expected to see. diff --git a/src/tutorial/02-IntroToJSX.md b/src/tutorial/02-IntroToJSX.md index 330feb2..48688f5 100644 --- a/src/tutorial/02-IntroToJSX.md +++ b/src/tutorial/02-IntroToJSX.md @@ -1,4 +1,4 @@ -In the [previous section](/tutorial/hello-world) we created our first Hello World function component. Remember we returned `React.createElement` from the function to tell React what the DOM should look like when we render this component. Another alternative way of telling React what the DOM should look like is by using JSX. JSX is a very common and recommended way (preferred over `React.createElement` syntax in most cases) to write React code. JSX is a funny looking syntax though - it's not purely HTML, it's not purely Javascript. But it's an extension of Javascript where you can write HTML like syntax with full power of Javascript. For example, the equivalent of return statement we saw in [previous page](/tutorial/hello-world) (using `React.createElement`) in JSX would be: +In the [previous section](/tutorial/hello-world) we created our first Hello World function component. Remember we returned `React.createElement` from the function to tell React what the DOM should look like when we render this component. Another alternative way of telling React what the DOM should look like is by using JSX. JSX is a very common and recommended way (preferred over `React.createElement` syntax in most cases) to write React code. JSX is a funny looking syntax though - it's not purely HTML, it's not purely JavaScript. But it's an extension of JavaScript where you can write HTML like syntax with full power of JavaScript. For example, the equivalent of return statement we saw in [previous page](/tutorial/hello-world) (using `React.createElement`) in JSX would be: ```jsx return ( @@ -6,13 +6,13 @@ return ( ) ``` -Instead of returning Javascript code, it's returning HTML-like code (it's not HTML) and notice it's not a string. Wait, what?!! Welcome to JSX! +Instead of returning JavaScript code, it's returning HTML-like code (it's not HTML) and notice it's not a string. Wait, what?!! Welcome to JSX! You don't trust that this weird syntax works, do you? Open the exercise file and edit the return statement with the JSX and save to see the magic happen! -Although you write HTML looking syntax, your JSX code is compiled into a Javascript function like the one we saw in the previous page. The above JSX code is compiled into: +Although you write HTML looking syntax, your JSX code is compiled into a JavaScript function like the one we saw in the previous page. The above JSX code is compiled into: ```jsx return React.createElement('div', null, 'Hello World'); diff --git a/src/tutorial/03-PowerOfJSX.md b/src/tutorial/03-PowerOfJSX.md index 6b8ae95..7a16222 100644 --- a/src/tutorial/03-PowerOfJSX.md +++ b/src/tutorial/03-PowerOfJSX.md @@ -1,10 +1,10 @@ In the previous page we looked at JSX syntax where we displayed a string `Hello World` inside the `div` element. What's the big deal! What else can it do for us? -Since JSX is technically Javascript it is pretty powerful in many sense. It can do everything that Javascript can do. +Since JSX is technically JavaScript it is pretty powerful in many senses. It can do everything that JavaScript can do. -If you want to execute any Javascript code within JSX then you surround your Javascript code with curly braces `{ //javascript code }` and put it inside anywhere in JSX. It will evaluate your code everytime it renders the component to find out what it should render on the browser. +If you want to execute any JavaScript code within JSX then you surround your JavaScript code with curly braces `{ //JavaScript code }` and put it anywhere in JSX. It will evaluate your code every time it renders the component to find out what it should render on the browser. -For example lets imagine we want to display a company profile information and a Company ticker. And imagine the Company ticker is stored on some variable somewhere and the company profile information is stored in another variable as an object. In that case we might write: +For example let's imagine we want to display a company profile information and a Company ticker. And imagine the Company ticker is stored on some variable somewhere and the company profile information is stored in another variable as an object. In that case we might write: ```jsx function CompanyProfile(props) { @@ -22,7 +22,7 @@ function CompanyProfile(props) {
Profile of: {ticker}
{ - {/*This is javascript code inside the curly braces*/} + {/*This is JavaScript code inside the curly braces*/} Object.keys(companyProfileInfo) .map((key, index) => { return
{key}: {companyProfileInfo[key]}
@@ -49,7 +49,7 @@ The HTML output of the above Component when it's rendered will be:
``` -Well that's a handful, so let's review what's happening here. We have a `ticker` variable assigned to a value `AAPL` and an object `companyProfileInfo` that has company profile. Inside the JSX (inside the `return` statement) we have a `div` enclosing everything. In JSX, **a component must return one and only one enclosing tag**. That tag can have as many children as it wants. +Well that's a handful, so let's review what's happening here. We have a `ticker` variable with a value `AAPL` and an object `companyProfileInfo` that has company profile. Inside the JSX (inside the `return` statement) we have a `div` enclosing everything. In JSX, **a component must return one and only one enclosing tag**. That tag can have as many children as it wants. ```jsx // ❌ This is illegal in React since the return has more than one tag. return ( @@ -78,7 +78,7 @@ return ( ) ``` -Going back to the company profile example, the first child of the enclosing `div` is another `div`. Inside that `div` we used curly braces to display the `ticker` alongside `Profile of:`. Remember curly braces is how we inject Javascript code inside JSX. So here the `ticker` variable would be evaluated and rendered inside that `div` tag. Then we have another `div` as a second children of the enclosing parent. Inside this `div` we again have curly braces and we executed some Javascript code. In this case we mapped each key of the `companyProfileInfo` object to a `div` element. The content of this `div` is again evaluated using another curly braces like: `{key} : {companyProfileInfo[key]}`. What we did here is told React that for each key of the `companyProfileInfo` object we want to render a `div` whose content would be the `key` followed by a colon `:` followed by corresponding value for the key on the object (`companyProfileInfo[key]`). +Going back to the company profile example, the first child of the enclosing `div` is another `div`. Inside that `div` we used curly braces to display the `ticker` alongside `Profile of:`. Remember curly braces is how we inject JavaScript code inside JSX. So here the `ticker` variable would be evaluated and rendered inside that `div` tag. Then we have another `div` as a second child of the enclosing parent. Inside this `div` we again have curly braces and we execute some JavaScript code. In this case we mapped each key of the `companyProfileInfo` object to a `div` element. The content of this `div` is again evaluated using another curly braces like: `{key} : {companyProfileInfo[key]}`. What we did here is that we told React that for each key of the `companyProfileInfo` object we want to render a `div` whose content would be the `key` followed by a colon `:` followed by the corresponding value for the key on the object (`companyProfileInfo[key]`). Let's write some code here to hit the nail on the head. Please open the exercise file and follow the instructions. @@ -86,8 +86,8 @@ Let's write some code here to hit the nail on the head. Please open the exercise Key takeaways: - Components must return only one tag. This tag can have as many children as it likes. Instead of a tag, it can however return a string or null. -- You can run any Javascript code inside the `return` using curly braces `{//run any Javascript}`. -- Outside of the `return` it's exactly like any other Javascript class or function. You can do whatever you desire to do. +- You can run any JavaScript code inside the `return` using curly braces `{//run any JavaScript}`. +- Outside of the `return` it's exactly like any other JavaScript class or function. You can do whatever you desire to do. ### Differences with HTML @@ -115,7 +115,7 @@ In HTML class attribute is passed as string.
``` -In JSX also class attribute is passed as string but instead of calling it `class` we call it `className`. That's because JSX is extension of Javascript and "class" is a reserved keyword in Javascript. +In JSX also class attribute is passed as string but instead of calling it `class` we call it `className`. That's because JSX is extension of JavaScript and "class" is a reserved keyword in JavaScript. ```jsx
diff --git a/src/tutorial/04-Props.md b/src/tutorial/04-Props.md index 64831a3..a61e75a 100644 --- a/src/tutorial/04-Props.md +++ b/src/tutorial/04-Props.md @@ -1,10 +1,10 @@ -Let's continue with the earlier example where we displayed company profile of `AAPL`. Let's say I want to display the Company Profile for `FB` at some other place in the application. Since we have two variables `ticker` and `companyProfileInfo` hard-coded inside this component should I copy and paste the entire component to some other place and replace the `ticker` and `companyProfileInfo` to be that of `FB`? +Let's continue with the earlier example where we displayed company profile of `AAPL`. Let's say I want to display the Company Profile for `FB` at some other place in the application. Since we have two variables `ticker` and `companyProfileInfo` hard-coded inside this component, should we copy and paste the entire component to some other place and replace the `ticker` and `companyProfileInfo` to be that of `FB`? - Well, no. Remember React is about building reusable Components. So we want to build a component called `CompanyProfile` that can be reused for any company ticker. + Well, no. Remember that React is about building reusable Components. So we want to build a component called `CompanyProfile` that can be reused for any company ticker. Let's look at the `CompanyProfile` component again. Here we have two variables `ticker` and `companyProfileInfo`. So what if instead of hard coding the values of these two variables here inside the component, we could pass those values to this component instead? -If we were to pass these values to this component from outside, then this Component will not be tied to one Company ticker. We can pass in `XYZ` and it's profile info to this component and it should be able to render the profile for `XYZ` or any other company for that matter. This component becomes truly reusable. Wonderful, that's what we want. +If we were to pass these values to this component from outside, then this Component will not be tied to one Company ticker. We can pass in `XYZ` and it's profile info to this component and it should be able to render the profile for `XYZ` or any other company for that matter. This component becomes truly reusable. Wonderful, that's what we want. ```jsx function CompanyProfile(props) { @@ -28,8 +28,8 @@ function CompanyProfile(props) { } ``` -Well then how do we pass these values to a component from outside? That's where `props` comes in. In React lingo, `props` are something that the component is passed by the user of that component (parent component passes `props` to child component). -You can pass anything as a props - `function`, `object`, `boolean`, `string`, `number` etc. Here's an example of a Component passing the `props` to its children. +Well then how do we pass these values to a component from outside? That's where `props` comes in. In React lingo, `props` is something that the component is passed by the user of that component (parent component passes `props` to child component). +You can pass anything as a prop: `function`, `object`, `boolean`, `string`, `number`, etc. Here's an example of a Component passing the `props` to its children. ```jsx function Children(props) { @@ -84,7 +84,7 @@ function Children(props) { ``` ### PropTypes -In many cases it's better for a component to clearly define a contract regarding the `props` it can accept - data type, data structure, if the props is required etc. +In many cases it's better for a component to clearly define a contract regarding the `props` it can accept - data type, data structure, if the props is required etc. There are couple obvious benefits of this: - React can enforce type checking to avoid many bugs arising from parents passing props with a type that's different from what the children expects (ex. parent passing `string` when children expects an `object`). - If you are writing components that will be used by different people at different parts of the application, it's always useful for those users to know what are the props they can pass, what is the expected structure of the props etc. @@ -111,16 +111,16 @@ SoftwareEngineer.propTypes = { }) //must be an object with 'street' and 'city' fields } ``` -Here we have defined the `propTypes` property and assigned an object. Each key in this object represents the name of the `props` the user of this component can pass. The value defines the "type" of the `props` - you know `string`, `number`, `array` etc. All `props` are optional (user of the component doesn't have to pass them) except the one that has `.isRequired`. Here's a quick explanation on three `props` defined above: +Here we have defined the `propTypes` property and assigned an object. Each key in this object represents the name of the `props` the user of this component can pass. The value defines the "type" of the `props` - you know: `string`, `number`, `array`, etc. All `props` are optional (user of the component doesn't have to pass them) except the one that has `.isRequired`. Here's a quick explanation on three `props` defined above: - `name` - It expects the value of this `props` to be a `string` and it's required because, well, it has `.isRequired`. - `hobbies` - It's optional but if passed it must be an array of strings. -- `address` - It's also optional but if passed it must be an object with two fields - `street` and `city` and both must be string. +- `address` - It's also optional but if passed it must be an object with two fields - `street` and `city` - and both must be string. These are just some examples of what you can do to enable type checking. There are plenty more types you can define - please check out [the documentation](https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes) for more. ### Default Props In some cases you might want to define a default value for a `props` in case it is not passed to you. -You can use `defaultProps` property to define your defaults. With this you're basically saying - "if someone doesn't pass me a value for a `props` that I'm expecting, then I want the value of that `props` to be what I have defined in the `defaultProps`". For example - for above component we can define `defaultProps` as follows: +You can use `defaultProps` property to define your defaults. With this you're basically saying - "if someone doesn't pass me a value for a `props` that I'm expecting, then I want the value of that `props` to be what I have defined in the `defaultProps`". For example - for the above component we can define `defaultProps` as follows: ```jsx import React from 'react'; @@ -132,7 +132,7 @@ class SoftwareEngineer extends React.Component { console.log(this.props.hobbies); //if this props is not passed, it will print `undefined` because we haven't defined any default value for this props - console.log(this.props.address); + console.log(this.props.address); return (...) } } diff --git a/src/tutorial/05-State.md b/src/tutorial/05-State.md index 0e24d40..e3095f6 100644 --- a/src/tutorial/05-State.md +++ b/src/tutorial/05-State.md @@ -2,16 +2,16 @@ React Components can have local state. This state is not shared with the compone Remember when we looked at different ways of creating React component in the first page of this tutorial, we said there are things that component extending `React.Component` can do that a `function` component cannot do? Well state is one of them. `React.Component` can have states but `function` cannot have states. -*Note: There's a new feature in React called hooks that let's us use state within function component but that's still in alpha so if we want to use state right now on a component we still need to use `React.Component`* +*Note: There's a new feature in React called hooks that let's us use state within function component but that's still in alpha so if we want to use state right now on a component we still need to use `React.Component`.* -Below is a simple component that has a state. +Below is a simple component that has a state. ```jsx class Component extends React.Component { constructor(props){ super(props); this.state = { - counter: 0 + counter: 0 } } @@ -23,7 +23,7 @@ class Component extends React.Component { `state` is just an object. If you notice the constructor, we initialized the state with `{counter: 0}`. And we used the state inside the `return` of the `render` function as `{this.state.counter}`. -We initialized the `state` in the constructor but how do we update it? For eg. in the above example how do we change the `counter` to lets say 1? For that React provides a function called `setState`. You should **always** use `setState` function to change `state` and **never** mutate it directly. +We initialized the `state` in the constructor, but how do we update it? For example in the above example, how do we change the `counter` to let's say 1? For that React provides a function called `setState`. You should **always** use the `setState` function to change `state` and **never** mutate it directly. ```jsx //❌ NEVER DO THIS @@ -34,11 +34,12 @@ this.setState({ counter: 2 }); ``` -If `state` is just an instance variable in the component, can we call it some other name and why do we **have** to use `setState`? Well no we cannot call it by some other name and we have to use `setState` to update the `state` mainly because React understands `state`. When `state` of your component changes, React re-renders your component (by re-render I mean calls the `render` function again to see if the DOM will change as a result of change in `state`). This is fundamental to the declarative nature of React. + +If `state` is just an instance variable in the component, can we call it some other name? And why do we **have** to use `setState`? Well no we cannot call it by some other name, and we have to use `setState` to update the `state` mainly because React understands `state`. When `state` of your component changes, React re-renders your component (by re-render I mean calls the `render` function again to see if the DOM will change as a result of change in `state`). This is fundamental to the declarative nature of React. ### setState -Let's look deeper into `setState` function. First argument of `setState` function can take either a new state object or a function. It also has a optional second argument, which is a callback which is executed when the state is updated. +Let's look deeper into `setState` function. The first argument of `setState` function can take either a new state object or a function. It also has an optional second argument, a callback which is executed when the state is updated. ```jsx setState(newState || function, optional callback) @@ -56,7 +57,7 @@ this.setState({ a: 3 }); //we call setState with just one key value pair state = { a: 3, b: 2, c: 3 } //state after setState is flushed ``` -- If the first argument is a function then it first executes the function by passing the current `state` as it's argument. The function must return an object. It then merges this output with the current `state` just like it did above. For example: +- If the first argument is a function, then it first executes the function by passing the current `state` as it's argument. The function must return an object. It then merges this output with the current `state` just like it did above. For example: ```jsx state = { a: 1, b: 2, c: 3} //initial state @@ -83,7 +84,7 @@ this.setState({ console.log(this.state.counter);//still prints 0 ``` -Also if you want to update `state` using the current state value **always** use the updater function inside `setState` instead of passing object. For example below code will not work. +Also if you want to update `state` using the current state value, **always** use the updater function inside `setState` instead of passing object. For example below code will not work. ```jsx //❌ DONT DO THIS @@ -93,7 +94,7 @@ this.setState({ counter: this.state.counter + 1 }); this.setState({ counter: this.state.counter + 1 }); this.setState({ counter: this.state.counter + 1 }); //the state will be 1 when all of the calls are flushed -//because since the calls were asynchronous, this.state.counter +//because since the calls were asynchronous, this.state.counter //on all three calls were 0 and adding 1 resulted in 1. diff --git a/src/tutorial/06-LifecycleMethods.md b/src/tutorial/06-LifecycleMethods.md index 7d9f11e..6031f10 100644 --- a/src/tutorial/06-LifecycleMethods.md +++ b/src/tutorial/06-LifecycleMethods.md @@ -1,4 +1,4 @@ -React provides a way to take some actions on different lifecycle phases of the component. There are several benefits of that. For example we may want to fetch some data when a component is rendered, or clean up some resources before the component is removed from the DOM. React calls these lifecycle methods (if we have defined them) during these lifecycle phases. You are not required to implement any of these lifecycle methods and implement only those that you need on your particular component. +React provides a way to take some actions on different lifecycle phases of the component. There are several benefits to that. For example, we may want to fetch some data when a component is rendered, or clean up some resources before the component is removed from the DOM. React calls these lifecycle methods (if we have defined them) during these lifecycle phases. You are not required to implement any of these lifecycle methods, you implement only those that you need on your particular component. ```jsx class ComponentWithLifecycle extends React.Component { @@ -23,10 +23,12 @@ class ComponentWithLifecycle extends React.Component { } ``` -Lets look at some common use cases of when these lifecycle methods comes in handy. +Lets look at some common use cases where these lifecycle methods comes in handy. -Let's consider the `CompanyProfile` example we looked at earlier where we were displaying the `ticker` and the `companyProfileInformation`. On the example the parent of the component passed both `ticker` and `companyProfileInformation` as `props`. But let's assume that parent only has the `ticker` information which it will pass as `props` but it doesn't have the profile information data. Assume there's an API that the `CompanyProfile` component can use to fetch the profile information data. This is very common use case. So how/when should the `CompanyProfile` component fetch the data. `componentDidMount` is the right lifecycle method to make the network call (fetch data using the API). This method is called only once when the component is mounted on the DOM. After the API returns the data we can set the data to the `state` and use `this.state.companyProfileInformation` instead of `this.props.companyProfileInformation` inside the `render` function. -Remember in this case the parent didn't pass the `companyProfileInformation` props but instead `CompanyProfile` fetched that data itself and stored in the `state`. +Let's consider the `CompanyProfile` example we looked at earlier where we were displaying the `ticker` and the `companyProfileInformation`. In the example, the parent of the component passed both `ticker` and `companyProfileInformation` as `props`. But let's assume that the parent only has the `ticker` information, which it will pass as `props`, but it doesn't have the profile information data. Assume there's an API that the `CompanyProfile` component can use to fetch the profile information data. This is a very common use case. So how/when should the `CompanyProfile` component fetch the data? + +`componentDidMount` is the right lifecycle method to make the network call (fetch data using the API). This method is called only once - when the component is mounted on the DOM. After the API returns the data, we can set the data to the `state` and use `this.state.companyProfileInformation` instead of `this.props.companyProfileInformation` inside the `render` function. +Remember that in this case the parent didn't pass the `companyProfileInformation` props but instead `CompanyProfile` fetched that data itself and stored in the `state`. ```jsx import DataApi from '../api'; @@ -47,9 +49,9 @@ Let's do the same exercise. Please open the exercise file and make the change as -That works for the initial value of `ticker` passed by parent because `componentDidMount` is called only once but what happens when the `props` changes - meaning the parent component passes a new `ticker` value. How/When would `CompanyProfile` component know to fetch data again for the new `ticker`? In that case you can use `componentDidUpdate`. This lifecycle method is called every time component is updated. Remember component is updated every time the `props` or the `state` changes. +That works for the initial value of `ticker` passed by parent because `componentDidMount` is called only once. But what happens when the `props` changes (meaning the parent component passes a new `ticker` value)? How/when would `CompanyProfile` component know to fetch data again for the new `ticker`? In that case you can use `componentDidUpdate`. This lifecycle method is called every time component is updated. Remember component is updated every time the `props` or the `state` changes. -You're probably thinking - 'This doesn't sound good'. If you were to fetch the data inside `componentDidUpdate` (which would be called every time your component updates), your component will make a lot of repetitive network calls to get the profile information for same ticker because the component might have updated not just when `ticker` props changed but when any other `props` changed or some other `state` changed. +You're probably thinking - 'This doesn't sound good'. If you were to fetch the data inside `componentDidUpdate` (which would be called every time your component updates), your component will make a lot of repetitive network calls to get the profile information for same ticker because the component might have updated, not just when `ticker` props changed but when any other `props` changes or some other `state` changes. Well you're thinking correctly. That's the reason why you should **always** check if the `props` you are interested in changed (in this case `ticker` changed) before making the network request. ```jsx @@ -59,7 +61,7 @@ class CompanyProfile extends React.Component { //when react calls componentDidUpdate, it gives as argument the value of // props and state before the update happened so you can do the comparision componentDidUpdate(prevProps, prevState) { - //always be defensive otherwise you will make a lot of + //always be defensive, otherwise you will make a lot of //unnecessary network calls //in this case we only make the network call if the //ticker props before and after the component updated are not same @@ -73,14 +75,13 @@ class CompanyProfile extends React.Component { } } } - ``` -These are just some common use cases when you want to use lifecycle methods provided by React. Please refer to the +These are just some common use cases when you want to use the lifecycle methods provided by React. Please refer to the [React documentations](https://reactjs.org/docs/react-component.html#the-component-lifecycle) -for extensive list of all the lifecycle methods available. +for an extensive list of all the lifecycle methods available. -Also note that there are some lifecycle methods that were available as part of earlier version of React (16 and earlier) but they will be deprecated as part of version 17.0, so **DO NOT** use them. +Also note that there are some lifecycle methods that were available as part of earlier versions of React (16 and earlier), and they will be deprecated as part of version 17.0, so **DO NOT** use them: - componentWillMount - componentWillUpdate diff --git a/src/tutorial/07-HandlingEvents.md b/src/tutorial/07-HandlingEvents.md index 373db63..ca3d092 100644 --- a/src/tutorial/07-HandlingEvents.md +++ b/src/tutorial/07-HandlingEvents.md @@ -1,5 +1,6 @@ -Handling events in JSX is pretty similar to handling events in actual DOM. -For example if we have a `button` element and we want to pass an event handler for `click` event we can pass a props called `onClick` to the button element. +Handling events in JSX is pretty similar to handling events in actual DOM. +For example if we have a `button` element and we want to pass an event handler for a `click` event, we can pass a props called `onClick` to the button element. + ```jsx function ClickableButton(props){ @@ -20,7 +21,7 @@ Ex: - `onselect` => `onSelect` - `onchange` => `onChange` -2. With HTML we would pass a string as a value of the attribute but in JSX we passed actual function. For example compare the above `button` in JSX to the following HTML equivalent: +2. With HTML we would pass a string as a value of the attribute, but in JSX we pass the actual function. For example compare the above `button` in JSX to the following HTML equivalent: ```html @@ -44,9 +45,9 @@ function InputComponent(props){ ``` ### Function Binding -One gotcha when using event handlers with components created as `ES6` classes (by extending `React.Component`) is the method binding. This has nothing to do with React or JSX but it's new Javascript feature in `ES6` and trips even many experienced folks. +One gotcha when using event handlers with components created as `ES6` classes (by extending `React.Component`) is the method binding. This has nothing to do with React or JSX - it's a new JavaScript feature in `ES6` and trips even many experienced folks. -Class function in `ES6` are not bound to anything by default. For example take below example of `Input` component. Here we just have an input element whose value is assigned to `this.state.inputValue` and we are handling `onChange` event on this `input` by passing `this.handleChange` function. Inside the `handleChange` function we are calling `setState` with the new value typed by the user. Now if we run this code it will error out saying something like "Cannot read property setState of undefined". Weird huh? The reason is because `handleChange` is not bound to anything. So `this` inside `handleChange` is `undefined`. +Class functions in `ES6` are not bound to anything by default. For example take below example of `Input` component. Here we just have an input element whose value is assigned to `this.state.inputValue`, and we are handling the `onChange` event on this `input` by passing our `this.handleChange` function. Inside the `handleChange` function we are calling `setState` with the new value typed by the user. Now if we run this code it will error out saying something like "Cannot read property setState of undefined". Weird huh? The reason is because `handleChange` is not bound to anything. So `this` inside `handleChange` is `undefined`. ```jsx class Input extends React.Component { diff --git a/src/tutorial/08-ComposingComponents.md b/src/tutorial/08-ComposingComponents.md index 2c368cd..ce4122e 100644 --- a/src/tutorial/08-ComposingComponents.md +++ b/src/tutorial/08-ComposingComponents.md @@ -20,11 +20,11 @@ The job of the `Dialog` component is to render a modal window but it shouldn't c How do we tell this dialog to display different things? -There are couple common patterns used in React to do this. +There are a couple of common patterns used in React to do this: 1. props.children -One way to achieve this goal of reusing `Dialog` anywhere we like without `Dialog` having to know what it's displaying is by using the `children` props. Let's look at one potential usage of `Dialog` component below to understand this: +One way to achieve this goal of reusing `Dialog` anywhere we like without `Dialog` having to know what it's displaying, is by using the `children` props. Let's look at one potential usage of `Dialog` component below to understand this: ```jsx //Displays EmployeeProfile inside a Dialog @@ -39,7 +39,7 @@ class EmployeeProfileDialog extends React.Component { } } ``` -Here we have a component called `EmployeeProfile` (any other valid React component would also work here) as a "child" of `Dialog`. When we pass a "child" to a component it will be available inside that component as a `props` called `children`. So in this case, `EmployeeProfile` will be available inside the `Dialog` component as `props.children`. We can rewrite render function of `Dialog` so that it renders `props.children`. +Here we have a component called `EmployeeProfile` (any other valid React component would also work here) as a "child" of `Dialog`. When we pass a "child" to a component it will be available inside that component as a `props` called `children`. So in this case, `EmployeeProfile` will be available inside the `Dialog` component as `props.children`. We can rewrite the render function of `Dialog` so that it renders `props.children`: ```jsx class Dialog extends React.Component { @@ -54,15 +54,15 @@ class Dialog extends React.Component { } } ``` -Think about what we did here. The `Dialog` component really doesn't know what it's `children` would be beforehand. Whoever is using this `Dialog` component can pass in any `children` that they like. Within the `render` function `Dialog` says - hey I'll display anything my user passes me as `children`, I don't need to know what that is. +Think about what we did here. The `Dialog` component really doesn't know what it's `children` would be beforehand. Whoever is using this `Dialog` component can pass in any `children` that they like. Within the `render` function `Dialog` says "Hey, I'll display anything my user passes me as `children`, I don't need to know what that is." This my friend is composition and this is mighty powerful if you want to write reusable components. 2. render props -Another pattern to achieve a similar thing in React is by using what's known as "render props" pattern. +Another pattern to achieve a similar thing in React is by using what's known as the "render props" pattern. -So now let's take the same dialog example but let's make it more sophisticated. Imagine the dialog has a header, body and footer section. We want the user of this component to be able to display anything they like within either of those three sections. +So now let's take the same dialog example, but let's make it more sophisticated. Imagine the dialog has a header, body and footer section. We want the user of this component to be able to display anything they like within either of those three sections. ```jsx class Dialog extends React.Component { diff --git a/src/tutorial/09-Capstone.md b/src/tutorial/09-Capstone.md index 4ecc9aa..fe007f5 100644 --- a/src/tutorial/09-Capstone.md +++ b/src/tutorial/09-Capstone.md @@ -24,9 +24,9 @@ There are four components in this project. Just a brief word on what those compo - `Capstone` - Just named Capstone to signify that this component encapsulates our entire project. We import and use below components inside this to build our feature. - `Search` - This component has search input and the search button. -- `CompanyProfile` - This component renders company profile. It takes a company ticker as props and fetches the profile data from the API and renders that data. -- `CompanyFinancial` - This component renders company financial information. It takes a company ticker as props and fetches the financial information data from the API and renders it. -- `DataAPI` - This is the API used to fetch the required data. You don't need to change anything on this API. Under the hood it uses a random data generator so please do not rely on the accuracy of the data. Like mentioned above, this API will give you results as long as the ticker is 3 characters long and it will throw an error if the ticker is longer than or shorter than 3 characters. It also does not check whether or not the ticker is valid. In real life this would call an actual API that will fetch actual data, but as long as the data structure doesn't change our React code would not change. So don't worry about the API not giving actual data. It's not relevant for us to complete the task at hand. +- `CompanyProfile` - This component renders company profile. It takes a company ticker as `props` and fetches the profile data from the API and renders that data. +- `CompanyFinancial` - This component renders company financial information. It takes a company ticker as `props` and fetches the financial information data from the API and renders it. +- `DataAPI` - This is the API used to fetch the required data. You don't need to change anything on this API. Under the hood it uses a random data generator so please do not believe the data. Like mentioned above, this API will give you results as long as the ticker is 3 characters long and it will throw an error if the ticker is longer than or shorter than 3 characters. It also does not check whether or not the ticker is valid. In real life this would call an actual API that will fetch actual data, but as long as the data structure doesn't change our React code would not change. So don't worry about the API not giving actual data. It's not relevant for us to complete the task at hand. #### Disclaimer How we break down components to build this feature is not set in stone. The component decomposition is more often art than science. We can most definitely build this feature with just one component instead of four, or we could easily break these components into more granular pieces. Please read this [excellent article](https://reactjs.org/docs/thinking-in-react.html) on how to think about components in React. @@ -34,4 +34,4 @@ How we break down components to build this feature is not set in stone. The comp In this project, there are certain decisions that have been made to incorporate most of the concepts we have touched on this tutorial. While what we have done definitely works, we could also achieve the same outcomes using different approaches. #### Extra Credit -For example, one of the best practices in React is to create "stateless" components (components that do not have `state`) as possible. This doesn't necessarily mean having `state` is bad, it just means that components will be less cluttered. Stateless components receive props from their parent components and render something based on the provided props. It will make your component really dumb and that should be your goal - **make dumb components**. They are easier to test, easier to reuse and easier to reason about. So in this project, we could've created all of our child components (CompanyProfile, CompanyFinancial, Search) stateless, and [lifted all the state](https://reactjs.org/docs/lifting-state-up.html) to the parent component (Capstone). I will leave this to you as extra credit. You can refactor the code so that the child components are stateless and only the parent component has state. The parent component passes these state down to the child component as props. +For example, one of the best practices in React is to create "stateless" components (components that do not have `state`) as possible. This doesn't necessarily mean having `state` is bad, it just means that components will be less cluttered. Stateless components receive `props` from their parent components and render something based on the provided `props`. It will make your component really dumb and that should be your goal - **make dumb components**. They are easier to test, easier to reuse and easier to reason about. So in this project, we could've created all of our child components (CompanyProfile, CompanyFinancial, Search) stateless, and [lifted all the state](https://reactjs.org/docs/lifting-state-up.html) to the parent component (Capstone). I will leave this to you as extra credit. You can refactor the code so that the child components are stateless and only the parent component has state. The parent component passes these state down to the child component as `props`. diff --git a/src/tutorial/10-Conclusion.md b/src/tutorial/10-Conclusion.md index 1952da2..a9e491d 100644 --- a/src/tutorial/10-Conclusion.md +++ b/src/tutorial/10-Conclusion.md @@ -1,4 +1,4 @@ -Congratulations! Thank you for sticking around till the end. I hope you enjoyed the tutorial, and I hope they helped you get off the ground with some React fundamentals. +Congratulations! Thank you for sticking around 'til the end. I hope you enjoyed the tutorial, and I hope it helped you get off the ground with some React fundamentals. This tutorial is by no means a comprehensive one. I have tried to cover some grounds on the most basic fundamentals you must know about React. If you liked this tutorial, please feel free to share this with others who are trying to learn React. If there is anything you didn't particularly like, or thought was confusing, please feel free to drop me a note or create a PR. Needless to say, your suggestions would help several other folks trying to learn React. @@ -8,7 +8,7 @@ If you liked this tutorial, please feel free to share this with others who are t As with anything in software engineering, the best way to learn is by doing. I hope in this tutorial you were able to do the exercises on each section, and also complete the capstone project at the end. The next step is to create your own application and starting fiddling with it. The easiest way to get going is by using [create-react-app](https://github.com/facebook/create-react-app). With this, you don't have to waste a single minute doing any configuration/setup to create a new react application. Everything is configured for you. ### Real World example -Also, if you want to explore some real world application written in React, guess what? you have already checked one out. I'm not sure if you noticed, but this tutorial application is written in React. So it's not a bad idea to navigate the code base. Start from `index.js` and explore - see how things are done, play with components, make changes, try to make improvements and see where it leads you. If you think the changes you made locally are useful to the community, please [create a PR](https://github.com/tyroprogrammer/learn-react-app). It will help you and it will help others! 😊 +Also, if you want to explore some real world application written in React, guess what? You have already checked one out. I'm not sure if you noticed, but this tutorial application is written in React. So it's not a bad idea to navigate the code base. Start from `index.js` and explore - see how things are done, play with components, make changes, try to make improvements and see where it leads you. If you think the changes you made locally are useful to the community, please [create a PR](https://github.com/tyroprogrammer/learn-react-app). It will help you and it will help others! 😊 ## Resources