4geeksacademy / react-tutorial-exercises Goto Github PK

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

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.

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.

No result picture for 1.7

https://github.com/4GeeksAcademy/react-exercises/blob/7c7c73a647e86815f32eb9d7e29c620563d34006/exercises/01.2-hello-jsx/tests.js#L12

Does not pass:

Passes:

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

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

Shows error when press TEST

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

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

Also, "elephant" is misspelled.

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.

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:

3. Run the exercises like a normal student using $ bc run:exercises
4. Open website in your browser and navegate to the particular exercises that you want to test (just like a normal student would do).
5. 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.

Once the user presses the button to test and exercises, if the test is completed successfully the /bc.json file should store that exercise in the list of done exercises.

That way e know exactly what exercises are missing and we can show that to the student.

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/]

Integrate the project with all-contributors and the all-contributors-cli.

New contributors:

• waspothegreat: documentation

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)

No result picture