Создание анимированных приложений React с помощью React Spring Javascript


Оглавление (нажмите, чтобы открыть):

1.3 Создать новое React приложение

Используйте интегрированный набор инструментов для повышения удобства пользователя и разработчика.

В данном разделе описаны несколько популярных наборов инструментов React, которые помогают в таких задачах, как:

Масштабирование множества файлов и компонентов.

Использование сторонних библиотек из npm.

Раннее обнаружение распространенных ошибок.

Отслеживаемое редактирование CSS и JS в режиме разработки.

Оптимизация кода для релиза.

Рекомендуемые в данном разделе наборы инструментов не требуют настройки для начала работы.

1.3.1 Возможно вам не нужен набор инструментов

Если вы не испытываете проблем, описанных выше, или пока не чувствуете себя комфортно, используя инструменты JavaScript, рассмотрите возможность добавления React в виде простого тега

Creating Animations Using React Spring

Easily manage projects with monday.com

Have you ever needed animation in your React application? Traditionally, implementing animation has not an easy feat to accomplish. But now, thanks to Paul Henschel, we there’s a new React tool just for that. react-spring inherits from animated and react-motion for interpolations, optimized performance, and a clean API.

In this tutorial, we will be looking at two of the five hooks included in react-spring, specifically useSpring and useTrail. The examples we’ll implement make use of both APIs.

If you want to follow along, install react-spring to kick things off:

Spring

The Spring prop can be used for moving data from one state to another. We are provided with a from and to prop to help us define the animation’s starting and ending states. The from prop determines the initial state of the data during render, while we use to in stating where it should to be after the animation completes.

In the first example, we will make use of the render prop version of creating spring animation.

See the Pen
react spring 1 by Kingsley Silas Chijioke (@kinsomicrote)
on CodePen.

On initial render, we want to hide a box, and slide it down to the center of the page when a button is clicked. It’s possible to do this without making use of react-spring, of course, but we want to animate the entrance of the box in to view and only when the button is clicked.

Most of the code is basic React that you might already be used to seeing. We make use of react-spring in the section where we want to conditionally render the content after the value of content has been changed to true . In this example, we want the content to slide in from the top to the center of the page, so we make use of marginTop and set it to a value of -1000 to position it offscreen, then define an opacity of 0 as our values for the from prop. This means the box will initially come from the top of the page and be invisible.

Clicking the button after the component renders updates the state of the component and causes the content to slide down from the top of the page.

We can also implement the above example using the hooks API. For this, we’ll be making use of the useSpring and animated hooks, alongside React’s built-in hooks.

First, we set up the state for the component. Then we make use of useSpring to set up the animations we need. When contentStatus is true , we want the values of marginTop and opacity to be 0 and 1 , respectively. Else, they should be -1000 and 0 . These values are assigned to contentProps which we then pass as props to animated.div .

When the value of contentStatus changes, as a result of clicking the button, the values of opacity and marginTop changes alongside. This cause the content to slide down.

See the Pen
react spring 2 by Kingsley Silas Chijioke (@kinsomicrote)
on CodePen.

Trail

The Trail prop animates a list of items. The animation is applied to the first item, then the siblings follow suit. To see how that works out, we’ll build a component that makes a GET request to fetch a list of users, then we will animate how they render. Like we did with Spring, we’ll see how to do this using both the render props and hooks API separately.

First, the render props.

But since we want to animate the list, we have to pass the items as props to the Trail component:

Now our list of users slides in with a subtle animation:

The hooks API gives us access to useTrail hook. Since we are not making use of a class component, we can make use of the useEffect hook (which is similar to componentDidMount and componentDidUpdate lifecycle methods) to fetch the users when the component mounts.

We have the initial state of users set to an empty array. Using useEffect , we fetch the users from the API and set a new state using the setUsers method we created with help from the useState hook.

Using the useTrail hook, we create the animated style passing it values for from and to , and we also pass in the length of the items we want to animate. In the part where we want to render the list of users, we return the array containing the animated props.

Go, spring into action!

Now you have a new and relatively easy way to work with animations in React. Try animating different aspects of your application where you see the need. Of course, be mindful of user preferences when it comes to animations because they can be detrimental to accessibility.

While you’re at it, ensure you check out the official website of react-spring because there are tons of demo to get your creative juices flowing with animation ideas.

React JS + WordPress. Cоздания блога в приложении на React JS

В современной разработке сложных веб-проектов часто возникает задача создания блога. Блог обычно необходим для увеличения лояльности среди клиентов и улучшения поисковой выдачи ресурса за счет качественного контента. Для наилучшего UX результата блог должен быть частью веб-ресурса и не отличатся дизайном от основного ресурса.

Достичь такого результат зачастую непросто. Одним из вариантов может быть создания темы для популярной CMS (WordPress, Joomla, др.), которая бы повторяла основные элементы дизайна и задание перекрестных ссылок между блогом и основным ресурсом. Негативной стороной данного решения является сложность поддержки. Необходимо не только наполнять блог контентом, а еще и обновлять дизайн и ссылки в случае каких-либо изменений на основном ресурсе.

Вторым вариантом может быть интеграция с CMS по API. Данный вариант позволяет встроить данные блога непосредственно в веб-приложение. Как следствие нет необходимости создавать и поддерживать отдельную тему и навигационную структуру.

В данном примере, мы рассмотрим интеграцию приложения на React JS с WordPress. Для работы с React JS мы воспользуемся Webpack, Babel и Fetch API.

Настройка WordPress

Для работы с WordPress через API необходимо:

— установить и активировать плагин WP REST API

— настроить ЧПУ (permalinks)

Обзор API

Плагин WP Rest API добавляет публичный API для нашего блога на WordPress. Он может расширяться другими плагинами, например для получения данных из плагина Yoast, необходимо установить плагин WP REST API Yoast SEO.

Полная документация плагина доступна по адресу https://wp-api.org/

Основной путь к API /wp-json/wp/v2. Мы для интеграции будем использовать такие ресурсы:

— GET: /wp-json/wp/v2/posts — получение списка статей блога

— GET: /wp-json/wp/v2/posts/:id — получение статьи по id

Выбранные ресурсы являются публичными, поэтому для запросов к ним не требуется никакая аутентификация клиента.

Для работы с API в браузере необходимо совершать AJAX запросы на сторонний домен. В рамках данного урока рекомендуем запустить браузер с отключенными CORS https://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome

Интеграция с React JS

Для примера создадим приложение из 2 страниц: список статей и контент статьи. При нажатии на заголовок статьи будем перенаправлять пользователя на страницу статьи.

