Introduction — JS: React

React is a JavaScript library for building user interfaces, as characterized by its creators, the developers of Facebook. Having appeared in 2013, React quickly began to gain momentum and became one of the most widespread JavaScript libraries. Its popularity has rapidly increased since its introduction in 2013, and it has become one of the most widely-used JavaScript libraries with over 150,000 stars on GitHub.

The secret of its success is that React allows you to look at the process of creating interfaces from a different angle. It dramatically lowered the entry threshold and the complexity of the resulting solutions. Not only compared to manually working with the DOM but also to many frameworks.

Although React is primarily a rendering library that we can integrate with other technologies as needed, it can also fully control the front end. To do so, we can use additional add-ons such as redux and react-router for optimal efficiency.

React's core idea is so powerful that we can use it beyond websites and browser environments. For example, it's also compatible with server-side development and mobile platforms through React Native. This approach is known as "Learn once, Write anywhere". We can use it to complete different tasks like building websites and mobile applications.

Practice

In this course, you'll be going through React's features and getting a good handle on them. However, this does not negate the need to work with React outside of the Hexlet environment.

CodePen

The easiest way to practice React is with CodePen. After registering, you can create a pen – an isolated development environment, and connect React. The code results are also displayed there, in the adjacent panel.

CodePen allows you to insert pens directly into your site. We can use this feature for demonstration purposes. You can do more than analyze this code — you can also run and correct it:

See the Pen js_dom_fsm_data by Hexlet (@hexlet) on CodePen.

create-react-app

Developers at Facebook realized how difficult it is to set up an ecosystem from scratch to start front-end projects, and created a project called create-react-app.

It is an npm library that allows you to start with zero configuration:

npx create-react-app my-app
cd my-app/
npm start

You need to open localhost:3000 and enjoy.

babel-preset-react

If you decide to do it yourself, connect the @babel/preset-react preset to your Babel configuration. React extends JS, and Babel can't work with code without this preset.

Course

Throughout the course, you'll be creating small and not-so-small Bootstrap components.

In any case, each task will describe in detail which component to use and what it should look like.

As in the JS: DOM API course, part of the tests are based on snapshot testing. It is important to use the layout exactly as specified in the assignment.

In addition, almost all the assignments are visualized, so you can (and should) check that everything works in web access before you run the tests.

Debugging

Since React runs on the front end, errors will also appear there. Always keep the console open (e.g., in Chrome development tools) and carefully read everything there. It will show most of the errors.

Also, don't forget to install React Developer Tools. It is a browser extension that gives you a handy dashboard for analyzing what's going on with React in your application. Start using it from the first lesson.

Preparation

React is studied by experienced programmers and beginners seeking their first experience in writing front-end apps. Consequently, it is a challenge to create a universal course that is equally understandable and interesting to all. However, at Hexlet, we took a different approach. Our React course solely focuses on teaching React, independent of learning JavaScript.

We recommend learning JavaScript separately in our other courses, dedicated to the language and browser technologies. The easiest path to follow is to enroll in the Front-end Programmer profession, which provides a pre-designed program that includes this course.

---

Are there any more questions? Ask them in the Discussion section.

The Hexlet support team or other students will answer you.

About Hexlet learning process

• Article “How to Learn and Cope with Negative Thoughts“
• Article “Learning Traps“
• Article “Complex and simple programming tasks“