React js For Beginners Learning React js Library From Scratch, 1st Edition (Emma William) (Z-Library)

📄 File Format: PDF

💾 File Size: 608.7 KB

📖 Read Online ⬇️ Download

Registered users can read the full content for free

Register as a Gaohf Library member to read the complete e-book online for free and enjoy a better reading experience.

📄 Page 1

(This page has no text content)

📄 Page 2

React js For Beginners Learning React js Library From Scratch               2020             By Emma William                   *    

📄 Page 3

                                  " Programming isn't about what you know; it's about what you can figure out . ”  - Chris Pine                

📄 Page 4

                    Before you begin, please note that this is a beginner-friendly guide that covers the concepts I classify as fundamentals for working with React. It is not a complete guide to React but rather a complete introduction. At the end of this guide, I list a few next-level resources for you. This guide will pave the way for you to understand them.                                    

📄 Page 5

                .         Memlnc.com         *                          

📄 Page 6

              INTRODUCTION______________________________________________11 WHAT IS REACT?..........................................................................................11 VIRTUAL DOM PERFORMANCE....................................................................13 TERMINOLOGY IN REACT.............................................................................15 SINGLE-PAGE APP..................................................................,......................15 BANKS..........................................................................................................16 BUNDLERS....................................................................................................17 PACKAGE MANAGER....................................................................................17 CONTENT DISTRIBUTION NETWORK............................................................17 ELEMENTS....................................................................................................18 THE INGREDIENTS........................................................................................19 CHARACTERISTICS..............................................,,,,,,,,,,,,,,,,,,,,,,,,,,,,,..............20 PROPS.CHILDREN.........................................................................................21 CASE.............................................................................................................22 LIFE CYCLE DEPENDENCIES...........................................................................23 ADJUSTED AND UNCONFIGURED COMPONENTS........................................24 KEYS..............................................................................................................24 REFERENCES ..........................................................................................25 EVENTS.........................................................................................................26 MATCHING...................................................................................................26 REACTJS - OVERVIEW...................................................................................28 REACT PROPERTIES......................................................................................29 ADVANTAGES OF THE REACT.............................................................30 REACT LIMITS.....................................................................................30

📄 Page 7

INSTALL REACTJS USING WEBPACK AND BABEL.............................,...31 STEP 1: CREATE THE ROOT FOLDER....................................................31 STEP 2 - INSTALL REACT AND REACT DOM.........................................33 STEP 3 - INSTALL THE WEB PACKAGE.................................................34 STEP 4 - INSTALL BABYLON..................................................................35 STEP 5 - CREATE FILES.........................................................................36 STEP 6 - ASSIGN A TRANSLATOR, SERVER, AND LOADER....................36 STEP 7 - INDEX.HTML..........................................................................39 STEP 8: APP.JSX AND MAIN.JS.............................................................40 STEP 9: RUN THE SERVER....................................................................42 STEP 10 - CREATE THE PACKAGE.........................................................43 USE THE CREATE-RESPONSE-APP COMMAND....................................44 STEP 1..................................................................................................45 STEP 2..................................................................................................45 STEP 3..................................................................................................46 STEP 4..................................................................................................46   REACTJS - JSX____________________________________________47 USING JSX............................................................................................48 NESTED ELEMENTS..............................................................................49 FEATURES.............................................................................................51 JAVASCRIPT EXPRESSIONS.............................................................52 ELEGANCE  REACT..........................................................................54 COMMENTS....................................................................................56   CHAPTER II_____________________________________________58 REACTJS - COMPONENTS..............................................................58 AN EXAMPLE WITH THE CASE.......................................................60   CHAPTER III____________________________________________65 REACTJS - VALIDATE EXTENSIONS...............................................65

📄 Page 8

CHECK THE ACCESSORIES............................................................66   CHAPTER IV___________________________________________71 COMPONENT API........................................................................71 SET THE STATUS..........................................................................71 FORCE UPDATE...........................................................................74 LOOK FOR THE DOM NODE.........................................................75   CHAPTER V___________________________________________78 COMPONENT LIFE CYCLE...........................................................78 LIFE CYCLE METHODS................................................................78 CONVERTS THE FUNCTION TO A CLASS.....................................86 ADD LIFE CYCLE DEPENDENCIES TO THE CLASS.........................92 USE THE CASE CORRECTLY..............................................................99 REACT INCORPORATES STATUS UPDATES.....................................101 DATA FLOWS TO LOWER LEVELS...................................................103 CONDITIONAL RENDERING IN REACT............................................106   ITEM VARIABLES_____________________________________109 CLAUSE IF INLINE WITH LOGICAL OPERATOR &&........................112 IN-LINE IF-ELSE CLAUSE WITH CONDITIONAL OPERAND…………...114 PREVENT COMPONENT FROM RENDERING.................................116   CHAPTER VI__________________________________________119 FORMS.............................................................................................119 EXAMPLE.........................................................................................122 CHAPTER VII....................................................................................126 FIELDS IN REACT..............................................................................126 CONTROL INGREDIENTS...................................................................127 THE TEXTAREA ELEMENT.................................................................131 SELECT..............................................................................................134