Настроим базовый проект на React JS. Для этого нам понадобится Node JS 6+ и npm.

Создадим конфигурацию для webpack.

Webpack — сборщик JS приложений/модулей. Позволяет использовать node js модули в браузере. Активно используется при создании приложений с помощью React JS.

В файл webpack.confg.js необходимо добавить следующее содержание.

Этот файл настраивает вебпак на то, чтобы он:

1. Начинал сборку приложения с файла app.js

2. Результат сборки должен сохраняться в папке ` static`

3. Для всех файлов с расширением `.js` нужно применить babel-loader c настройками es2015, react

Babel — это модуль трансформации JavaScript. Он позволяет использовать в процессе разработки различные вариации синтаксиса JavaScript, а на этапе сборки преобразовывать код в чистый JavaScript.

Создадим app.js и index.html

Для того, чтобы собрать наше приложение запустим команду

React.js and Spring Data REST

This tutorial shows a collection of apps that use Spring Data REST and its powerful backend functionality combined with React’s sophisticated features to build an easy-to-grok UI.

Spring Data REST provides a fast way to build hypermedia-powered repositories.

React is Facebook’s solution to efficient, fast, and easy-to-use views in the land of JavaScript.

Part 1 — Basic Features

Welcome Spring community,

In this section, you will see how to get a bare-bones Spring Data REST application up and running quickly. Then you will build a simple UI on top of it using Facebook’s React.js toolset.

Step 0 — Setting up your environment

Feel free to grab the code from this repository and follow along.

If you want to do it yourself, visit https://start.spring.io and pick these items:

This demo uses Java 8, Maven Project, and the latest stable release of Spring Boot. It also uses React.js coded in ES6. This will give you a clean, empty project. From there, you can add the various files shown explicitly in this section, and/or borrow from the repository listed above.

In the beginning…​

In the beginning there was data. And it was good. But then people wanted to access the data through various means. Over the years, people cobbled together lots of MVC controllers, many using Spring’s powerful REST support. But doing over and over cost a lot of time.

Spring Data REST addresses how simple this problem can be if some assumptions are made:

The developer uses a Spring Data project that supports the repository model.

The system uses well accepted, industry standard protocols, like HTTP verbs, standardized media types, and IANA-approved link names.

Declaring your domain


The cornerstone of any Spring Data REST-based application are the domain objects. For this section, you will build an application to track the employees for a company. Kick that off by creating a data type like this:

@Entity is a JPA annotation that denotes the whole class for storage in a relational table.

@Id and @GeneratedValue are JPA annotations to note the primary key and that is generated automatically when needed.

This entity is used to track employee information. In this case, their name and job description.

Spring Data REST isn’t confined to JPA. It supports many NoSQL data stores, but you won’t be covering those here.

Defining the repository

Another key piece of a Spring Data REST application is to create a corresponding repository definition.

The repository extends Spring Data Commons’ CrudRepository and plugs in the type of the domain object and its primary key

That is all that is needed! In fact, you don’t even have to annotate this if it’s top-level and visible. If you use your IDE and open up CrudRepository , you’ll find a fist full of pre-built methods already defined.

You can define your own repository if you wish. Spring Data REST supports that as well.

Pre-loading the demo

To work with this application, you need to pre-load it with some data like this:

This class is marked with Spring’s @Component annotation so that it is automatically picked up by @SpringBootApplication .

It implements Spring Boot’s CommandLineRunner so that it gets run after all the beans are created and registered.

It uses constructor injection and autowiring to get Spring Data’s automatically created EmployeeRepository .

The run() method is invoked with command line arguments, loading up your data.

One of the biggest, most powerful features of Spring Data is its ability to write JPA queries for you. This not only cuts down on your development time, but also reduces the risk of bugs and errors. Spring Data looks at the name of methods in a repository class and figures out the operation you need including saving, deleting, and finding.

That is how we can write an empty interface and inherit already built save, find, and delete operations.

Adjusting the root URI

By default, Spring Data REST hosts a root collection of links at / . Because you will host a web UI on the same path, you need to change the root URI.

Launching the backend

The last step needed to get a fully operational REST API off the ground is to write a public static void main using Spring Boot:

Assuming the previous class as well as your Maven build file were generated from https://start.spring.io, you can now launch it either by running that main() method inside your IDE, or type ./mvnw spring-boot:run on the command line. (mvnw.bat for Windows users).

Мастер Йода рекомендует:  Тест насколько хорошо вы знаете Python
If you aren’t up-to-date on Spring Boot and how it works, you should consider watch one of Josh Long’s introductory presentations. Did it? Press on!

Touring your REST service

With the app running, you can check things out on the command line using cURL (or any other tool you like).

When you ping the root node, you get back a collection of links wrapped up in a HAL-formatted JSON document.

_links is a the collection of links available.

employees points to an aggregate root for the employee objects defined by the EmployeeRepository interface.

profile is an IANA-standard relation and points to discoverable metadata about the entire service. We’ll explore this in a later section.

You can further dig into this service by navigating the employees link.

At this stage, you are viewing the entire collection of employees.

What’s included along with the data you pre-loaded earlier is a _links attribute with a self link. This is the canonical link for that particular employee. What is canonical? It means free of context. For example, the same user could be fetched through a link like /api/orders/1/processor, in which the employee is assocated with processing a particular order. Here, there is no relationship to other entities.

Links are a critical facet of REST. They provide the power to navigate to related items. It makes it possible for other parties to navigate around your API without having to rewrite things everytime there is a change. Updates in the client is a common problem when the clients hard code paths to resources. Restructuring resources can cause big upheavals in code. If links are used and instead the navigation route is maintained, then it becomes easy and flexible to make such adjustments.

You can decide to view that one employee if you wish.

Little change here, except that there is no need for the _embedded wrapper since there is only domain object.

That’s all well and good, but you are probably itching to create some new entries.

You can also PUT, PATCH, and DELETE as shown in this related guide. But let’s not dig into that. You have already spent way too much time interacting with this REST service manually. Don’t you want to build a slick UI instead?

Setting up a custom UI controller

Spring Boot makes it super simple to stand up a custom web page. First, you need a Spring MVC controller.

@Controller marks this class as a Spring MVC controller.

@RequestMapping flags the index() method to support the / route.

It returns index as the name of the template, which Spring Boot’s autoconfigured view resolver will map to src/main/resources/templates/index.html .

Defining an HTML template

You are using Thymeleaf, although you won’t really use many of its features.

The key part in this template is the

You may also be wondering where that bundle.js file came from. The way it’s built is shown in the next section.

This tutorial doesn’t show main.css , but you can see it linked up above. When it comes to CSS, Spring Boot will server anything found in src/main/resources/static automatically. Put your own main.css file there. It’s not shown in the tutorial, since our focus is on React and Spring Data REST, not CSS3.

Loading JavaScript modules

This section contains the barebones information to get off the JavaScript bits off the ground. While you can install all of JavaScripts command line tools, you don’t have to. At least, not yet. Instead, all you need to add is the following to your pom.xml build file:

This little plugin perform multiple steps:

The install-node-and-npm command will install node.js and its package management tool, npm , into the target folder. (This ensures the binaries are NOT pulled under source control, and can be cleaned out with clean ).

The npm command will execute the npm binary with the provided argument ( install ). This installs modules defined in package.json .

The webpack command will execute webpack binary, which compiles all the JavaScript code based on webpack.config.js .

These steps are run in sequence, essentially installing node.js, downloading JavaScript modules, and building the JS bits.

What modules are installed? JavaScript developers typically use npm to build up a package.json file like the one below:

Key dependencies include:

react.js — toolkit used by this tutorial

rest.js — CujoJS toolkit used to make REST calls

webpack — toolkit used to compile JavaScript components into a single, loadable bundle

babel — write your JavaScript code using ES6 and compile it into ES5 to run in the browser

To build the JavaScript code you’ll poke at further down, you need to define a build file for webpack.

This webpack configuration file does the following:

Defines the entry point as ./src/main/js/app.js . In essence, app.js (a module we’ll write shortly) is the proverbial public static void main() of our JavaScript application. webpack must know this in order to know what to launch when the final bundle is loaded by the browser.

Creates sourcemaps so when debugging JS code in the browser, is able to link back to original source code.

Compile ALL of the JavaScript bits into ./src/main/resources/static/built/bundle.js , which is a JavaScript equivalent to a Spring Boot uber JAR. All your custom code AND the modules pulled in a la require() calls are stuffed into this file.

It hooks into the babel engine, using both es2015 and react presets, in order to compile ES6 React code into a format able to be run in any standard browser.

For more details on how each of these JavaScript tools operates, please read their corresponding reference docs.

Want to see your JavaScript changes automatically? Run npm run-script watch to put webpack into watch mode. It will regenerate bundle.js as you edit the source.

With all that in place, you can focus on the React bits which are fetched after the DOM is loaded. It’s broken down into parts as shown below:

Since you are using webpack to assemble things, go ahead and fetch the modules you need:

React and ReactDOM are the main libraries from Facebook used to build this app.

client is custom code that configures rest.js to include support for HAL, URI Templates, and other things. It also sets the default Accept request header to application/hal+json. You can read the code here.

The code for client is not shown because what you use to make REST calls isn’t important. Feel free to check the source, but the point is, you can plugin Restangular or anything you like, and the concepts still apply.

Diving into React

React is based on defining components. Oftentimes, one component can hold multiple instances of another in a parent-child relationship. It’s easy for this concept to extend several layers.

To start things off, it’s very handy to have a top level container for all components. (This will become more evident as you expand upon the code throughout this series.) Right now, you only have the employee list. But you might need some other related components later on, so let’s start with this:

class Foo extends React.Component <…​>is the method to create a React component.

componentDidMount is the API invoked after React renders a component in the DOM.

render is the API to «draw» the component on the screen.

In React, uppercase is the convention for naming components.

In the App component, an array of employees is fetched from the Spring Data REST backend and stored in this component’s state data.

React components have two types of data: state and properties.

State is data that the component is expected to handle itself. It is also data that can fluctuate and change. To read the state, you use this.state . To update it, you use this.setState() . Every time this.setState() is called, React updates the state, calculates a diff between the previous state and the new state, and injects a set of changes to the DOM on the page. This results a fast and efficient updates to your UI.


The common convention is to initialize state with all your attributes empty in the constructor. Then you lookup data from the server using componentDidMount and populate your attributes. From there on, updates can be driven by user action or other events.

Properties encompass data that is passed into the component. Properties do NOT change but are instead fixed values. To set them, you assign them to attributes when creating a new component as you’ll soon see.

JavaScript doesn’t lock down data structures like other languages. You can try to subvert properties by assigning values, but this doesn’t work with React’s differential engine and should be avoided.

In this code, the function loads data via client , a Promise compliant instance of rest.js. When it is done retrieving from /api/employees , it then invokes the function inside done() and sets the state based on its HAL document ( response.entity._embedded.employees ). You might remember the structure of curl /api/employees earlier and see how it maps onto this structure.

When the state is updated, the render() function is invoked by the framework. The employee state data is included in creation of the React component as an input parameter.

Below is the definition for an EmployeeList .

Using JavaScript’s map function, this.props.employees is transformed from an array of employee records into an array of React components (which you’ll see a little further down).

This shows a new React component (note the uppercase format) being created along with two properties: key and data. These are supplied the values from employee._links.self.href and employee .

Whenever you work with Spring Data REST, the self link IS the key for a given resource. React needs a unique identifer for child nodes, and _links.self.href is perfect.

Finally, you return an HTML table wrapped around the array of employees built with mapping.

This simple layout of state, properties, and HTML shows how React lets you declaritively create a simple and easy-to-understand component.

Does this code contain both HTML and JavaScript? Yes, this is JSX. There is no requirement to use it. React can be written using pure JavaScript, but the JSX syntax is quite terse. Thanks to rapid work on the Babel.js, the transpiler provides both JSX and ES6 support all at once

JSX also includes bits and pieces of ES6. The one used in the code is the arrow function. It avoids creating a nested function() with its own scoped this, and avoids needing a self variable.

Worried about mixing logic with your structure? React’s APIs encourage nice, declarative structure combined with state and properties. Instead of mixing a bunch of unrelated JavaScript and HTML, React encourages building simple components with small bits of related state and properties that work well together. It lets you look at a single component and understand the design. Then they are easy to combine together for bigger structures.

Next, you need to actually define what an is.

This component is very simple. It has a single HTML table row wrapped around the employee’s three properties. The property itself is this.props.employee . Notice how passing in a JavaScript object makes it easy to pass along data fetched from the server?

Because this component doesn’t manage any state nor does it deal with user input, there is nothing else to do. This might tempt you to cram it into the up above. Don’t do it! Instead, splitting your app up into small components that each do one job will make it easier to build up functionality in the future.

The last step is to render the whole thing.

React.render() accepts two arguments: a React component you defined as well as a DOM node to inject it into. Remember how you saw the

With all this in place, re-run the application ( ./mvnw spring-boot:run ) and visit https://localhost:8080.

You can see the initial employee loaded up by the system.

