React היא ספריית JavaScript לבניית ממשקי משתמש. הוא נבחר לאהוב ביותר בקטגוריית "מסגרות, ספריות וטכנולוגיות אחרות" בסקר המפתחים לשנת 2017 של Stack Overflow.

React היא ספריית JavaScript ויישומי React הבנויים עליה פועלים בדפדפן, לא בשרת. יישומים מסוג זה מתקשרים רק עם השרת במידת הצורך, מה שהופך אותם למהירים מאוד בהשוואה לאתרים מסורתיים שמאלצים את המשתמש להמתין לשרת שיעבד מחדש דפים שלמים וישלח אותם לדפדפן.

React משמש לבניית ממשקי משתמש - מה שהמשתמש רואה על המסך ומתקשר איתו לשימוש ביישום האינטרנט שלך. ממשק זה מחולק לרכיבים, במקום שיהיה דף ענק אחד אתה מפרק אותו לחלקים קטנים יותר המכונים רכיבים. במונחים כלליים יותר, גישה זו נקראת Modularity.

• זה הצהרתי: React משתמש בפרדיגמה הצהרתית שמקלה על ההיגיון לגבי היישום שלך.
• זה יעיל: React מחשב את מערך השינויים המינימלי הדרוש כדי לעדכן את ה- DOM שלך.
• וזה גמיש: React עובד עם הספריות והמסגרות שאתה כבר מכיר.

המדריכים הטובים ביותר ללימוד תגובה

ל- freeCodeCamp יש הדרכת תגובה ב- YouTube שתלמד את כל היסודות תוך חמש שעות בלבד.

יש לנו גם מדריך ביניים מעמיק יותר של React המלמד אותך כיצד לבנות אפליקציית React של מדיה חברתית שלמה באמצעות Firebase. אורכו של 12 שעות, ואם אתה עוקב אחר כך תלמד המון המורכבויות של תגובה.

למה ללמוד להגיב?

התגובה כוללת קומפוזיציה, כלומר הרבה רכיבים העוטפים את הפונקציות למיכל מכוסה.

אתרים פופולריים רבים משתמשים ב- React בהטמעת הדפוס האדריכלי של MVC. פייסבוק (באופן חלקי), אינסטגרם (באופן מלא), חאן אקדמיה (באופן חלקי), ניו יורק טיימס (באופן חלקי), יאהו מייל (לחלוטין), אפליקציית גלריית התמונות והווידיאו החדשה של דרופבוקס קרוסלה (לחלוטין) הם האתרים הפופולריים הידועים כמשתמשים ב- React.

כיצד נבנים יישומים גדולים אלה באמצעות React? התשובה הפשוטה היא על ידי בניית יישומים או רכיבים קטנים. דוגמא:

const Component2 = () => { return ( ); }; const Component3 = () => { return ( ); }; const Component1 = () => { return ( ); }; ReactDOM.render( , document.getElementById("app") );

תגובה היא הצהרתית, לרוב, מה שאומר שאנו עוסקים יותר במה לעשות ולא כיצד לבצע משימה ספציפית.

תכנות הצהרתי הוא פרדיגמת תכנות המבטאת את ההיגיון של חישוב מבלי לתאר את זרימת השליטה בו. לתכנות הצהרתית יתרונות מסוימים כמו תופעות לוואי מופחתות (מתרחשות כאשר אנו משנים כל מדינה או משתנים משהו או מגישים בקשה ל- API), מוטציות משתנות ממוזערות (מכיוון שרבים מהם מופשטים), קריאות משופרת ופחות באגים.

לתגובה יש גם זרימת נתונים חד כיוונית. ממשק המשתמש ב- React הוא למעשה תפקידה של המדינה. המשמעות היא שכשהמדינה מעדכנת היא מעדכנת גם את ממשק המשתמש. אז ממשק המשתמש שלנו מתקדם ככל שהמדינה משתנה.

יתרונות התגובה

כמה סיבות להשתמש ב- React הן:

