Ajdin Imsirovic - React from Scratch A friendly guide for absolute beginners

If youre starting this book, I expect you at least have Node.js and NPM installed on your machine.

If youre unsure of what Node.js is or how it works, please refer to this article.

If you need to install Node.js on your machine, please read my article on . Although the software versions might be different, the basics of this installation should be almost the same.

For more info, please refer to the official Node.js website.

Im also assuming that you did use a code editor before, and that youre comfortable, or at least familiar with VS Code. If not, then this book might be too advanced for you - but still, give it a try. Ive written it with the intention of making it accessible even for almost a complete web development beginner.

Still, a level of knowledge of HTML, CSS, and JS will go a long way.

The more you know the above three technologies, the easier this book will be.

Addendum: Ive decided to focus on working with CodeSandbox a lot more in this book. The reason why: its really easy to hit the ground running, for the following reasons:

• You only need a browser and an internet connection
• You can easily fork whatever CodeSandbox project is needed
• Its got almost the same workflow as a local VS Code setup - so the switch is almost seamless
• Youve got built-in GitHub support, meaning: you can commit your changes directly from CodeSandbox, which makes for a very smooth workflow

What this means for you? Well, it means that therell be an interesting mix of local development and online PaaS-powered development in this book. This will not make it harder to learn the subject, though. On the contrary, it should make it easier, more productive, and less time-consuming. This is the result of my constant striving of building as good of learning resources as possible.

Here goes the not-so-obligatory information that most people skip - but, I kept it really short and sweet - under one page.

Give it a try - Ive tried my best to give you some context in this section and some of my thoughts before we go into the topic of the book.

Here goes.

Ive tried my best to make this book a success.

But, Im only another guy, and, like the vast majority of people, I do make mistakes.

I hope that you, dear reader, will be able to appreciate the intention and the effort I have put into writing this book. It is a product of many, many hours spent in front of a computer monitor, either writing about code, thinking about code, debugging some code, or just plain coding. I dont take this effort lightly. Its my source of pride - and the reason why I feel competent to write this book.

Id say Im way past the 10 thousand hours of deliberate practice, the concept popularised by Malcolm Gladwell in his book Outliers.

So, who am I and why should you listen to my advice?

Well, Ive already sort of answered that question above. Im just another guy; a self-taught web developer who has spent years mastering my craft.

In some parts of the web development world, Im a seasoned veteran. In some other parts of it, Im a newbie.

Im not a know-it-all, if such a person exists.

But I have dedicated a large part of my professional career to writing tutorials on web development, writing books about it, and thinking about best ways to transfer knowledge. Reading up on it too!

So Id say Ive become competent to teach this subject, based on my experience.

If you find this book not to your liking, luckily, Leanpub has a really generous 60-day return policy. You might say thats as risk-free as it can get. You cant really say that it cost a fortune to begin with, and the return policy is working in your favor anyway. So if you strongly feel that this book is doing you no good - please, by all means, return it. No reason to get worked up about it, either on my side or on yours.

If you have complaints about the book, please write to me at ajdin@codingexercises.com and Ill do my best to deal with the issue.

Also, any comments and kind words, as well as harsh criticisms, are all welcome.

Kind words from readers mean a lot.

Harsh criticisms, while I do find them usually not really neccessary, are a way to point me in the right direction - and ultimately help me become a better technical writer and a better developer.

So I thank you either way.

Chapter 1: Building the simplest possible React app

1.0 What is React?

React is a library for the web, written in the JavaScript language.

The purpose of this library is to code the UI of our websites.

1.1 Install React Developer Tools in your Browser

Lets get right into it.

To be more efficient working with React, I highly recommend installing React Developer Tools in your browser of choice.

Mine is Chrome, and since it is by far the most popular browser, its the only one well cover.

Lets visit the Chrome extensions website, and navigate to React Developer Tools.

Well install it by clicking on the Add to Chrome button.

React Developer Tools extension on Chrome Web Store

Once its intalled in your browser, you have it available in the list of chrome extensions, and to have a handy shortcut icon for easy access, you can click the gray puzzle piece icon in the top right corner of the Chrome browser. This will open a dropdown where you can then pin it for the extensions shortut icon to appear.

Enabling React Developer Tools in Chrome

Next, lets open a live site that we know for a fact is using React: the official docs site: https://reactjs.org/.

Notice how the React extensions icon changes color from a washed out, light gray version (on sites where React is not used), to the full-color version on sites like the official docs site (where React is used).

1.2 Lets build the simplest possible React app

To do this, well use a very popular tool: Create React App.

Before we can use this tool, we need to be sure that our system has the minimal required versions of Node.js and NPM installed, so lets open a folder where we want to install our React app, and lets open the bash console, pointing at this folder.

Now well verify our versions of Node.js and NPM are within minimum requirements:

1 node --version && npm --version