Remember using cURL to create new entries? Do that again.

Refresh the browser, and you should see the new entry:

And now you can see both of them listed on the web site.

Review

In this section:

You defined a domain object and a corresponding repository.

You let Spring Data REST export it with full blown hypermedia controls.

You created two simple React components in a parent-child relationship.

You fetched server data and rendered them in as a simple, static HTML structure.

The web page wasn’t dynamic. You had to refresh the browser to fetch new records.

The web page didn’t use any hypermedia controls or metadata. Instead, it was hardcoded to fetch data from /api/employees .

It’s read only. While you can alter records using cURL, the web page offers none of that.

These are things we can address in the next section.

Part 2 — Hypermedia Controls

In the previous section, you found out how to stand up a backend payroll service to store employee data using Spring Data REST. A key feature it lacked was using the hypermedia controls and navigation by links. Instead, it hard coded the path to find data.

Feel free to grab the code from this repository and follow along. This section is based on the previous section’s app with extra things added.

In the beginning there was data…​and then there was REST

I am getting frustrated by the number of people calling any HTTP-based interface a REST API. Today’s example is the SocialSite REST API. That is RPC. It screams RPC…​.What needs to be done to make the REST architectural style clear on the notion that hypertext is a constraint? In other words, if the engine of application state (and hence the API) is not being driven by hypertext, then it cannot be RESTful and cannot be a REST API. Period. Is there some broken manual somewhere that needs to be fixed?

So, what exactly ARE hypermedia controls, i.e. hypertext, and how can you use them? To find out, let’s take a step back and look at the core mission of REST.

The concept of REST was to borrow ideas that made the web so successful and apply them to APIs. Despite the web’s vast size, dynamic nature, and low rate that clients, i.e. browsers, are updated, the web is an amazing success. Roy Fielding sought to use some of its constraints and features and see if that would afford similar expansion of API production and consumption.

One of the constraints is to limit the number of verbs. For REST, the primary ones are GET, POST, PUT, DELETE, and PATCH. There are others, but we won’t get into them here.

Мастер Йода рекомендует:  От «Типичного» до «Tproger» как мы развиваем наш сайт

GET — fetch the state of a resource without altering the system

POST — create a new resource without saying where

PUT — replace an existing resource, overwriting whatever else is already there (if anything)

DELETE — remove an existing resource

PATCH — alter an existing resource partially

These are standardized HTTP verbs with well written specs. By picking up and using already coined HTTP operations, we don’t have to invent a new language and educate the industry.

Another constraint of REST is to use media types to define the format of data. Instead of everyone writing their own dialect for the exchange of information, it would be prudent to develop some media types. One of the most popular ones to be accepted is HAL, media type application/hal+json. It is Spring Data REST’s default media type. A keen value is that there is no centralized, single media type for REST. Instead, people can develop media types and plug them in. Try them out. As different needs become available, the industry can flexibly move.

A key feature of REST is to include links to relevant resources. For example, if you were looking at an order, a RESTful API would include a link to the related customer, links to the catalog of items, and perhaps a link to the store from which the order was placed. In this section, you will introduce paging, and see how to also use navigational paging links.

Turning on paging from the backend

To get underway with using frontend hypermedia controls, you need to turn on some extra controls. Spring Data REST provides paging support. To use it, just tweak the repository definition:

Your interface now extends PagingAndSortingRepository which adds extra options to set page size, and also adds navigational links to hop from page to page. The rest of the backend is the same (exception for some extra pre-loaded data to make things interesting).

Restart the application ( ./mvnw spring-boot:run ) and see how it works.

The default page size is 20, so to see it in action, ?size=2 applied. As expected, only two employees are listed. In addition, there is also a first, next, and last link. There is also the self link, free of context including page parameters.

If you navigate to the next link, you’ll then see a prev link as well:

When using «&» in URL query parameters, the command line thinks it’s a line break. Wrap the whole URL with quotation marks to bypass that.

That looks neat, but it will be even better when you update the frontend to take advantage of that.

Navigating by relationship

That’s it! No more changes are needed on the backend to start using the hypermedia controls Spring Data REST provides out of the box. You can switch to working on the frontend. (That’s part of the beauty of Spring Data REST. No messy controller updates!)

It’s important to point out, this application isn’t «Spring Data REST-specific.» Instead, it uses HAL, URI Templates, and other standards. That’s how using rest.js is a snap: that library comes with HAL support.

In the previous section, you hardcoded the path to /api/employees . Instead, the ONLY path you should hardcode is the root.

With a handy little follow() function, you can now start from the root and navigate to where you need!

In the previous section, the loading was done directly inside componentDidMount() . In this section, we are making it possible to reload the entire list of employees when the page size is updated. To do so, we have moved things into loadFromServer() .

loadFromServer is very similar the previous section, but instead if uses follow() :

The first argument to the follow() function is the client object used to make REST calls.

The second argument is the root URI to start from.

The third argument is an array of relationships to navigate along. Each one can be a string or an object.

The array of relationships can be as simple as [«employees»] , meaning when the first call is made, look in _links for the relationship (or rel) named employees. Find its href and navigate to it. If there is another relationship in the array, rinse and repeat.

Sometimes, a rel by itself isn’t enough. In this fragment of code, it also plugs in a query parameter of ?size=

. There are other options that can be supplied, as you’ll see further along.

Grabbing JSON Schema metadata

After navigating to employees with the size-based query, the employeeCollection is at your fingertips. In the previous section, we called it day and displayed that data inside . Today, you are performing another call to grab some JSON Schema metadata found at /api/profile/employees/ .

React JS — анимация

Дата публикации: 2020-07-25

От автора: в этой главе мы узнаем, как делается в React js анимация.

Шаг 1 — Установите React CSS Transitions Group

Это надстройка React, используемая для создания базовых CSS-переходов и анимации. Мы установим ее из окна командной строки:

Шаг 2 — Добавьте файл CSS

Давайте создадим новую папку css и в ней файл style.css. Чтобы иметь возможность использовать его в приложении, нам нужно привязать его в элементе head в index.html.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Шаг 3 — Анимация

Мы создадим базовый компонент React. Элемент ReactCSSTransitionGroup будет использоваться как оболочка компонента, который мы хотим анимировать. Он будет использовать transitionAppear и transitionAppearTimeout, а для transitionEnter и transitionLeave будет установлено false.


Анимация CSS очень проста.

Когда мы запускаем приложение, элемент начинает проявляться.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Шаг 4 — Анимации ввода и исключения

Анимацию ввода и исключения можно использовать, когда мы хотим добавить или удалить элементы из списка.

