Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Typo/spelling mistake #49

Merged
merged 7 commits into from
Oct 1, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@ If you are new to Javascript, the following resources may help you to get starte
* **[Intro to JavaScript](https://in.udacity.com/course/intro-to-javascript--ud803-india)**
* **[Object-Oriented JavaScript](https://in.udacity.com/course/object-oriented-javascript--ud015)**
* **[ES6- javaScript Improved](https://in.udacity.com/course/es6-javascript-improved--ud356)**
* **[Learning Javascript's Promises](https://in.udacity.com/course/javascript-promises--ud898)**
* **[Learning JavaScript's Promises](https://in.udacity.com/course/javascript-promises--ud898)**
* **[The Complete JavaScript Handbook](https://medium.freecodecamp.org/the-complete-javascript-handbook-f26b2c71719c)**

Introduction to React:
* **[React Documentation](https://reactjs.org/docs/getting-started.html)**
* **[Beginer's Guide To React](https://egghead.io/courses/the-beginner-s-guide-to-react)**
* **[Beginner's Guide To React](https://egghead.io/courses/the-beginner-s-guide-to-react)**
* **[React + Webpack 4 + Babel 7 Setup Tutorial](https://www.robinwieruch.de/minimal-react-webpack-babel-setup/)**
* **[Create React App](https://github.com/facebook/create-react-app)**
* **[The React Handbook](https://medium.freecodecamp.org/the-react-handbook-b71c27b0a795)**
Expand Down
2 changes: 1 addition & 1 deletion content/blog/function-or-class/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ Who knows? It's up to those of us in the community to find out what works and wh
## So, what should I use? Function or Class Components in April 2019?

Function components if you do not need `getSnapshotBeforeUpdate`
or `componentDidCatch`, or if you have a partifular library that is not compatabile with Hooks. All other use cases are covered by Hooks.
or `componentDidCatch`, or if you have a particular library that is not compatible with Hooks. All other use cases are covered by Hooks.

## Final Thoughts

Expand Down
2 changes: 1 addition & 1 deletion content/blog/history-of-react/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ They had the model right, but they needed to do something about user experience.
Jordan Walke the mastermind created the early prototype of the most popular framework of the decade.

**2012 - Something new had started at Facebook**
A improved version of react prototype helps facebook engineers to manage facebook ads more conveniently. Insterest of instagram in the react library constantly force facebook to make it open source
A improved version of react prototype helps facebook engineers to manage facebook ads more conveniently. Interest of instagram in the react library constantly force facebook to make it open source

**2013 - The year of the Big Launch**
The Big News is - The React Got open sourced, Developers can not be happy enough this year.
Expand Down
4 changes: 2 additions & 2 deletions content/blog/popular/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,11 +14,11 @@ React is a relatively fast library to learn when compared to other front-end sol

**Components and Declarative Views**

Although there are many benefits to React over its competitors, it could be argued that one of the main things driving its popularity is the modularity of its components. Write a component once in React and it can then be rendered whenever and wherever the developer pleases. In this way, React can be described as a component-based front-end library that employs declarative views. The developer has the ability to control flow and state in a React application in a simpler way while simultaneously writing less code. React components also manage their own state, which aids in the creation of increasingly complex UIs. Because all component logic is done in JavaScript, data can pass quickly through React apps while simultaneously keeping the app's state separate from the DOM. This means that React is faster and more reliable than other front-end frameworks or libraries, especially when dealing with large quanities of data and numerous changes to the state.
Although there are many benefits to React over its competitors, it could be argued that one of the main things driving its popularity is the modularity of its components. Write a component once in React and it can then be rendered whenever and wherever the developer pleases. In this way, React can be described as a component-based front-end library that employs declarative views. The developer has the ability to control flow and state in a React application in a simpler way while simultaneously writing less code. React components also manage their own state, which aids in the creation of increasingly complex UIs. Because all component logic is done in JavaScript, data can pass quickly through React apps while simultaneously keeping the app's state separate from the DOM. This means that React is faster and more reliable than other front-end frameworks or libraries, especially when dealing with large quantities of data and numerous changes to the state.

**The Virtual DOM**

React uses something called the virtual DOM, which solves an all-too-common problem many other frameworks and front-end libraries have of updating the DOM more than necessary. Manipulating the DOM is a slow process, and the ability to avoid uncessary updates means your application can run faster and more responsively.
React uses something called the virtual DOM, which solves an all-too-common problem many other frameworks and front-end libraries have of updating the DOM more than necessary. Manipulating the DOM is a slow process, and the ability to avoid unnecessary updates means your application can run faster and more responsively.

The virtual DOM is essentially a representation of the current DOM object. Instead of updating the entire DOM when a React app's state changes, React updates the virtual DOM. This is then compared against the current state of the actual DOM, and in doing so, the exact change can be identified. React can then update the DOM to reflect only those things that have changed as opposed to updating the entire DOM.

Expand Down
4 changes: 2 additions & 2 deletions content/blog/react-hooks/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ class App extends Component {
return (
<div>
count is: {this.state.count}
<buton onClick={this.counting}>add</button>
<button onClick={this.counting}>add</button>
</div>
)
}
Expand Down Expand Up @@ -90,7 +90,7 @@ Let's break down what's happening here...

1. We are importing the ```useState``` method from react
2. We are creating a functional component named ```App```
3. The ```count``` and ```setCount``` are values we destructer out of the useState. the ```count``` is the state and ```setCount``` is the function that updates it.
3. The ```count``` and ```setCount``` are values we destructure out of the useState. the ```count``` is the state and ```setCount``` is the function that updates it.
4. Inside our useState we pass in our initial state, which is 0.
5. We create a counting method that updates the count using the ```setCount``` method.
6. Lastly, the button calls the counting method and updates the count. we can see the count value by adding it in our return
Expand Down
4 changes: 2 additions & 2 deletions content/blog/state-vs-props/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ class ExampleOfState extends Component {
}
```

In this example the value will be always 0, so the output will always be the **'The value is 0!'**. Nevertheles, to make use of the **state** in our application, we must always refer to that as **this.state.** nameOfYourState.
In this example the value will be always 0, so the output will always be the **'The value is 0!'**. Nevertheless, to make use of the **state** in our application, we must always refer to that as **this.state.** nameOfYourState.

State is so awesome that we can even change it! We can change the state by using **setState**:

Expand All @@ -51,7 +51,7 @@ However, there is a problem, to keep up with the development best practices we m

# Why use props?

Props are the "state" version in Function components. However, we need to be careful!! **We cannot manipulate props, or change it inside a FUNCTION COMPONENT**. It would make our applications really messy, therefore, we just pass props as references. In summary, props are like a brigde that link the dynamic content in a class component to a function component.
Props are the "state" version in Function components. However, we need to be careful!! **We cannot manipulate props, or change it inside a FUNCTION COMPONENT**. It would make our applications really messy, therefore, we just pass props as references. In summary, props are like a bridge that link the dynamic content in a class component to a function component.

```
-- CLASS COMPONENT --
Expand Down