Программирование реакт язык программирования

Getting Started

These docs are old and won’t be updated. Go to react.dev for the new React docs.

The new Quick Start teaches modern React and includes live examples.

This page is an overview of the React documentation and related resources.

React is a JavaScript library for building user interfaces. Learn what React is all about on our homepage or in the tutorial.

React has been designed from the start for gradual adoption, and you can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to a simple HTML page, or start a complex React-powered app, the links in this section will help you get started.

If you’re interested in playing around with React, you can use an online code playground. Try a Hello World template on CodePen, CodeSandbox, or Stackblitz.

If you prefer to use your own text editor, you can also download this HTML file, edit it, and open it from the local filesystem in your browser. It does a slow runtime code transformation, so we’d only recommend using this for simple demos.

You can add React to an HTML page in one minute. You can then either gradually expand its presence, or keep it contained to a few dynamic widgets.

When starting a React project, a simple HTML page with script tags might still be the best option. It only takes a minute to set up!

As your application grows, you might want to consider a more integrated setup. There are several JavaScript toolchains we recommend for larger applications. Each of them can work with little to no configuration and lets you take full advantage of the rich React ecosystem. Learn how.

People come to React from different backgrounds and with different learning styles. Whether you prefer a more theoretical or a practical approach, we hope you’ll find this section helpful.

• If you prefer to learn by doing, start with our practical tutorial.
• If you prefer to learn concepts step by step, start with our guide to main concepts.

Like any unfamiliar technology, React does have a learning curve. With practice and some patience, you will get the hang of it.

The React homepage contains a few small React examples with a live editor. Even if you don’t know anything about React yet, try changing their code and see how it affects the result.

If you feel that the React documentation goes at a faster pace than you’re comfortable with, check out this overview of React by Tania Rascia. It introduces the most important React concepts in a detailed, beginner-friendly way. Once you’re done, give the documentation another try!

If you’re coming from a design background, these resources are a great place to get started.

The React documentation assumes some familiarity with programming in the JavaScript language. You don’t have to be an expert, but it’s harder to learn both React and JavaScript at the same time.

We recommend going through this JavaScript overview to check your knowledge level. It will take you between 30 minutes and an hour but you will feel more confident learning React.

Tip

Whenever you get confused by something in JavaScript, MDN and javascript.info are great websites to check. There are also community support forums where you can ask for help.

If you prefer to learn by doing, check out our practical tutorial. In this tutorial, we build a tic-tac-toe game in React. You might be tempted to skip it because you’re not into building games — but give it a chance. The techniques you’ll learn in the tutorial are fundamental to building any React apps, and mastering it will give you a much deeper understanding.

If you prefer to learn concepts step by step, our guide to main concepts is the best place to start. Every next chapter in it builds on the knowledge introduced in the previous chapters so you won’t miss anything as you go along.

Many React users credit reading Thinking in React as the moment React finally “clicked” for them. It’s probably the oldest React walkthrough but it’s still just as relevant.

Sometimes people find third-party books and video courses more helpful than the official documentation. We maintain a list of commonly recommended resources, some of which are free.

Once you’re comfortable with the main concepts and played with React a little bit, you might be interested in more advanced topics. This section will introduce you to the powerful, but less commonly used React features like context and refs.

This documentation section is useful when you want to learn more details about a particular React API. For example, React.Component API reference can provide you with details on how setState() works, and what different lifecycle methods are useful for.

The glossary contains an overview of the most common terms you’ll see in the React documentation. There is also a FAQ section dedicated to short questions and answers about common topics, including making AJAX requests, component state, and file structure.

The React blog is the official source for the updates from the React team. Anything important, including release notes or deprecation notices, will be posted there first.

You can also follow the @reactjs account on Twitter, but you won’t miss anything essential if you only read the blog.

Not every React release deserves its own blog post, but you can find a detailed changelog for every release in the CHANGELOG.md file in the React repository, as well as on the Releases page.

This documentation always reflects the latest stable version of React. Since React 16, you can find older versions of the documentation on a separate page. Note that documentation for past versions is snapshotted at the time of the release, and isn’t being continuously updated.

If something is missing in the documentation or if you found some part confusing, please file an issue for the documentation repository with your suggestions for improvement, or tweet at the @reactjs account. We love hearing from you!

Источник

React

React делает безболезным создание интерактивных пользовательских интерфейсов. Создавайте простые представления для каждого состояния вашего приложения, и React будет эффективно обновлять и отрисовать только нужные компоненты при изменении ваших данных.

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

Основан на компонентах

Создавайте инкапсулированные компоненты, которые управляют своим состоянием, а затем компонуйте их для создания сложных пользовательских интерфейсов.

Поскольку логика компонента написана на JavaScript вместо использования шаблонов, вы можете легко передавать различного типа данных через своё приложение и сохранять состояние вне DOM.

Учитесь один раз — пишите где угодно

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

React также может работать на сервере с помощью Node и может быть задействован на мобильных приложениях с использованием React Native.

Простой компонент

Компоненты React реализуют метод render() , который принимает входные данные и возвращает данные для отображения. В этом примере используется XML-подобный синтаксис JSX. Входные данные, которые передаются в компонент, могут быть доступны в render() через this.props .

JSX необязателен и не его требуется использовать в React. Попробуйте REPL Babel, чтобы увидеть необработанный код JavaScript, созданный на этапе компиляции JSX.

Loading code example.

Компоненты с состоянием

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

Loading code example.

Приложение

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

Loading code example.

Компонент, использующий внешние плагины

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

Источник

React

React делает безболезным создание интерактивных пользовательских интерфейсов. Создавайте простые представления для каждого состояния вашего приложения, и React будет эффективно обновлять и отрисовать только нужные компоненты при изменении ваших данных.

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

Основан на компонентах

Создавайте инкапсулированные компоненты, которые управляют своим состоянием, а затем компонуйте их для создания сложных пользовательских интерфейсов.

Поскольку логика компонента написана на JavaScript вместо использования шаблонов, вы можете легко передавать различного типа данных через своё приложение и сохранять состояние вне DOM.

Учитесь один раз — пишите где угодно

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

React также может работать на сервере с помощью Node и может быть задействован на мобильных приложениях с использованием React Native.

Простой компонент

Компоненты React реализуют метод render() , который принимает входные данные и возвращает данные для отображения. В этом примере используется XML-подобный синтаксис JSX. Входные данные, которые передаются в компонент, могут быть доступны в render() через this.props .

JSX необязателен и не его требуется использовать в React. Попробуйте REPL Babel, чтобы увидеть необработанный код JavaScript, созданный на этапе компиляции JSX.

Loading code example.

Компоненты с состоянием

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

Loading code example.

Приложение

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

Loading code example.

Компонент, использующий внешние плагины

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

Источник