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
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.
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.
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.
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.
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.
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.
The Hexlet support team or other students will answer you.
A professional subscription will give you full access to all Hexlet courses, projects and lifetime access to the theory of lessons learned. You can cancel your subscription at any time.
Programming courses for beginners and experienced developers. Start training for free
Our graduates work in companies:
From a novice to a developer. Get a job or your money back!
Sign up or sign in
Ask questions if you want to discuss a theory or an exercise. Hexlet Support Team and experienced community members can help find answers and solve a problem.