diff --git a/guide/english/react/index.md b/guide/english/react/index.md index de7452c616..b53c0106a8 100644 --- a/guide/english/react/index.md +++ b/guide/english/react/index.md @@ -5,9 +5,7 @@ title: React React is a JavaScript library for building user interfaces. It was voted the most loved in the "Frameworks, Libraries, and Other Technologies" category of Stack Overflow's 2017 Developer Survey.1 -React is a JavaScript library and React applications built on it run in the browser, NOT on the server. Applications of this kind only communicate with the server when necessary, which makes them very fast compared to traditional websites that force the user to wait for the server to re-render entire pages and send them to the browser. - -React is used for building user interfaces - what the user sees on their screen and how they interact with your web app. This interface is split up into components, instead of having one huge page you break it up into smaller pieces known as components. In more general terms, this approach is called Modularity. +React is used for building user interfaces - what the user sees on their screen and how they interact with your web app. This interface is split up into components. Instead of having one huge page, you break it up into smaller pieces known as components. This approach is called modularity. - It's declarative: React uses a declarative paradigm that makes it more readable. - It's efficient: React computes the minimal set of changes necessary to keep your DOM up-to-date. @@ -16,8 +14,8 @@ React is used for building user interfaces - what the user sees on their screen ## Why learn React? -1. React involves Composition that is lots of components wrapping up the functionalities into an encapsulated container. -Many popular websites use React implementing the MVC architectural pattern. Facebook (Partially), Instagram (Completely), Khan Academy (Partially), Codecademy (Partially), New York Times (Partially), Yahoo Mail (Completely), Dropbox's new photo and video gallery app Carousel (Completely) are the popular websites known to be using React. +1. React involves composition: lots of components wrapping up the functionalities into an encapsulated container. +Many popular websites use React implementing the Model-View-Controller (MVC) architectural pattern. Facebook (partially), Instagram (completely), Khan Academy (partially), Codecademy (partially), New York Times (partially), Yahoo Mail (completely), Dropbox's new photo and video gallery app carousel (completely) are some popular examples using React. How are these large applications built using React? The simple answer is by building small applications or components. Example: @@ -47,10 +45,10 @@ ReactDOM.render( ); ``` -2. React is Declarative for the most part, meaning we are concerned more with What to do, rather than How to do, a specific task. Declarative programming is a paradigm that expresses the logic of a computation without describing its control flow. -This comes with certain advantages such as reduced side effects (such as when we modify any state or mutating something or making an API request), minimizing mutability (mostly abstracted), enhanced readability, and fewer bugs. +2. React is declarative. For the most part, we are concerned more with *What to do* rather than *How to do* a specific task. Declarative programming is a programming paradigm that expresses the logic of a computation without describing its control flow. +Declarative programming comes with advantages, such as reduced side effects (occurs when we modify any state, mutating something or making an API request), minimizing mutability (mostly abstracted), enhanced readability and less bugs. -3. Unidirectional dataflow. Data flows only from the state to the User Interface, and not the other way around. UI in React is actually the function of the state, so as the state updates, the UI updates with it. So our UI progresses as the state changes. +3. Unidirectional dataflow. UI in React is actually the function of the state, which means that as the state updates, it updates the UI as well. So our UI progresses as the state changes. ## Advantages of React @@ -69,16 +67,16 @@ React uses the virtual DOM to render an HTML tree virtually first. Then, every t ### Reconciliation -React has a smart diffing algorithm that it uses to only regenerate in its DOM node what actually needs to be regenerated while it keeps everything else as is. This diffing process is possible because of React’s virtual DOM. +React has a smart diffing algorithm that it uses to only regenerate in its DOM node that needs to be regenerated, while it keeps everything else as is. This diffing process is possible because of React’s virtual DOM. Using the virtual DOM, React keeps the last DOM version in memory and when it has a new DOM version to take to the browser, that new DOM version will also be in memory, so React can compute the difference between the new and the old versions. -React will then instruct the browser to update only the computed diff and not the whole DOM node. No matter how many times we regenerate our interface, React will take to the browser only the new “partial” updates. +React will then instruct the browser to update only the computed diff and not the whole DOM node. No matter how many times we regenerate our UI, React will take to the browser only the new “partial” updates. ## React from Scratch Would you like to get started learning the basics of React without getting bogged down creating a development environment? -Chances are that if you are new to web development that setting up a development environment can leave you feeling a little intimidated when you are just trying to learn React or just learn about React for the first time. +Chances are that if you are new to web development, just setting up a development environment can leave you feeling a little intimidated. In this article we are going to look at how we can get started with React using only a text editor and a browser and nothing else. @@ -113,12 +111,12 @@ This will result in the following code: We can fill in the title as “Time to React!”. -This content will not appear in your webpage. Anything in the head section of the HTML file will be metadata that our browser will use to interpret our code in the body section. This title is going to be what appears on the tab for our page, not actually on the page. +This content will not appear in your webpage. Anything in the head section of the HTML file will be metadata that our browser will user to interpret our code in the body section. This title is going to be what appears on the tab for our page, not actually on the page. ### 2 - Get Script Tags to Harness the Power of React and Babel Libraries -OK, item one is checked off of our list. Let’s look at item two. We are going to set up our developer environment by using script tags to bring in React and Babel. This is not a real-life developer environment. That would be quite an elaborate setup, and leave us with a lot of boiler plate code and libraries that would take us off subject of learning React basics. The goal of this series is to go over the basic syntax of React and get right into coding. -We are going to use `