Когда мы запустим приложение и нажмем кнопку «Add Item», появится форма.

Когда мы введем имя и нажмем OK, всплывет новый элемент.

Теперь мы можем удалить некоторые элементы (Item 3…), кликнув на них. Этот элемент исчезнет из списка.

Редакция: Команда webformyself.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

ReactJS: основы

Изучите основы ReactJS и создайте ваше первое приложение на ReactJS

React JS уроки для начинающих: Как создать React приложение?

Пошаговые React JS уроки по созданию приложения с помощью React и Flux. Почему React это полезно.

Чему вы научитесь?

  • Создавать многоразовые веб-компоненты с помощью React и Flux
  • Использовать Flux и Reflux для управления данными в React
  • Создавать сайты React, которые могут работать с данными (для стартапов или продуктов)
  • Создавать простые серверы Node и Express для работы с React
  • Создавать HTTP-запросы в React и Flux

Содержание

Раздел 1: Обзор курса по React
Раздел 2: Бесплатный бонусный материал — Основы Javascript (предисловие React)
Раздел 3: Введение в React
Раздел 4: Продолжение изучения React
Раздел 5: HTTP-запросы, React Flux и Reflux
Раздел 6: Теория на практике — Разработчик React

Описание

Наши React JS уроки научат вас, как создать React приложение с помощью самой популярной библиотеки JavaScript на сегодня. React это библиотека, которой пользуются множество компаний для создания и разработки веб-приложений. И у вас есть шанс познакомиться с ней. Добро пожаловать в мир React и Flux!

Flux и React это библиотека в основном поддерживаемая Facebook и другими онлайн разработчиками сообщества. В JavaScript существует множество библиотек, но не многие из них могут сравниться с возможностями, которыми обладает React. После изучения HTML, CSS, JavaScript и библиотеки jQuery, вашим следующим шагом в сфере программирования должен стать React!

Для кого полезен данный курс?

Данные React JS уроки лучше всего подойдут для более опытных разработчиков. Прежде чем начать наши React уроки, вам лучше всего иметь хотя бы базовые знания о фронтенд разработке. Вы должны иметь знания о HTML, CSS, JavaScript и библиотеке jQuery, чтобы успешно завершить этот курс.

React это небольшая библиотека, и это то, что отличает её от других библиотек, вроде Ember, Angular или Backbone.

Начало знакомства — Познавательные React JS уроки

Зачем изучать React?

React JS это самая популярная и распространённая библиотека JavaScript. Она имеет самый высокий рейтинг и количество разработчиков на Github. Всё это благодаря её возможностям к превращению сложных данных и компонентов JavaScript в простой и понятный код. Поэтому изучая наши React JS уроки, вы сможете более эффективно заниматься разработкой своих приложений. Более того, разработчики со знанием React очень востребованы и имеют неплохую среднюю зарплату в сфере веб-разработки. Как только вы освоите React, вы смело сможете претендовать на звание опытного разработчика.

В качестве него, вы легко сможете создавать приложения и поймёте, почему React JS это библиотека, которая определённо стоит вашего внимания. Более того, благодаря постоянной поддержке и обновлению со стороны Facebook, вы можете быть спокойны за будущее этой библиотеки.

Начало работы с курсом

Содержание курса

Данный курс охватывает такие темы, как основы JavaScript, работа с React стилизацией в JavaScript, разбор и управление JSON в React, компоненты React и вложенные компоненты, создание приложений React, надёжные архитектуры с Reflux и Flux.

Дополнительные материалы

Сообщество Chatroom

Курс React JS это не только видеоуроки, но и целое сообщество с более чем 100,000 разработчиков по всему миру. Это лучшее сообщество, которое вы только можете найти на данную тему. Вы будете получать новости, билеты на конференции, ответы на вопросы, техническую помощь, предложения по работе и многое многое другое. Это интересное сообщество, в котором вы всегда найдёте что-то новое. Поэтому, вы не только записываетесь на курс, но и получаете доступ к ещё одному источнику знаний.

С чем я познакомлюсь?

  • Основы JavaScript
  • Простые серверы Node и Express
  • Надёжные архитектуры с Flux и Reflux
  • HTTP-запросы и управление данными
  • Компоненты React
  • Обработка и управление JSON в React
  • Создание приложения React с обновлениями в реальном времени

Требования

  • ПК или ноутбук с Windows 8+ или Mac
  • Текстовый редактор вроде VSCode, Atom, Sublime и т.д.
  • Учётная запись GitHub или CodePen (Рекомендуется, но не обязательно)

Вам необходимо иметь опыт работы в программировании и базовые знания некоторых языков. Наши React JS уроки могут не подойти для новичков в программировании без соответствующего опыта.

Скринкаст по React.js

React.js — одна из самых популярных библиотек для создания сложных Frontend-приложений.

Однако, успешная разработка на нём требует хорошего понимания концепций, на которых он построен.

В этом скринкасте мы:

  • Познакомимся с основными понятиями и внутренним устройством React.js.
  • Разберёмся с тем, как создавать компоненты на React.js.
  • Разберём ряд подводных камней, на которые часто наступают начинающие React-разработчики.

Одна из главных особенностей React.js — свобода действий, существует огромное количество подходов к построению приложений с его помощью (redux, mobx и другие).

Они не являются частью собственно React.js, а представляют собой архитектурные надстройки и также постоянно развиваются. Мы осваиваем их на Основном и Продвинутом онлайн-курсах по React.JS.

Автор этого скринкаста – Роман Якобчук, с небольшой помощью в плане организации материала от Ильи Кантора.

Вы также можете скачать все скринкасты в виде архива с видео-файлами.

TypeScript и React с использованием create-react-app: пошаговое руководство по настройке вашего первого приложения

Из этого туториала вы узнаете, как быстро приступить к созданию приложений React с использованием TypeScript без необходимости какой-либо настройки с помощью create-react-app (CRA). Предположим, что на вашем компьютере уже установлены Node и NPM. Ваше приложение TypeScript/React будет работать сразу после установки без необходимости использовать CRA. Кроме того, вы узнаете, как создавать свои собственные компоненты и управлять props и state, используя TypeScript.

Установка с помощью create-react-app

create-react-app это инструмент командной строки, который позволяет разработчикам легко создавать новые приложения React с разумными настройками по умолчанию и нулевой конфигурацией.

Примечание. Этот шаг теперь необязательный. TypeScript можно установить с помощью npx, который будет показан в следующем разделе.

Инициализируйте свое приложение React с помощью TypeScript

Вызовите команду create-react-app с дополнительной опцией TypeScript, чтобы сгенерировать приложение React с использованием TypeScript в качестве синтаксиса JS по умолчанию.