1. מָהִיר. יישומים המיוצרים ב- React יכולים להתמודד עם עדכונים מורכבים ועדיין להרגיש מהירים ומגיבים.
2. מודולרי. במקום לכתוב קבצי קוד גדולים וצפופים, אתה יכול לכתוב הרבה קבצים קטנים יותר וניתנים לשימוש חוזר. המודולריות של React יכולה להיות פיתרון יפה לבעיות התחזוקה של JavaScript.
3. ניתן להרחבה. תוכניות גדולות המציגות נתונים משתנים רבים הינן במקום בו תגובה מגיבה בצורה הטובה ביותר.
4. גָמִישׁ. אתה יכול להשתמש ב- React לפרויקטים מעניינים שאין להם שום קשר לייצור אפליקציית אינטרנט. אנשים עדיין מבינים את הפוטנציאל של ריאקט. יש מקום לחקור.

DOM וירטואלי

הקסם של React נובע מהפרשנות שלו ל- DOM ומהאסטרטגיה שלו ליצירת ממשקי משתמש.

ריאקט משתמש ב- DOM הווירטואלי כדי לעבד עץ HTML כמעט קודם. ואז, בכל פעם שמשתנה מצב ואנחנו מקבלים עץ HTML חדש שצריך לקחת ל- DOM של הדפדפן, במקום לכתוב את כל העץ החדש React רק יכתוב את ההבדל בין העץ החדש לעץ הקודם (מכיוון של- React יש עצים לזכרם). תהליך זה ידוע בשם פיוס עץ.

פִּיוּס

ל- React יש אלגוריתם שונה וחכם שמשתמש בו כדי לחדש רק בצומת ה- DOM את מה שצריך להתחדש בפועל בזמן שהוא שומר על כל השאר כמו שהוא. תהליך שונה זה אפשרי בגלל ה- DOM הווירטואלי של React.

באמצעות ה- DOM הווירטואלי, React שומר את גרסת ה- DOM האחרונה בזכרון. כאשר יש לו גרסת DOM חדשה לקחת לדפדפן, גרסת DOM חדשה זו תהיה גם בזיכרון, כך ש- React יכול לחשב את ההבדל בין הגרסה החדשה לגרסה הישנה.

לאחר מכן תגיב React לדפדפן לעדכן רק את ההבדל המחושב ולא את כל צומת ה- DOM. לא משנה כמה פעמים נחדש את הממשק שלנו, תגיב יעביר לדפדפן רק את העדכונים ה"חלקיים "החדשים.

להגיב מ- Scratch

האם ברצונך להתחיל ללמוד את יסודות התגובה מבלי להסתבך ביצירת סביבת פיתוח? רוב הסיכויים הם שאם אתה חדש בפיתוח אתרים, הגדרת סביבת פיתוח יכולה להשאיר אותך מרגיש קצת מאוים כשאתה רק מנסה ללמוד להגיב.

במאמר זה אנו נבחן כיצד אנו יכולים להתחיל לעבוד עם תגובה באמצעות עורך טקסט בלבד ודפדפן ותו לא.

1 - הגדר קוד צלחת דוד עם Emmet

נתחיל משלב 1. נתחיל בקובץ בדפדפן שלנו שנקרא "index.html". נתחיל בקוד ה- HTML של צלחת הדוד. להתחלה מהירה אני ממליץ להשתמש ב- Emmet עם כל עורך הטקסטים שיש לך. בשורה הראשונה, הקלד html:5ואז לחץ על מקש shift כדי לקבל את הקוד למטה. לחלופין, תוכל להמשיך ולהעתיק ולהדביק את הקוד מלמטה.

html:5

זה יביא לקוד הבא:

      Document    

אנו יכולים למלא את הכותרת "זמן להגיב!".

תוכן זה לא יופיע בדף האינטרנט שלך. כל דבר בחלק הראש של קובץ ה- HTML יהיה מטא נתונים שהדפדפן שלנו ישתמש בו כדי לפרש את הקוד שלנו בגוף. כותרת זו הולכת להיות מה שמופיע בכרטיסייה בעמוד שלנו, ולא בעצם בדף.

2 - קבל תגי סקריפט כדי לנצל את כוחן של ספריות התגובה והבבל

בסדר, פריט אחד מסומן מחוץ לרשימה שלנו. בואו נסתכל על פריט שני. אנו מתכוונים להגדיר את סביבת המפתחים שלנו באמצעות תגי סקריפט כדי להביא את React ו- Babel.

זו לא סביבת מפתח אמיתית. זו תהיה תוכנית מורכבת למדי. זה גם ישאיר אותנו עם הרבה קוד צלחות דוד וספריות שיורידו אותנו מלימוד יסודות התגובה. המטרה של סדרה זו היא לעבור על התחביר הבסיסי של React ולהיכנס ישר לקידוד. אנו נשתמש בתגיות כדי להביא את ספריית React, ספריית DOM React (מדוע) וספריית Babel.

 ...       ... Time to React! 

אתה רשאי להשתמש בגרסאות מעודכנות יותר של ספריות אלה עם צאתן. הם לא צריכים ליצור שינויים שבורים לתוכן שאנו מכסים.

What are we doing here? The HTML element is used to embed or reference an executable script. The “src” attribute points to the external script files for the React library, ReactDOM library and Babel library.

This is like if you have an electric razor. It is literally no good to you no matter how fancy the electric razor unless you can plug it into the wall and gain access to electricity. Our React code we will write will be no good to us if our browser can’t plug into these libraries to understand and interpret what we are going.

This is how our application is going to gain the power of React, it is going to be how we insert React into the Dom. We have React and ReactDOM as two different libraries because there are use cases such as React Native where rendering to the DOM isn’t needed for mobile development so the library was split so people could decide what they needed depending on the project they were working on.

Because we will need our React to make it to the DOM we’ll use both scripts. Babel is how we take advantage of ECMA script beyond ES5 and deal with something called JSX (JavaScript as XML) that we will use in React. We’ll take a deeper look at the magic of Babel in an upcoming section :)

Alright, we have completed steps 1 and 2. We have set up our boiler plate code and set up our developer environment.

3 - Render React to the DOM

Our next two steps will be to choose our location within the DOM that we want to render our React content. And we'll use another script tag for our React content within the body. Generally, as a good separations of concerns practice, this would be in its own file then linked to this html document. We’ll do that later in upcoming sections. For now, we’ll let this dwell within the body of the html document we are currently in.

Now we are going to look at how simple it is to choose a place on the DOM to render our React content. We’ll go within the body. And best practice isn’t just to throw React into the body tag to be displayed but to create a separate element, often a div, that you can treat as a root element to insert your React content.

 React has not rendered yet 

We’ll create a simple element and give it an id of “app”. We are going to be able to target this location to insert our React content much the same way you might use CSS to target an id for styling of your choice. Any react content will be rendered within the div tags with the id of app. In the meantime we’ll leave some text saying that “React has not rendered yet”. If we see this when we preview our page it means that somewhere we missed rendering React.

Now, let’s go ahead and create a script tag within our body where we will create with React for the first time. The syntax we are going to need for our script tag is to add an attribute of “type”. This specifies the media type of the script. Above in our head we used an src attribute that pointed to the external script files for the React library, ReactDOM library and Babel library.

 React has not rendered yet 

The “type” of script that we are using will be wrapped in quotes and set to "text/babel". We’ll need the ability to use babel right away as we work with JSX.

First, we are going to render React to the DOM. We will use the ReactDOM.render() method to do this. This will be a method, and remember a method is just a function attached to an object. This method will take two arguments.

 React has not rendered yet ReactDOM.render(React What, React Where);  

The first argument is the “what” of React. The second argument is the “where” of the location you want it to be placed in the DOM. Let’s start by calling our ReactDOM.render() method. Our first argument is going to be our JSX.

 React has not rendered yet ReactDOM.render( 
Hello World
, React Where );  

The official react docs state: “This funny tag syntax is neither a string nor HTML. It is called JSX, and it is a syntax extension to JavaScript. We recommend using it with React to describe what the UI should look like. JSX may remind you of a template language, but it comes with the full power of JavaScript. JSX produces React “elements.”

Often times, JSX freaks people out who have been developers for a while because it looks like HTML. At a very early age developers are taught separation of concerns. HTML has its place, CSS has its place and JavaScript has its place. JSX seems to blur the lines. You are using what looks like HTML but as Facebook says it comes with the full power of JavaScript.

This can freak out veterans, so many React tutorials start without JSX which can be quite complex. We won’t do that. Because this article is directed towards those who are very young in their careers you may not bring those red flags when you see this syntax.

And JSX is just really intuitive. You can probably quite easily read this code and see that this is going to be the largest header tag displaying the text “Hello World”. No mystery and pretty straightforward. Now, let’s look at what our second argument would be.

 React has not rendered yet ReactDOM.render( 
Hello World
, document.getElementById("app") );  

