Get Ready To React 🚀 - Workshop

This repo contains all the materials you need to follow our Workshop. It is created for the event Get Ready To React, brought you by Thessaloniki's ReactJS Meetup (Greece).

Table of Contents

We will build a small ReactJS application which you will be able to complete step-by-step. The workshop will cover the following:

1. Build your first ReactJS application from scratch.
2. Learn how to structure your project with reusable components.
3. Make your app interactive with ReduxJS.
4. Add basic routing with React Router.
5. Find out how to test your components for free using snapshots.

Who Is this Workshop For?

We tried to make this workshop useful for many categories of developers.

In order to fully understand the key concepts behind this tutorial you should be familiar with Javascript, HTML and CSS. In our examples we will use the ES6 syntax, such as modules and fat arrow functions. We will also use a variety of npm packages.

If you don't have any previous experience with the ReactJS ecosystem or if you are working with another framework, you will learn all the basics and you will be able to compare it with your current development environment.

If you are not a Javascript developer but you work with a different language, you will have the chance to meet something completely new. Maybe you should spend some time before/after the workshop to catch up the missing parts.

Already a ReactJS developer? You're free to participate making this Workshop even better.

Prerequisites

You have to prepare your laptop before you start. Here's a checklist with the things that you need to continue:

• Windows / Mac / Linux machine
• Install a text editor, we will use VS Code
• Clone this repo
• Download & Install Node.js 6+
• Upgrade npm: In the terminal/command prompth type the following command: npm install -g npm
• Install Yarn using npm install -g yarn
• You should be able to type yarn --version in the terminal and get the installed version.
• Create an account in TheMovieDatabase and generate an api key.

To continue ☎ press 0, or checkout step-0 👍

Resources

Here are some useful pages about the tools and libraries in this Workshop:

• ReactJS Official Docs
• JSX Basics
• Thinking In React
• ES6 Guide
• Redux Official Docs
• React Router
• Yarn Package Manager
• Flow Static Type Checker
• Jest Testing Framework
• Webpack Module Bundler

Contribute

Please provide improvements, typos and fixes via PR. You can create issues if you find something 😊