Giter VIP home page Giter VIP logo

4geeksacademy / react-tutorial-exercises Goto Github PK

View Code? Open in Web Editor NEW
410.0 8.0 318.0 20.52 MB

Learn and practice React.js in this interactive tutorial with dozens of react exercises.

Home Page: https://4geeks.com/en/interactive-exercises/react-js-exercises

License: Other

JavaScript 99.53% Dockerfile 0.47%
react-exercise react-tutorial reactjs react-interactive-tutorial react-autograded learn-to-code learn-reactjs reactjs-exercises reactjs-tutorial exercise

react-tutorial-exercises's Introduction

React Interactive Tutorial & Exercises

By @alesanchezr and other contributors at 4Geeks Academy

last commit build by developers build by developers

Estas instrucciones estรกn disponibles en ๐Ÿ‡ช๐Ÿ‡ธ espaรฑol ๐Ÿ‡ช๐Ÿ‡ธ

You can find lots of free interactive/autograded tutorials online, but there are very few about React.js. That's why we decided to create a comprehensive selection of exercises for developers who are interested in learning React.js.

These exercises can be done by both junior and senior developers and are intended to be built through collaboration. We need your help!

If you find any bugs or spelling issues, please contribute and report them, and we will correct them.

One click installation (recommended):

You can open these exercises in just a few seconds by clicking: Open in Codespaces (recommended) or Open in Gitpod.

Once you have VSCode open, the LearnPack exercises should start automatically. If exercises don't run automatically, you can try typing on your terminal: $ learnpack start

Local installation:

Clone the repository in your local environment and follow the steps below:

  1. Make sure you have the learnpack-cli installed and node.js version 14+. This is the command to install the learnpack-cli:
$ npm i learnpack -g
  1. Download the React exercises by cloning the project or downloading the zip from GitHub.

Note: Once you finish downloading, make sure you are in the right folder (you will find the subdirectory "exercises").

  1. Start the tutorial/exercises by running the following command from the root of the project:
$ npm i [email protected] -g
$ learnpack plugins:install learnpack-react
$ learnpack start

How are the exercises organized?

Each exercise is a small React application containing the following files:

  1. app.js: represents the entry file for the exercise.
  2. README.md: contains exercise instructions.
  3. test.js: you don't have to open this file, it contains the testing script for the exercise.

Note: The exercises have automatic grading, but it's very rigid and strict, my recommendation is to not take the tests too serious and use them only as a suggestion, or you may get frustrated.

Contributors

Thanks goes to these wonderful people (emoji key):

  1. Alejandro Sanchez (alesanchezr), contribution: (coder) ๐Ÿ’ป, (idea) ๐Ÿค”, (build-tests) โš ๏ธ, (pull-request-review) ๐Ÿ‘€, (build-tutorial) โœ…, (documentation) ๐Ÿ“–

  2. Paolo (plucodev), contribution: (bug reports) ๐Ÿ›, (coder) ๐Ÿ’ป, (translation) ๐ŸŒŽ

  3. Marco Gรณmez (marcogonzalo), contribution: (bug reports) ๐Ÿ›, (translation) ๐ŸŒŽ

This project follows the all-contributors specification. Contributions of any kind are welcome!

This and many other exercises are built by students as part of the 4Geeks Academy Coding Bootcamp by Alejandro Sรกnchez and many other contributors. Find out more about our Full Stack Developer Course, and Data Science Bootcamp.

react-tutorial-exercises's People

Contributors

abreuy avatar ac-srikanth avatar adityatarale avatar alesanchezr avatar anggiealava avatar brianboudrioux avatar camilocoo avatar charlytoc avatar colbywtaylor avatar curilen avatar dariatsvetkova avatar darioquintanilla2109 avatar dsilva06 avatar elviraqdp avatar fsdexter avatar gmdeep avatar hexbreak avatar josemoracard avatar kant avatar kiddopro avatar lorenagubaira avatar marcogonzalo avatar plucodev avatar randy8891 avatar sadiel0 avatar tommygonzaleza avatar umikami avatar waspothegreat avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

react-tutorial-exercises's Issues

Exercise 1.06