This is where we want our React content rendered to the DOM. You’ve probably done this quite a few times in the past. We’ll just type in document.getElementById(). And we’ll pass into the argument of the id of app. And that is it. We will now target the div with the id of app to insert our React content.

We want to make sure our content is saved. Go ahead and open this up in the browser and you should see “Hello World”. As you can probably guess, using React is not the quickest or best way to create a Hello World app. We aren’t quite seeing the benefits of it yet. But now, we know that everything is working.

Go ahead and open up the console and look at the “elements”. You can do that on a Mac with command + shift + j or on Windows and Linux: Ctrl + Shift + J

If you click on the head tag, we can see our script libraries we included. Then we can go down to the body of our document. Let’s click on our div with the id of “app”. And when we do we see our

tag with the content “Hello World”.

View Entire Code Here.

Recap

So let’s do a quick recap. In our head tag we grabbed the script tags for React, ReactDOM and Babel. These are the tools our browser needs in its meta data to read our React code and JSX in specific.

We then located the position within the DOM that we wanted to insert our React by creating an element div with the id of “app”.

Next, we created a script tag to input our React code. We used the ReactDOM.render() method that takes two arguments. The “what” of the React content, in this case our JSX, and the second argument is the “where” that you want to insert the React content into the DOM. In this case it is the location with the id of “app”.

As an alternative to JSX, you can use ES6 and Javascript’s compiler like Babel. //babeljs.io/

Installing React

Creating a new React project

You could just embed the React library in your webpage like so2:

Smart programmers want to take the more practical and productive way: Create React App

npm install -g create-react-app create-react-app my-app cd my-app npm start

This will set up your development environment so that you can use the latest JavaScript features, provide a nice developer experience, and optimize your app for production.

npm start will start up a development server which allows live reloading3.

After you finish your project and are ready to deploy your App to production, you can just use npm run build to create an optimized build of your app in the build folder.

Your first React App

Installation

As specified in the previous section (Installation), run the Create React App tool. After everything has finished, cd into the folder of your application and run npm start. This will start a development server and you are all set to start developing your app!

npm install -g react-create-app create-react-app my-first-app cd my-first-app npm start

Editing the code

Start up your editor or IDE of choice and edit the App.js file in the src folder. When created with the react-create-app tool, there will already be some code in this file.

The code will consist of these parts:

imports

import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css';

This is used by webpack to import all required modules so that your code can use them. This code imports 3 modules:

1. React and Component, which allow us to use React as it should be used. (With components)
2. logo, which allows us to use logo.svg in this file.
3. ./App.css, which imports the stylesheet for this file.

classes/components

class App extends Component { render() { return ( 
Welcome to React
 To get started, edit src/App.js and save to reload. 
 ); } }

React is a library that makes use of Components, which let you split up your UI into independent, reusable pieces, and think about each piece in isolation. There is already 1 component created, the App component. If you used the create-react-app tool, this component is the main component in the project and you should build around this central class.

We will look at components in more detail shortly.

exports

When creating a class in React, you should export them after declaration, which allows you to use the component in another file by using the import keyword. You can use default after the export keyword to tell React that this is the main class of this file.

export default App;

View the results!

When you’ve started the development server by issuing the npm start command, you can view the changes you add to your project live in your browser. After issuing the command, npm should open a browser automatically displaying your app.

React - Components

Components are reusable in React. You can inject value into props as given below:

function Welcome(props) { return 
Hello, {props.name}
; } const element = ; ReactDOM.render( element, document.getElementById('root') );

name="Faisal Arkan" will give value into {props.name} from the  function Welcome(props) and will return the component that has given value by name="Faisal Arkan". After that react will render the element into HTML.

Other ways to declare components

There are many ways to declare components when using React. There are two kinds of components, stateless components and stateful components.

Stateful

Class Type Components

class Cat extends React.Component { constructor(props) { super(props); this.state = { humor: 'happy' } } render() { return( 
{this.props.name}
 {this.props.color} 
 ); } }

Stateless Components

Functional Components (Arrow Function from ES6)

const Cat = props => { return ( 
{props.name}
{props.color}
 ; ); };

Implicit Return Components

const Cat = props =>
{props.name}
{props.color}
 ;