Introduction — JS: React

React — A JavaScript library for building user interfaces

This is how React is 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. At the time the course was created on GitHub the project has over 150,000 stars.

The secret of its success is that React allowed 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 compared to many frameworks.

And while React as a rendering library can be built into an existing technology stack where it makes sense, it is also capable of taking full control of the frontend. However, in this case, in order to work efficiently, you'll have to connect some more key add-ons, such as redux and react-router.

The fundamental idea behind React has been so powerful that it's been extended far beyond the browser. You can work with React both server-side, and on mobile platforms (React Native). That's right, JavaScript can now be used to create applications for mobile platforms that work almost as efficiently as native applications. This situation, when one approach is used to implement different tasks (website, mobile applications) is called ”Learn once, Write anywhere”.

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 as well.

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 results of the code are also displayed there, in the adjacent panel.

CodePen allows you to insert pens directly into your site, this feature will be used for demonstration purposes. You can do more than just analyze this code, you can also run and even 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. This is an npm library that allows you to start with zero configuration

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

You just need to open localhost:3000 and enjoy.

babel-preset-react

If you do decide to do it yourself, remember to 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, which means that it's important to use the layout exactly as specified in the assignment.

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

Debugging

Since React runs on the frontend, errors will also appear there. Remember to always keep the console open (e.g., in Chrome development tools) and read everything that is written there carefully. Most of the errors will be displayed there.

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

Preparation

React is studied both by experienced programmers and beginners getting their first serious experience in writing frontend applications. Because of this, it is difficult to make the course universal, equally understandable and interesting to all. So here at Hexlet we took a different route. The React course is all about React itself, without learning JavaScript. But JavaScript itself can (and preferably should) be learned in our other courses about the language and browser technologies. It's easiest to go straight into the Frontend Programmer profession, where there's a ready-made 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.