npx — это команда, выпущенная с npm 5.2, которая позволяет вам выполнять команды CLI и исполняемые файлы, размещенные в локальном node_modules — это означает, что глобальные установки больше не требуются.

Если вы ранее использовали приложение create-react-app, это должно выглядеть очень знакомо. Дополнительной флаг —typescript говорит CRA использовать TypeScript в качестве синтаксиса по умолчанию и добавить соответствующую конфигурацию, чтобы он работал «из коробки».

Это создаст следующие файлы и структуру папок:

Ниже описание каждой части:

  • tsconfig.json объявляет параметры TypeScript. Он находится в корне проекта и указывает параметры компилятора и файлы для включения.
  • tslint.json — это настройки линтера, которые будут использоваться TSLint.
  • public — это папка статических ресурсов, которые будут доступны пользователям, такие как документ HTML и файл манифеста.
  • src содержит код пользовательского приложения. Это включает в себя наши компоненты TypeScript и стили CSS. Традиционный файл index.js был заменен на index.tsx в качестве точки входа.

Изменения React под TypeScript

Чтобы использовать React с TypeScript, вы должны внести небольшие изменения в подходе создания стандартного приложения React.

Используйте .tsx файлы для JSX

В дополнение к новому расширению файлов .ts для TypeScript есть также новое расширение файла .tsx. Это расширение, которое вы должны использовать каждый раз, когда включаете синтаксис JSX в файл компонента React. TypeScript способен компилировать JSX напрямую в JavaScript.

Импорт React и ReactDOM

Вы можете заметить, что в компонентах по умолчанию используется следующий синтаксис:

С TypeScript вы больше не сможете делать стандартные импорты фида:

React экспортируется как модуль CommonJS, который не использует default export. На данный момент, не обязательно точно знать, почему, а просто знать, как вы должны импортировать React, чтобы он работал. Это также означает, что вы объявляете свои компоненты как:


Создание компонент

Одна из лучших особенностей использования TypeScript — вам больше не нужно использовать пакет prop-types. Есть небольшая магия при изучения использования TypeScript для props и state, но как только вы его поймете, он станет гораздо более мощным, чем методология React по умолчанию.

Вы определите интерфейс props для каждого из компонентов, которым вы передаете параметры. Вы определяете интерфейс объекта и где у каждого ключа может быть свой тип данных. Кроме того, вы можете объявить интерфейс для состояния (state) компоненты.

Функциональный компонент без хранения состояния

Чтобы продемонстрировать функциональный компонент с props, мы заменим заголовок

в App.tsx нашим собственным компонентом . Создайте файл ./src/Header.tsx. Он получает параметр name. Внутри нашего файла мы создадим функциональный компонент:

Начнем с импорта React. Затем мы объявляем интерфейс IProps с единственным параметром name. Мы указали что параметр необязательный, это задается симфолом “?”. Обозначение ключа как необязательного означает, что входной параметр может быть или string или undefined.

При создании компоненты Header, обратите внимание на React.SFC

. «SFC» обозначает функциональный компонент без сохранения состояния в прототип. Хотя это объявление не является обязательным, оно позволяет нам использовать defaultProps.

Мастер Йода рекомендует:  Пример создания многоязыкового приложения (XML)

Далее, мы объявляем тип входного параметра как IProps, ссылающийся на созданный нами интерфейс.

Компонент класса

Чтобы показать основы компонента класса, мы заменим описание

в App.tsx на счетчик. Одним из ключевых различий между классом и функциональным компонентом является то, что компонент класса может поддерживать свое собственное состояние. Другим основным отличием является возможность доступа к методам жизненного цикла, описание которых выходит за рамки данного руководства.

Создайте файл ./src/Description.tsx и добавьте следующий код.

Мы начнем с объявления интерфейса для IProps и IState. Будет необязательный счетчик вызовов счетчика, который будет определять значение приращения. Сам компонент будет вести подсчет, используя свое состояние.

Компонент объявлен с типами IProps и IState как class Description extends React.Component < и defaultProps объявлен как статическая переменная. State инициализируется со счетчиком 0.

Ваше create-react-app с компонентами TypeScript

Внутри нашего App.tsx мы импортируем только что созданные компоненты и заменяем HTML по умолчанию из CRA. Параметры name и countBy должны соответствовать типам, объявленным в дочернем компоненте. Поскольку props являются необязательными, они также могут быть undefined, и будет использоваться defaultProps.

И это все, что вам нужно для начала работы с TypeScript в React! Чтобы увидеть, как работает ваше приложение запустите следующую команду в консоли:

Почему стоит использовать React JS при разработке приложений

В этой статье мы попытаемся выяснить, почему библиотека React JS становится все более популярной в последнее время и почему многие заказчики делают выбор в пользу React разработки. Мы коснемся наиболее существенных преимуществ, которые могут быть предоставлены разработчикам и заказчикам, которые выберут React JS в качестве одной из используемых технологий при создании мобильных и веб-приложений.

Библиотека React была впервые выпущена компанией Facebook в 2013 году. Для того, чтобы понять, насколько популярной эта технология стала за прошедшее время, давайте обратимся к опросу разработчиков, проведенному сайтом StackOverflow в этом году. Более 50 000 разработчиков поделились информацией о своей работе и профессиональных предпочтениях. Помимо более или менее предсказуемых результатов, которые обрисовывают состоянии IT-индустрии на сегодняшний день, есть также и кое-что любопытное относительно непосредственно React. Эта библиотека стала одной из самых любимых и востребованных технологий, а также самой трендовой технологией на StackOverflow:

Довольно веский аргумент для того, кто задумывается о том, не стать ли ему React разработчиком, не так ли? Но давайте не будем делать поспешных выводов. Вместо этого, рассмотрим основные возможности React, благодаря которым эта библиотека стала такой популярной. Более того, мы попытаемся выяснить, являются ли эти особенности важными только для разработчиков или могут также принести выгоду и заказчикам.

Что такое React JS. Краткий обзор

React это библиотека для создания пользовательских интерфейсов. Одной из ее отличительных особенностей является возможность использовать JSX, язык программирования с близким к HTML синтаксисом, который компилируется в JavaScript. Разработчики могут добиваться высокой производительности приложений с помощью Virtual DOM. C React вы можете создавать изоморфные приложения, которые помогут вам избавиться от неприятной ситуации, когда пользователь с нетерпением ожидает, когда же наконец завершится загрузка данных и на экране его компьютера наконец появится что-то помимо анимации загрузки. Созданные компоненты могут быть с легкостью изменены и использованы заново в новых проектах. Высокий процент переиспользования кода повышает покрываемость тестами, что, в свою очередь, приводит к более высокому уровню контроля качества. Используя React Native мобильные приложения для Android и iOS, используя опыт JavaScript и React разработки.

