tyroprogrammer / learn-react-app
- суббота, 2 февраля 2019 г. в 00:20:39
JavaScript
Application that will help you learn React fundamentals. Install this application locally - there's guided tutorial as well as guided exercises.
The goal of this tutorial is to quickly get you off the ground with React
concepts. This tutorial has hands on exercises which I consider to be the most important part of this tutorial.
The way this tutorial works is that first you have to checkout this project on your computer, and run the application locally. Then open the application on a browser and you can go through the tutorial as you like.
Checkout the project to your computer using git
:
git clone https://github.com/tyroprogrammer/learn-react-app.git
If you don't already have yarn
installed on your local machine please execute below command to install yarn
:
npm install -g yarn
On the root directory of the project please execute below command to install all the project dependencies:
yarn install
On the root directory of the project please execute below command to start the tutorial application:
yarn start
After this is complete, the application will be deployed on port 3000
. Open a browser and navigate to localhost:3000
.
Tutorial on this application are fairly straightforward to follow. Each tutorial has one or more exercises. You'll see once you are in the tutorial.
The exercise panel has split view. The left hand side of the screen has your solution rendered and the right hand side of the screen has the target solution. Right above the exercise panel you'll see location of exercise files.
Please open the execise file on your favorite editor (VS Code, Atom, Sublime, IntelliJ etc.) and start making changes by following the instructions. Exercise files are heavily commented. Read through the comments and you should be able to write up the solution. If you have any confusion you can refer to the solution file for that exercise. Every time you make changes to the exercise file and save it, the browser will reload automatically reflecting your changes.
Most comments in the exercise files starts with one of the below signs. This is to help you understand what you should do to the code immediately following this comments.
🧭 - Compass - When the description of change is not enough, compass will give you more direction. You will find it alongside the pencil when more elaborate instruction is deemed necessary.
You don't really need yarn. Just use npm if you like.
This tutorial has been tested in Chrome only so I highly recommend you use Chrome.
Anything really (Sublime, Atom, VS Code, IntelliJ) - its your preference.
The easiest way is to just revert back to the previous version on your editor. If you want to start anew, then just checkout that particular file from github again using something like:
git checkout HEAD -- exercise/01-helloWorld.js
If you went through the exercise and saw some inconsistencies or if you have an idea to make the overall tutorial better please feel free to open a PR.