New Lessons - Githubissues

kay-is commented 6 years ago

While updating to React 16 I saw that some new lessons could be nice.

Styling is only implicitly touched.

Context wasn't a public API until version 16, but now it is.

Some patterns could be nice. Things like Dependency Injection, Higher Order Components and Render Props.

brandonros commented 6 years ago

Would something about unit testing be worth adding?

kay-is commented 6 years ago

Sure, if you can get Jest running in the browser :)

brandonros commented 6 years ago

Why can't you use just Jasmine? I was under the impression it works fine in the browser on its own.

kay-is commented 6 years ago

I didn't look too much into testing or Jest, but I had the impression it was a one-stop-shop.

I just read that you can use Jest assertions and mocks with Jasmine, so this is an option.

Now I just need to find some resources on what makes a good React unit test :D I mean I can write a bunch, but chances are that they don't add much value.

brandonros commented 6 years ago

Give yourself some credit mate. Just seeing how to import/mock/stub stuff will be a huge help. It'll really take this repo "to the next level" in my eyes. One stop shop. :)

kay-is commented 6 years ago

<!DOCTYPE html>

<script src="https://unpkg.com/react@16.4.0/umd/react.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script src="https://unpkg.com/react-test-renderer@16.4.1/umd/react-test-renderer-shallow.development.js"></script>
<script src="https://unpkg.com/expect@%3C21/umd/expect.min.js"></script>

<script src="https://unpkg.com/mocha@5.2.0/mocha.js"></script>

<link href="https://unpkg.com/mocha@5.2.0/mocha.css" rel="stylesheet" />

<script type="text/babel">
mocha.setup("bdd");

const MyComponent = () => (
  <div>
    <span className="heading">Title</span>
  </div>
);

describe("Component", () => {
  it("Should render", () => {
    const renderer = new ReactShallowRenderer();
    renderer.render(<MyComponent />);
    const result = renderer.getRenderOutput();

    expect(result.type).toBe("div");
    expect(result.props.children).toEqual(<span className="heading">Title</span>);
  })
});

    mocha.checkLeaks();
    mocha.run();
</script>

<div id="mocha"></div>

Got a first draft done with Mocha.

mdsaleemj commented 6 years ago

Hey @kay-is , why are you not using ES6 code, since it has become defacto for learning react .Even facebook recommends that . i know ES6 syntax will add learning complexity for beginners. just curious to know .

kay-is commented 6 years ago

@mdsaleemj I thought about this, but I'm not sure it would much value. I mostly talk about how React concepts relate to basic JavaScript constructs, which are already part of ES5 (objects, functions etc).

But yeah, I guess this is something to consider in a year or two, when basically all JS devs know about >ES5 constructs like classes etc.

justinformentin commented 6 years ago

I think it would be worth it. In my eyes, two very important issues arise when using ES5.

First off, most instructions online nowadays are ES6. Documentation, tutorials, you name it. Second, when getting a job, having ES6 in your projects is miles better than ES5. Will it matter all the time? Absolutely not. But when it does matter, it's important. I've seen people get passed on jobs because "Why are they still writing ES5?"

Related to the fact that most things about React are in ES6 now, teaching someone something in ES5 is just delaying the inevitable. It's an improvement, and if you're a newbie and starting from the ground up, learning best practices and the tricks for ES6 are easiest right now, instead of learning ES5, and then having to go and figure out ES6 as well.

brandonros commented 6 years ago

@justinformentin I kind of disagree. I cling to ES5 because there is a lot less magic. I find myself having to paste ES6 blobs of code into the Babel REPL to see what it transpiles to. It's kind of refreshing that this repo shows React in an alternative fashion that has less tricks.

But, you aren't wrong that the world has left ES5 behind and is ES6 focused. I feel my opinion is an unpopular one.

kay-is commented 6 years ago

My assumption is: If you know ES6 then you know ES5, but not the other way around.

So writing for ES6 would exclude people, but writing for ES5 wouldn't.

babysophia1960 commented 3 years ago

Fff

kay-is / react-from-zero

New Lessons #10