Это были технические особенности, которые могут послужить пищей для размышлений для разработчиков. Теперь давайте перейдем к следующему вопросу.

Какую пользу из React может извлечь заказчик?
Итак, давайте разбираться:

  • Virtual DOM может повысить производительность высоконагруженных приложений, что может снизить вероятность возникновения возможных неудобств и улучшает пользовательский опыт;
  • Использование изоморфного подхода помогает производить рендеринг страниц быстрее, тем самым позволяя пользователям чувствовать себя более комфортно во время работы с вашим приложением. Поисковые системы индексируют такие страницы лучше. Поскольку один и тот же код может быть использован как в клиентской, так и в серверной части приложения, нет необходимости в дублировании одного и того же функционала. В результате время разработки и затраты снижаются;
  • Благодаря переиспользованию кода стало гораздо проще создавать мобильные приложения. Код, который был написан во время создания сайта, может быть снова использован для создания мобильного приложения. Если вы планируете использовать не только сайт, но и мобильное приложение, нет необходимости нанимать две большие команды разработчиков.

Теперь давайте более подробно рассмотрим, за счет чего достигаются вышеописанные выгоды. Конечно, одной статьи будет недостаточно, чтобы описать все возможности данной библиотеки. Но мы сконцентрируемся на самых важных из них чтобы помочь вам понять, могут ли React разработчики решать проблемы с помощью:

  1. Улучшения пользовательского опыта ваших сайтов и приложений
  2. Увеличения скорости разработки
  3. Использования наиболее трендовых технологий разработки

Изоморфные приложения. Поймать двух зайцев

Когда мы говорим об изоморфных приложениях или об изоморфном JavaScript, мы имеем в виду, что мы можем использовать один и тот же код как в серверной, так и в клиентской части приложения. Когда пользователь открывает сайт в своем браузере, содержимое страницы должно быть загружено с сервера. В случае с SPA-приложениями (Single Page Application), это может занять некоторое время. Во время загрузки пользователи видят либо пустую страницу, либо анимацию загрузки. Учитывая, что по современным стандартам ожидание в течение более чем двух секунд может быть весьма заметным неудобством для пользователя, сокращение времени загрузки может оказаться крайне важным. А вот еще одна весомая проблема: поисковые машины не индексируют такие страницы так хорошо, как нам хотелось бы. Исполнение JavaScript кода на стороне сервера помогает исправить подобные проблемы. Если вы создаете изоморфные приложения, вы можете извлечь заметную выгоду, производя рендеринг на стороне сервера. После загрузки страницы вы все еще можете продолжать рендеринг компонентов. Такая возможность рендеринга страниц как на сервере, так и на клиенте приводит к заметным преимуществам, таким как возможность лучшего индексирования страниц поисковыми машинами и улучшение пользовательского опыта. Более того, такой подход позволяет снизить время, затрачиваемое на разработку. При использовании некоторых современных фреймворков, вы должны создавать компоненты, которые должны рендериться на стороне сервера, а также шаблоны для клиентской стороны приложения. React разработчики могут создавать компоненты, которые работают на обеих сторонах.

Virtual DOM. Просто потому, что так быстрее

Document Object Model, или DOM, — это способ представления и взаимодействия с объектами в HTML, XHTML и XML документах. Согласно этой модели, каждый такой документ представляет собой иерархическое дерево элементов, называемое DOM-деревом. Используя специальные методы, мы можем получит доступ к определенным элементам нашего документа и изменять их так, как мы хотим. Когда мы создаем динамичную интерактивную веб-страницу, мы хотим, чтобы DOM обновлялся так быстро, как это возможно после изменения состояния определенного элемента. Для данной задачи некоторые фреймворки используют прием, который называется «dirty checking» и заключается в регулярном опросе состояния документа и проверке изменений в структуре данных. Как вы можете догадаться, подобная задача может стать самой настоящей головной болью в случае высоконагруженных приложений. Virtual DOM, в свою очередь, хранится в памяти. Именно поэтому в момент, когда «настоящий» DOM меняется, React может изменять Virtual DOM в мгновение ока. React «собирает» такие изменения сравнивает их с состоянием DOM, а затем перерисовывает изменившиеся компоненты.

При данном подходе вы не производите регулярное обновление DOM. Именно поэтому может быть достигнута более высокая производительность React приложений. Второе следствие вытекает из изоморфной природы React: вы можете производить рендеринг на стороне сервера совсем как на стороне клиента.

Как переиспользование кода помогает разрабатывать и тестировать приложения более эффективно

Мобильные приложения имеют некоторые преимущества по сравнению с сайтами. Их можно использовать без соединения с Интернетом. Они имеют доступ к таким возможностям устройства, как всплывающие уведомления. Также они позволяют быть в контакте с вашими пользователями в режиме 24/7. React Native — это фреймворк, который позволяет вам создавать мобильные приложения, используя React. Логика приложения пишется на JavaScript, таким образом, программисту не нужно отказываться от привычных приемов веб-разработчика. Все что нужно — научиться писать специфичный для устройства код, который адаптирует компоненты, ранее созданные для веб-сайта к новой среде обитания.

Если мы сравним затраты на разработку разных видов мобильных приложений, мы получим примерно следующие результаты:

  • В случае с нативными приложениями вы можете надеяться на довольно высокую производительность, но стоимость разработки будет довольно высокой;
  • Если вы предпочтете фреймворки, которые позволяют использовать HTML5, CSS3 и JavaScript, например PhoneGap, вы можете снизить стоимость. Но в этом случае уровень производиетльности будет гораздо ниже;
  • В случае React вы можете достигнуть уровня производительности, сравнимого с нативными приложениями. При этом стоимость разработки сравнима с предыдущим примером.

Если вы планируете создать корпоративное веб-приложение и не вполне уверены, будет ли разработка мобильной версии этого же приложения хорошей идеей, вот что вы должны помнить. React Native позволяет использовать уже имеющуюся логику веб-приложения при создании мобильного приложения. Это значит, что команда разработчиков может использовать тот же код, который был использован в процессе создания сайта вместо того, чтобы начинать с чистого листа.

Помимо более быстрой разработки, переиспользование кода позволяет избежать большого количества ошибок. Если вы создаете хорошо спроектированные компоненты, которые затем используете снова, вам нужно будет писать меньше кода, когда вы решите создать с их помощью новый пользовательский интерфейс. Чем меньше нового кода вам нужно, тем меньше вероятность возникновения новых ошибок. К тому же, вы знаете ваши компоненты. Вы уже использовали и тестировали их при работе над реальным проектом, а значит при возникновении ошибок сможете предсказать причину их появления.

Заключение

Компонентно-ориентированный подход, возможность с легкостью изменять имеющиеся компоненты и переиспользовать код превращают React разработку в непрерывный процесс улучшения. Компоненты, которые были созданы во время работы над тем или иным проектом, не имеют дополнительных зависимостей. Таким образом, ничто не мешает использовать их снова и снова в проектах разного типа. Весь предыдущий опыт может быть с легкостью применен при работе над новым сайтом или даже при создании мобильного приложения. Используя передовые возможности, такие как Virtual DOM или изоморфный JavaScript, React разработчики могут с высокой скоростью создавать высокопроизводительные приложения, несмотря на уровень их сложности. Возможность с легкостью заново использовать уже имеющийся код повышает скорость разработки, упрощает процесс тестирования, и, как результат, понижает затраты. Тот факт, что эта библиотека разрабатывается и поддерживается высококвалифицированными разработчиками и набирает все большую популярность с каждым годом, дает основания надеяться, что тенденция к дальнейшим улучшениям продолжится.

Favicon

Блог по web технологиям. Веб студия г. Воронеж. Создание и поддержка сайтов на заказ.

  • Главная
  • /
  • JavaScript
  • /
  • 7 известных приложений использующих ReactJS в наши дни

7 известных приложений использующих ReactJS в наши дни

Посмотрим правде в глаза — digital мир меняется пока мы разговариваем. Конечно трудно приспособиться к тенденциям в такой реальности. Однако это как раз то, что делают крупные сервисы и приложения, которые у всех на слуху, в этом направлении.

Такие крупные приложения, как Facebook, Instagram, Netflix и другие, постоянно совершенствуют свой опыт и адаптируются к новым фреймворкам и трендам.

С недавнего времени, идет бурное обсуждение вокруг ReactJS и его впечатляющие возможности.

В принципе, React стал очень популярным среди разработчиков, и есть масса ресурсов, которые входят в большую часть его технических достоинств — такие как NodeJS и множество других связанных с ним фреймворков/инструментов JavaScript. Небходим ли вашему проекту React мы рассматривали в статье, где писали все «за» и «против» этой библиотеки.

Доказательство его популярности лучше всего демонстрируется приложениями, которые используют ReactJS — и сегодня я представлю вам список одних из самых известных приложений на основе ReactJS. В оригинальной статье в списке десять приложений, три показались мне не такими уж известными, поэтому были убраны.

Что такое React?

Короче говоря, React — это библиотека JavaScript для создания пользовательских интерфейсов. Очень часто он неправильно интерпретируется как фреймворк или язык программирования. React позволяет разработчикам создавать крупные веб-приложения, которые могут работать с данными, изменять их, без перезагрузки страницы. Его основная цель — быть быстрым, простым и масштабируемым. React распространяется только на пользовательский интерфейс в приложениях (источник).

Это просто среда выполнения JavaScript. Легкий, быстрый и современный способ выполнения кода на вашем компьютере.

По каким причинам одни из самых крупных компаний используют React?

#1 Facebook

Facebook использует ReactJS, хоть и частично. Мобильное приложение также построено на версии React под названием React Native, суть то же самое, хоть и отвечает за отображение iOS и Android нативных компонентов вместо элементов DOM.

Интересно, что Facebook является тем местом, где изначально была создана библиотека ReactJS, поэтому очевидно, что он его использует. В настоящее время Facebook открыл бета-версию полностью переписанного ReactJS, получившего название React Fiber.

#2 Instagram

Роль ReactJS в Instagram огромна. Доказательством этого являются многочисленные функции, такие как геопозиционирование, API Google карт, точность поисковой системы, а также теги, которые вылетают без хэштегов. И все это есть в API приложения — что действительно впечатляет.

#3 Netflix

React версия работает также и с Netflix — особенно на их платформе под названием Gibbon, где используется для низкопроизводительных телевизионных устройств вместо DOM, используемых в веб-браузерах. Netflix даже опубликовал официальное сообщение в блоге, объясняя, как библиотека ReactJS помогает повысить скорость запуска, производительность, модульность и другие преимущества.

UI инженеры Netflix прямо так и пишут в блог посте:

На наше решение принять React повлияли ряд факторов, в первую очередь: 1) скорость запуска, 2) производительность и 3) модульность.

#4 New York Times

Пару месяцев назад New York Times разработала отличный новый проект, который имитирует внешний вид звезд на красном ковре Оскара. Очевидно, что интерфейс этого проекта был встроен в React и позволяет пользователям фильтровать галерею разных фотографий за 19 лет. Ре-рендеринг в этом проекте является лишь одной из впечатляющих функций, за которые мы можем поблагодарить ReactJS.

Примечание: на момент перевода этой статьи, проект красный ковер не функционировал должным образом.

#5 Yahoo! Mail

Удивительно (или нет), почтовый клиент Yahoo!, тоже использует React. С тех пор как Facebook завладел Yahoo!, появилась идея мощной и упорядоченной архитектуры, и именно поэтому React был включен по максимуму.

Инженеры, работающие на платформе Yahoo Mail, нуждались в большом количестве обновлений. Как говорится в блоге на Tumblr:

Для платформы Yahoo Mail следующего поколения мы хотели:

Легкая отладка

  • Независимо развертываемые компоненты
  • Более низкий уровень вхождения
  • Независимость от больших библиотек
  • В итоге мы решили пойти за ReactJS и Flux по следующим причинам

    • React реализует односторонний реактивный поток данных
    • Виртуальный DOM позволяет выполнять код на стороне клиента и сервера
    • Код в Javascript
    • Растущее и активное сообщество

    #6 WhatsApp

    Несмотря на то, что до его официального запуска было несколько бета-версий, WhatsApp использует ReactJS для создания пользовательских интерфейсов.

    #7 Dropbox

    Dropbox переключился на ReactJS более года назад. Как раз в то время, когда React стал очень популярным среди разработчиков приложений.

    Заключение

    В конце концов, производительность разработки с ReactJS, повышение эффективности и многочисленные организационные преимущества — все это является причиной того, почему крупные и известные приложения обновляются до ReactJS и используют преимущества, предлагаемые этой библиотекой. И несмотря на каждое обновление «фреймворка», которое несет за собой какие-то дополнительные затраты, все это малозначимо, когда дело доходит до создания идеального пользовательского интерфейса — будь то веб или мобильное приложение.

    Добавить комментарий