const animalsInHTML = animals.map((animal, i) => {

"animal" needs to be "animals" to get the desired output.

Also, "elephant" is misspelled.

Result card in 01.4

In the end of the task it is a result card.
But actually it is wrong card there, without all information from "const data"
Should be with Bob Dylan info

screen shot 2018-10-23 at 4 30 20 pm

ENHANCEMENT: Help Button to Show 4 Step Tutorial & Reminder to Deliver

Reminder to Deliver

When I was completing my very first exercise #01.1-hello-world & I was satisfied with my code, I was quick to want to continue to the next step. My first attempt was to select the Next link so I did.

Little did I know I completely forgot step #4 of the tutorial that mentions to deliver your code using the command $ bc deliver:exercises.

It would be great if there was a reminder or some kind of validation when you don't type the command $ bc deliver:exercises for forgetful people like me. ๐Ÿ˜…

Help Button to Show 4 Step Tutorial

As I was on exercise #01.2-hello-jsx I had a feeling something was missing or wrong from the previous exercise. It's as if pressing Next to continue to the next exercise felt too easy! So naturally I selected the Previous link to go back and check my code.

This is when I noticed the 4 step tutorial showed up again. At first I wanted to report that as an issue but instead I am recommending an approach to maybe add some kind of question icon (maybe with HELP text) that when selected the 4 step tutorial shows up whenever you need help!

I figured this would make sense since the container on the left and the split pane container on the right will remain the same for all exercises, the tutorial that highlights the containers should & makes sense to be seen from any exercise.

02.1 Mapping array to <li>

Hi;

the exercise proposes us to tweak the function over the array below:
const animals = [ { label: 'Horse' }, { label: 'Turtle' }, { label: 'Elephan' }, { label: 'Monkey' } ];

but the video brings an answer for an different array:
const animals = ["Horse", "Turtle", "Elephant", "Monkey"];

The consequence is that the answer to the exercise given in the video

const animalsInHTML = animals.map((singleAnimal, i) => {
	return <li key={i}>{singleAnimal}</li>;
});

does not match as a right answer (check screenshot at https://i.imgur.com/eEEOvkC.png)

1.7

No result picture for 1.7
screenshot_30

02.2

Shows error when press TEST

screen shot 2018-10-23 at 5 27 48 pm

Review grammar and spelling

  1. The repository contains one exercises folder with each exercise inside in another folder.
  2. Each exercise contains a README.md file with the instructions on how to solve it.
  3. All the instructions need to be reviewed and correct any grammar or spelling issue.

How to do you Pull Request?

  1. Fork the repository.
  2. Clone it to your computer if you want to work locally.
  3. Start the review process and edit all the README.md files you consider.
  4. Commit all changes.
  5. Push to your own repository.
  6. Go to your repository in github a look for the push request button.

Here is more on how to do it (https://yangsu.github.io/pull-request-tutorial/)[https://yangsu.github.io/pull-request-tutorial/]

Auto grading missing for exercise 2.6 and 2.7

The exercises 02.6-conditional-rendering, 02.7-conditional-rendering-ii have a tests.js with the unit tests to confirm if the exercise was well done.

The fist two tests are ok, but we need an additional test with a snapshot that checks for the expected output. Very similar to the tests.js that are already done in the previous exercises.

To complete this feature you will have to update the tests.js file in both exercises folders and add a new test using toMatchInlineSnapshot.

How to complete this issue?

  1. Download the exercises like a normal student.
  2. Using your local text editor (atom, sublime, etc.) open the tests.js file on the particular exercise you are working on and edit.

Now, test your tests.js file for that particular exercise following the steps bellow:

  1. Run the exercises like a normal student using $ bc run:exercises
  2. Open website in your browser and navegate to the particular exercises that you want to test (just like a normal student would do).
  3. Click build and then test, your tests.js script will run.

One you are happy with your code copy the content of your tests.js files and edit the using your local text editor open the tests.js file on that particular exercise. tests.js files in this repository. It will automatically create a pull request for you.

Cover the following topics with exercises

Hey @teachers there are already 17 exercises on the react.js exercises.

The current exercises are covering the following topics:

  • JSX Intruction.
  • Using variables in JSX.
  • ReactDOM.render().
  • JSX html arrays and keys.
  • Mapping arrays with JSX.
    • Mapping inline on the return statement.
  • Creating components.
  • Conditional rendering.
    • Conditional rendering inline (ternary) on the returning statment.
  • Component properties and validations.
    • Proptypes

The following topics are scheduled for version 0.2

  • Class components.
  • Component State.
  • State vs Props.
  • Live cycle methods
    • constructor
    • componentDidMount
    • render
    • getDerivatedStateFromProps

Exercise #01.1-hello-world: Instructions Container auto scrolls up

On Exercise #1.1-hello-world the instructions container <div class="bc-readme"> scrolls up whenever you type or delete a character on the container <div class="Pane vertical Pane2 " where you enter/edit code.

This means you have to scroll down to the bottom of the instructions container every time you edit your code!

GIF of issue below.

01 1-hello-world

File download:exercises is unavailable

When executing bc download:exercises I get the following message and the exercises don't download:
File download:exercises is unavailable.

I'm using MacOS Mojave.

2.07 - Already solved

The exercise 2.07 loads and is already solved. The current code generates 3 alerts - red, orange, and green.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.