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. 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).
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:
$ curl -sL https://deb.nodesource.com/setup_lts.x | sudo -E bash - $ sudo apt-get install -y nodejs
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
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.
- Display the location for each move in the format (col, row) in the move history list.
- Bold the currently selected item in the move list.
- Rewrite Board to use two loops to make the squares instead of hardcoding them.
- Add a toggle button that lets you sort the moves in either ascending or descending order.
- When someone wins, highlight the three squares that caused the win.
- When no one wins, display a message about the result being a draw.
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.