📄 Page 9

FILE INPUT ELEMENT........................................................................137 HANDLING MULTIPLE ENTRIES........................................................137 JUSTIFIED ENTRIES WITH NULL VALUE.............................................141 ALTERNATIVES TO CONTROLLED INGREDIENTS...............................142       Introduction   Facebook's React has changed the way we think about web applications and user interface development. Due to its design, you can use it beyond web. A feature known as the Virtual DOM enables this.   In this chapter we'll go through some of the basic ideas behind the library so you understand React a little better before moving on.   What is React?   React is a JavaScript library that forces you to think in terms of components. This model of thinking fits user interfaces well. Depending on your background it might feel alien at first. You will have to think very carefully about the concept of state and where it belongs.   Because state management is a difficult problem, a variety of solutions have appeared. In this book, we'll start by managing state ourselves and then push it to a Flux implementation known as Alt. There are also implementations available for several other alternatives, such as Redux, MobX, and Cerebral.  

📄 Page 10

React is pragmatic in the sense that it contains a set of escape hatches. If the React model doesn't work for you, it is still possible to revert back to something lower level. For instance, there are hooks that can be used to wrap older logic that relies on the DOM. This breaks the abstraction and ties your code to a specific environment, but sometimes that's the pragmatic thing to do.       One of the fundamental problems of programming is how to deal with state. Suppose you are developing a user interface and want to show the same data in multiple places. How do you make sure the data is consistent? Historically we have mixed the concerns of the DOM and state and tried to manage it there. React solves this problem in a different way. It introduced the concept of the Virtual DOM to the masses. Virtual DOM exists on top of the actual DOM, or some other render target. It solves the state manipulation problem in its own way. Whenever changes are made to it, it figures out the best way to batch the changes to the underlying DOM structure. It is able to propagate changes across its virtual tree as in the image above.   Virtual DOM Performance Handling the DOM manipulation this way can lead to increased performance. Manipulating the DOM by hand tends to be inefficient and is hard to optimize. By leaving the problem of DOM manipulation to a good implementation, you can save a lot of time and effort. React allows you to tune performance further by implementing hooks to adjust the way the virtual tree is updated. Though this is often an optional step. The biggest cost of Virtual DOM is that the implementation makes React quite big. You can expect the bundle sizes of small applications to be

📄 Page 11

around 150-200 kB minified, React included. gzipping will help, but it's still big.               React facilitates the creation of interactive user interfaces. Just design views for each status in your app, and React will efficiently update and synthesize the right components when your data changes.   React relies primarily on the concept of components. You have to build packaged components that manage their own state, and then install these components together to create complex user interfaces. Since component logic is written using JavaScript instead of template mode, you can easily pass a lot of data through your application and keep the state away from DOM.   React is based on the principle of “learning once and writing anywhere”. You don't assume you are dealing with a specific technology, but you can develop new features without rewriting a new code. React can be rendered on the server using Node.js, and mobile applications can be created via React Native.          

📄 Page 12

                Terminology in React   Single-page app   Single-page Application is an application that loads a single HTML page and all the necessary extensions (such as CSS and JavaScript) required for the application to work. No interactions with the page or subsequent pages require a return to the server again, which means that the page is not reloaded.   Although you can build a single-page application in React, it is not necessary. React can also be used to optimize small portions of the site with greater interactivity. A code written using React can co-exist with the format on the server using PHP or any other server-side libraries. In fact, this is exactly how to use React on Facebook. ES6, ES2015, ES2016, etc ..   These abbreviations refer to the latest versions of the ECMAScript standard, for which JavaScript is implemented. ES6 (also called ES2015) includes many additions to earlier versions such as arrow functions, classes, literal templates, and let and const statements. You can learn more about the specific versions here.   Banks

📄 Page 13

  The JavaScript sink takes JavaScript code, converts it, and returns JavaScript in another format. The most common use case is to take the ES6 wording and convert it to an older wording so that older browsers can interpret it. The most frequently used banker with React is Babel.   Bundlers   Packers take CSS and JavaScript code written as separate modules (usually hundreds), and group them together in a few performance-optimized files for browsers. One of the most commonly used packages in React applications is Webpack and Browserify.   Package Manager   Package Manager is a tool that allows you to manage the credits in your project. The two most commonly used packet managers in React are npm and Yarn, both of which are the interface of the same npm packet recorder.   Content Distribution Network   CDN stands for Content Delivery Network. These networks distribute static and cached content from a network of servers around the world. JSX   JSX is an extended formatting to JavaScript, which is similar to template language but has the full power of JavaScript. JSX behaves into calls to the React.createElement () function, which returns abstract JavaScript objects called React elements. For an introduction to JSX see here, and for more detailed information about JSX see here.

📄 Page 14

React DOM uses the camelCase naming convention instead of the HTML property names. For example, the tabindex property becomes tabIndex in JSX. The class property is also written as className because class is a reserved word in JavaScript:   const name = 'Clementine'; ReactDOM.render (   <h1 className = "hello"> My name is {name}! </h1>,   document.getElementById ('root') );   Elements   React elements are modules for building React applications. One might confuse elements with a more common concept of components. The item describes what you want to see on the screen, and the React elements are not editable:   const element = <h1> Hello world </h1>;   Items are not usually used directly, but are returned from components.   the ingredients React components are small, reusable pieces of code that return the React elements to be rendered on the page. The simplest form of the React component is an abstract JavaScript function that returns the React element:   function Welcome (props) {

📄 Page 15

  return <h1> Hi {props.name} </h1>; }   Components of ES6 varieties may also be:   class Welcome extends React.Component {   render () {     return <h1> Hi {this.props.name} </h1>;   } }   Components can be divided into functionally independent parts that can be used among other components. Components can return other components, arrays, text strings, and numbers. The rule here is that if part of your user interface is used multiple times (such as buttons, control panel and avatar), or if it is complex (application, comment), it is a good candidate to be a reusable component. Component names must always begin with a capital letter (<Wrapper />, not <wrapper />). .   Characteristics   Props are inputs into the React components, that is, data passed to the lower level of the parent component to the son component. Remember that the properties are read-only and should not be modified in any way:   // Error! props.number = 42;

📄 Page 16

  If you need to modify some values in response to user input or responses from the network, use the state instead.     props.children Props.children is available in each component and contains content between the opening tag and the closing tag of the component, for example:   <Welcome> Hello world! </Welcome>   The text string is "Hello world!" Available under props.children in the Welcome component:   function Welcome (props) {   return <p> {props.children} </p>; }   For components defined as classes, use this.props.children:   class Welcome extends React.Component {   render () {     return <p> {this.props.children} </p>;   } }    

📄 Page 17

      Case   The component needs state when some of the data associated with it changes over time. For example, the Checkbox component needs to have isChecked in its state, and the NewsFeed component needs to track all fetchedPosts in its state.   The biggest difference between the state and the properties is that the properties are passed from the parent component, and the state is managed by the component itself. The component cannot change its properties but can change its status. To do this he must call the child this.setState (). Only components defined as classes can have a status.   For each specific piece of variable data, there must be one component that it owns in its state. Don't try to sync statuses to two different components, instead elevate the status to their nearest shared parent and pass it to lower levels as attributes for both.     Life cycle dependencies   Lifecycle dependencies are a custom function performed during different phases of component life. Dependents are available when the component is created and inserted into the DOM, when the component is updated, and when the component is removed or removed from the DOM.    

📄 Page 18

Adjusted and unconfigured components   React has two different methods when working with input fields.   The input field element whose value is set by React is called the justified component. When the user enters the data into the configured component, a change event handler is fired and your code determines whether the entries are valid (by rendering with the updated value). If you do not reset, the input field element remains unchanged.   The unset component works the same way as field items outside React. When a user enters data into an input field (such as an input field box or a drop-down list), the new information is reversed without React having to do anything. This means that you cannot force fields to have specific values.   In most cases you should use the configured component.   Keys   A key is a attribute and a text string that you need to include when creating elements from arrays. The React keys help identify elements that have been changed, added, or removed. Keys must be given to the elements inside an array to give the elements a stable identity.   Keys must be unique only within sibling elements of the same matrix; they should not be unique throughout the application or even in a single component.   Don't pass something like Math.random () to the keys. It is important that the keys have stable identities during rendering so that React can determine

📄 Page 19

when to add, remove, or rearrange items. Keys must match stable and unique identifiers coming from your data, such as post.id.   References   React supports a unique feature that you can link to any component. The ref property can be a component arising from the React.createRef () function, a callback function, or a text string (in the old API). When the ref property is a call function, the function will receive the corresponding DOM element or a copy of the class (depending on the type of element) as its argument. This allows direct access to the DOM element or component instance.   Use references with caution. If you find yourself using it a lot to do things in your app, consider whether you can adapt to top-down data flow.     Events   Event handling in React elements has some wording differences:       React event handlers are called camelCase instead of lowercase letters.     In JSX, it passes the function as an event handler instead of passing a text string.   Matching   When the status or properties of the component change, React determines whether a DOM update is necessary by comparing the newly restored element with the previous creator. When they are not equal, React updates the DOM model. This process is called reconciliation.

📄 Page 20

                          .                     ReactJS - Overview