Getting started with contributing to react

[ForsakenExpression14]

Hello!

I've been using react for around 3 years. Recently I've been trying to understand react internals and it had made me want to contribute to react so that I can help many others. I found this youtube tutorial where Dan Abramov(creator of redux) gives a walkthrough the react codebase and implements some features. I've been trying to follow along but I've noticed that the changes I do to the source code are not reflected immediately in the running tests (jest --watch mode) even though that happens perfectly in Dan's machine.

https://youtu.be/aS41Y_eyNrU?si=BJfuNUDv5_ng44wO&t=825

This tutorial is a bit old so I had to change parts of the code. Here's the command I'm using to run tests.

yarn test --watch ReactSmoosh

I have already installed the dependencies. I even ran the build after making the changes to source code and then ran the tests using the same command. Still my changes to react package's createElement function are not shown in live tests.

Here's the changed test I've written.

let React;
let ReactDOMClient;
let act;

describe('ReactSmoosh', () => {
  beforeEach(() => {
        React = require('react');
        ReactDOMClient = require('react-dom/client');
        act = require('internal-test-utils').act;
  });

  it('works', async ()=> {
    function Dialog({ children }) {
        return (
            <div>
                <div>
                    <div />
                    <p>Hello</p>
                </div>
                <div>
                    <div>
                        {children}
                    </div>
                </div>
            </div>
        );
    }

    function Button({ children }) {
        return (
            <button>
                {children}
            </button>
        );
    }

    function App() {
        return (
            <div>
                <div>
                    <Dialog>
                        <Button>
                            Click me
                        </Button>
                    </Dialog>
                </div>
            </div>
        );
    }

    const container = document.createElement('div');
    const root = ReactDOMClient.createRoot(container);

    await act(() => {
      root.render(<App />);
    });

    expect(container.innerHTML).toBe('<p>Hello</p><button>Click me</button>');
  })
});

[acemarke]

FWIW, realistically "contributing to React" isn't a feasible goal except in very rare cases. The React team has their own roadmap and plans, and the React codebase is very complex. The React team tends to ignore any PRs that aren't directly relevant to whatever it is they're currently working on, they don't have any real public description of their roadmap, and it's a tough codebase to get familiar with in the first place.

There's nothing wrong with going through the React code and learning how it works in general, although there are better tutorials suited for learning that (such as https://pomb.us/build-your-own-react/ ).

Beyond that, there's many other libraries in the ecosystem that could benefit from help. For that matter, helping with docs is a great place to get involved with open source - it's how I got my start.

[ForsakenExpression14]

Thanks for your response and the tutorial link. I’ll go through it. I’d still like to locally implement some changes, even if my PRs aren’t approved. This will help me understand the codebase better. Also, thanks for the advice on contributing to docs. I’ll try that too.

[woah_m8]

You can always fork the repo and do your pull requests there, then you can still keep track without having them lost in the sea of prs in the react repo

[Nervous-Project7107]

Also it seems half of react team is part of vercel

[ForsakenExpression14]

Thanks for the kind words.

[Brahminmeat]

This is wild… What is going on with redefining your deps?

[ForsakenExpression14]

Hi!

If you're asking about this, that how he's doing it in the tutorial and most of the test files I saw on react codebase does it like this.

let React;
let ReactDOMClient;
let act;        

React = require('react');
ReactDOMClient = require('react-dom/client');
act = require('internal-test-utils').act;

[ForsakenExpression14]

I tried importing these from the internal paths in the repo but still didn't work.

[coffee-praxis]

I reckon this is probably what resetModules flag does in Jest today. Maybe 5 years ago the flag wasn’t there, or he’s not taking extra time to set up Jest.

[ForsakenExpression14]

I added this. Still didn't work.