In this blog we are going to explore how we can get started with React. React is a JavaScript library for building user interfaces. We will explain how you can have a flying start with React and share our experiences.

1. Introduction

The first question we need to ask ourselves is why we should invest in learning React anyway. Well, React is gaining popularity and is one of the most popular JavaScript frameworks at the moment according to several surveys and reports. Besides that, it is always a good investment of your time to regularly learn new languages, frameworks. The more you get acquainted with different technologies, different programming languages, different frameworks, etc., the easier it will be to learn new things. You will get better and faster in learning and this is probably one of the most valuable skills you will need when you are working in sofware development. Maybe you consider yourself as a backend developer only, but even then it is wise to take a look at technologies which may seem to be out of your scope initially. It will broaden your overall view of software development and you will become a more T-shaped professional. Enough introduction for now, let’s get started with React!

The real advantage of React is being able to create reusable containers. In this part, we’re going to move the code out of App.js and into a container called Main.js which will hold our primary. Get your free course on React: Today I’m going to be discussing 6 of the plugins I use for Webstorm when I’m building React apps. With PhpStorm, you can develop modern web, mobile, and desktop applications with JavaScript and Node.js. PhpStorm also supports React, Angular, Vue.js, and other frameworks and provides tight integration with various tools for web development. React Templates integration. React Native Console plugin for WebStorm Notice: this plugin doesn't provide step to step debug function, to do so, please using WebStorm/PhpStorm/GoLand or IntelliJ IDEA Ultimate, see: Developing mobile apps with React Native in WebStorm.

2. Getting Started

Our first starting point is the official React website of course. When we take a look at the website, we notice that a lot of good information is already present in order to get started. Rosetta stone totale mac torrent. The most accessible item is probably the hands-on tutorial. This tutorial will guide you in creating a simplified version of the classic Tic-Tac-Toe game (for the Dutch readers: Boter-kaas-en-eieren).

Since React is a JavaScript framework, it will be necessary to have some knowledge of JavaScript basics if you do not have it already. A good starting point for getting a grasp of the JavaScript basics can be found at the Mozilla website page A re-introduction to JavaScript (JS tutorial). You can find many more resources about JavaScript here, but the re-introduction will be sufficient for using the React tutorial.

3. Development Environment

Back to the React tutorial. You will need a development environment. The easy way is to write code in your browser. Nothing needs to be setup and you can start immediately with the tutorial. We did not follow this path, but decided to setup a local development environment.

A prerequisite for using React locally, is to have Node.js installed. We navigate to the Node.js download page. Dependent on the Operating System you are using, you can choose the pre-built installer for your platform. We are using Ubuntu and wanted to use the package manager. In that case, you click the link Installing Node.js via package manager at the bottom of the page. Next, choose for Debian and Ubuntu based Linux distributions, Enterprise Linux/Fedora and Snap packages. Finally, you end up to the page where the instructions are present for installing via snap.

We choose to install the latest LTS version which is a v12.x version at the time of writing. Execute the following commands:

3.1 IntelliJ IDE

Now, which IDE will you be using? We are in favor of JetBrains IDE’s and mainly do Java development. First choice is IntelliJ in order to use as an IDE. Instructions for configuring IntelliJ for React development are available at the JetBrains website. However, be aware that you will need the Ultimate Edtion of IntelliJ for proper React support. The Community Edition will not be sufficient for your React development.

3.2 WebStorm IDE

When you do not have the Ultimate Edition of IntelliJ, you can use WebStorm as an IDE. WebStorm is the JetBrains IDE for JavaScript development. Beware that there is no Community version for WebStorm. So, when you are seriously about your React development, you will have to buy a license. The other alternative is to make use of the 30 day free evaluation version after each release. There are three releases each year, so for evaluating it, this will be sufficient.

Yeh rishta kya kehlata hai 1 may 2012. Creating a React app with WebStorm is very easy. You create a new Project and choose React App. In WebStorm you will have syntax highlighting and autocompletion for example, which makes your development life a lot easier.

4. Continue the Tutorial

When you have installed and chosen the IDE you will use, you can continue the tutorial as described at the React website. It is very intuitive. Follow the advice and do not copy and paste the solutions, but do the typing yourself. It may seem a waste of time, but often this will help you in learning some details you otherwise would not see when you just copy and paste.

At the end of the tutorial, a number of exercises are left to be executed. It is advised to finish those assignments. Making changes yourself will help you in understanding the framework much better. We are not explaining the solutions to the assignments here, but we do provide them at GitHub. So, first try to solve them yourselves and when you are completely stuck, you can take a look at our solutions. Below, we provide links to the commits with the solutions.

5. Conclusion

Idea React

Intellij Idea Tutorial

The provided documentation at the React website is a very good place to start when you want to learn React. The tutorial will give you immediately some hands-on experience with React and the assignments at the end of the tutorial will help you even further. Besides that, it is also advised to take a closer look at the other documentation at the React website. This will give you some more insight of what React is all about. And at the end, practicing is the only other way to gain experience.