React е добре позната JavaScript библиотека, която можете да използвате, за да създавате потребителски интерфейси за многостранни уеб приложения. React е адаптивен и можете да го комбинирате с други технологии, за да направите по-мощни и ефективни приложения.

Научете как да интегрирате React с различни технологии и ще спечелите ползи от множество източници.

1. React + Redux

Redux е библиотека за управление на състоянието, използвана заедно с React. Redux улеснява централизирано управление на състоянието на приложението. Когато създавате сложни приложения с много състояния, React и Redux работят добре заедно.

Ето илюстрация как да използвате Redux с React:

импортиране Реагирайте от"реагира";
импортиране { createStore } от'редукс';
импортиране { Доставчик } от'react-redux';
конст първоначално състояние = { броя: 0 };
функцияредуктор(състояние = първоначално състояние, действие) 





instagram viewer
{
превключвател (action.type) {
случай„УВЕЛИЧАВАНЕ“:
връщане { броя: state.count + 1 };
случай„НАМАЛЯВАНЕ“:
връщане { броя: state.count - 1 };
по подразбиране:
връщане състояние;
 }
}

констимпортиране Реагирайте от"реагира";
импортиране {useQuery, gql} от„@apollo/клиент“;
конст GET_USERS = gql`
 query GetUsers {
 потребители {
 документ за самоличност
 име
 }
 }
;
функцияПотребители() {
конст {зареждане, грешка, данни} = useQuery (GET_USERS);
ако (Зареждане) връщане<стр>Зареждане...стр>;
ако (грешка) връщане<стр>Грешка :(стр>;
връщане (
store = createStore (редуктор);
функцияБрояч() {
конст брой = useSelector(състояние => състояние.брой);
конст изпращане = useDispatch();
връщане (


Брой: {count}</p>
 изпращане ({ Тип: „УВЕЛИЧАВАНЕ“ })}>+</button>
 изпращане ({ Тип: „НАМАЛЯВАНЕ“ })}>-</button>
 </div>
 );
}
функцияПриложение() {
връщане (


 </Provider>
 );
}
износпо подразбиране Приложение;

Този пример създава магазин Redux с начално състояние 0. След това функция за намаляване обработва УВЕЛИЧЕНИЕ и НАМАЛЯВАНЕ операции. Кодът използва useSelector и useDispatch куки, за да получите текущия брой и да изпратите дейностите поотделно.

И накрая, за да направите магазина достъпен за цялото приложение, обвийте компонента на брояча в компонента на доставчика.

2. Изобразяване от страна на сървъра с Next.js

Next.js е рамка за разработка, която оптимизира скоростта на уебсайта и SEO тактика чрез предаване на HTML на клиенти и използване изобразяване от страна на сървъра на React компоненти.

Неговият мощен набор от инструменти работи заедно с React, осигурявайки изключителна производителност и високо класиране в търсачките.

// страници/index.js
импортиране Реагирайте от"реагира";
функцияУ дома() {
връщане (


Здравей, свят!</h1>


Това е изобразен от сървър React компонент.</p>
 </div>
 );
}
износпо подразбиране У дома;

В този модел вие характеризирате React компонент, наречен У дома. Next.js прави статична HTML страница със съдържанието на този компонент, когато го изобразява на сървъра. Когато страницата получи посещение от клиента, тя ще изпрати HTML на клиента и ще хидратира компонента, позволявайки му да функционира като динамичен React компонент.

3. Извличане на данни с GraphQL

GraphQL е език за заявки за API, който предлага опитна, силна и адаптивна алтернатива на REST. С GraphQL можете да получавате данни по-бързо и да актуализирате потребителския интерфейс по-бързо.

Това е илюстрация на начина за използване на GraphQL с React:

импортиране Реагирайте от"реагира";
импортиране {useQuery, gql} от„@apollo/клиент“;
конст GET_USERS = gql`
 query GetUsers {
 потребители {
 документ за самоличност
 име
 }
 }
;
функцияПотребители() {
конст {зареждане, грешка, данни} = useQuery (GET_USERS);
ако (Зареждане) връщане<стр>Зареждане...стр>;
ако (грешка) връщане<стр>Грешка :(стр>;
връщане (


 {data.users.map(потребител => (
{потребителско.име}</li>
 ))}
 </ul>
 );
}
функцияПриложение() {
връщане (


Потребители</h1>

 </div>
 );
}
износпо подразбиране Приложение;

Този модел нарича useQuery функция от @apollo/клиент библиотека за извеждане на списъка на клиентите от интерфейса за програмиране на GraphQL. След това потребителският списък се показва в потребителския интерфейс.

4. Оформяне с CSS-in-JS

CSS-in-JS е базиран на JavaScript метод за стилизиране на React компоненти. Улеснява управлението на сложни таблици със стилове и ви позволява да пишете стилове в модулен и базиран на компоненти стил.

Ето илюстрация как да използвате CSS-in-JS с React:

импортиране Реагирайте от"реагира";
импортиране стилизиран от'styled-components';
конст Бутон = styled.button`
 Цвят на фона: #007bff;
 цвят: #fff;
 подплата: 10px 20px;
 радиус на границата: 5px;
 размер на шрифта: 16px;
 курсор: показалец;
 &:hover {
 Цвят на фона: #0069d9;
 }
;
функцияПриложение() {
връщане (


Щракни върху мен!</Button>
 </div>
 );
}
износпо подразбиране Приложение;

Този пример създава a стилизиран бутон компонент, използващ стилизиран функция. Той определя тона на изживяване на бутона, тона на текста, омекотяването, изместването на линията, размерите на текста и курсора.

Също така е дефинирано състояние на задържане, което променя цвета на фона, когато потребителят задържи курсора на мишката върху бутона. Бутонът най-накрая се изобразява с помощта на React компонент.

5. Интегриране с D3 за визуализация на данни

D3 е JavaScript библиотека за манипулиране и визуализация на данни. Можете да правите мощни и интерактивни визуализации на данни с помощта на React. Илюстрация за това как да използвате D3 с React е както следва:

импортиране Реагирайте, {useRef, useEffect} от"реагира";
импортиране * като d3 от"d3";
функцияBarChart({ данни }) {
конст ref = useRef();
 useEffect(() => {
конст svg = d3.select (ref.current);
конст ширина = svg.attr("ширина");
конст височина = svg.attr("височина");
конст x = d3.scaleBand()
 .domain (data.map((д) => d.label))
 .range([0, ширина])
 .padding(0.5);
конст y = d3.scaleLinear()
 .domain([0, d3.max (данни, (d) => d.стойност)])
 .диапазон ([височина, 0]);
 svg.selectAll("право")
 .data (данни)
 .enter()
 .добавете("право")
 .attr('х', (d) => x (d.label))
 .attr('y', (d) => y (d.стойност))
 .attr("ширина", x.bandwidth())
 .attr("височина", (d) => височина - y (d.стойност))
 .attr("запълвам", '#007bff');
 }, [данни]);
връщане (
400}>
 {/* осите отиват тук */}
 </svg>
 );
}
износпо подразбиране BarChart;

Този код дефинира a BarChart компонент, който приема a данни prop в предишния кодов фрагмент. Извиква useRef кука, за да направи препратка към SVG компонента, който ще го използва за начертаване на контура.

След това изобразява лентите на диаграмата и дефинира мащабите с useEffect() кука, който преобразува стойностите на данните в координатите на екрана.

6. Добавяне на функционалност в реално време с WebSockets

Внедряването на WebSockets установява напълно работещ двупосочен път, който позволява непрекъсната комуникация между клиент и сървър. Те позволяват на React да добавя непрекъсната полезност към уеб приложенията, например дискусионни табла, актуализации на живо и предупреждения.

Вие използвате WebSockets по следния начин с React:

импортиране Реагирайте, {useState, useEffect} от"реагира";
импортиране io от'socket.io-клиент';
функцияСтая за чат() {
конст [съобщения, setMessages] = useState([]);
конст [inputValue, setInputValue] = useState('');
конст гнездо = ​​io(' http://localhost: 3001');
 useEffect(() => {
 socket.on("съобщение", (съобщение) => {
 setMessages([...съобщения, съобщение]);
 });
 }, [съобщения, сокет]);
конст handleSubmit = (д) => {
 e.preventDefault();
 socket.emit("съобщение", входна стойност);
 setInputValue('');
 };
връщане (




 {messages.map((съобщение, i) => (
{съобщение}</li>
 ))}
 </ul>


 тип="текст"
 стойност={inputValue}
 onChange={(e) => setInputValue (e.target.value)}
 />
"Изпращане">Изпрати</button>
 </form>
 </div>
 );
}
износпо подразбиране стая за чат;

В този пример вие дефинирате a Стая за чат компонент, който използва socket.io-клиент библиотека за свързване към WebSocket сървър. Можете да използвате useState кука, за да се справи с изчерпването на съобщенията и оценката на информацията.

При получаване на ново съобщение, useEffect hook регистрира слушател, за да задейства актуализация на събитие за съобщение в списъка със съобщения. За да изчистите и изпратите входна стойност за съобщението за събитие, съществува a handleSubmit функция.

Впоследствие както формата с поле за въвеждане и бутон, така и актуализираният списък със съобщения ще се покажат на екрана.

С всяко подаване на формуляр, призовавайки handleSubmit функцията е неизбежна. За да достави съобщението до сървъра, този метод използва сокета.

7. Интегриране с React Native за мобилно развитие

React Local е система за изграждане на локални универсални приложения с помощта на React, които се свързват за насърчаване на преносими приложения за iOS и Android етапи.

Използвайки интеграцията на React Native с React, можете да използвате базирания на компоненти дизайн и многократно използваем код на React в мобилни и уеб платформи. Това намалява циклите на разработка на мобилни приложения и времето за излизане на пазара. React Native е популярна рамка за разработване на собствени мобилни приложения, която използва библиотеката на React.

Представяне на жизненоважно програмиране и библиотеки, като Node.js, Отговор на локален CLI, и Xcode или Android Studio, е основен за дизайнерите, занимаващи се с iOS и Android отделно. И накрая, простите компоненти на React Native позволяват на разработчиците да създават стабилни и богати на функции мобилни приложения за платформите iOS и Android.

Комбинирайте React с други технологии

React е харесвана и ефективна библиотека за изграждане на онлайн приложения. React е страхотна възможност за създаване на потребителски интерфейси, но се използва и с други технологии за увеличаване на възможностите му.

Чрез интегрирането на React с тези технологии разработчиците могат да създават по-сложни и усъвършенствани приложения, които предлагат по-добро потребителско изживяване. React и неговата екосистема от инструменти и библиотеки покриват всичко необходимо за създаване на основен уебсайт или сложно уеб приложение.