There are a lot of tools available for the React developer that you can make use of.
React adds a new layer to your code that solves a lot of problems but does add complexity as well. To help you out there is a browser extension that allows you to inspect your react components in the browser which makes it a lot easier to follow what your app is doing. Have a look at the following video that gives a small introduction to the extension (there are a lot of different videos out there):
{% hyf-youtube src="https://www.youtube.com/watch?v=rb1GWqCJid4" %}
Important is what The Net Ninja says in the end: 'The best way to become familiar with this is to dive in and play around with it'!
Download the extensions here:
The React team themselves have provided a tool to quickly set up a React application with Babel, webpack and ESLint already configured. It also makes sure that the instant reload functionality is set up so that your app updates on any change you make to the code.
This means you can focus on learning React!
Have a look at the official site: https://create-react-app.dev/.
One of our volunteers has also made a movie to explain this setup and what Babel is in the following video:
{% hyf-youtube src="https://www.youtube.com/watch?v=oCbipSIt43k" %}
React in itself creates what is called a build which is all your code converted into JavaScript that the browser can understand. In essence this is a static amount of code that we can host. There are many static site hosting platforms that make it easy to deploy your React applications.
The host creates a URL for us that we can use to access our website.
Examples of static site hosting platforms are the following:
To learn more about static site hosting and how to do it, study the following: