For Release 0.1, I decided to work on a couple of issues from Facebook React and ReactJS.org.
What is React?
I had installed Node.js a year ago and thought that it should be fine. But it did not work and I ran into a lot of errors. I updated Node.js by installing it again. You can download the latest version of Node.js here.
I followed the instructions given on the Github page of ReactJs.org. After forking the repository and cloning the files, I opened the folder reactjs-master and renamed it to reactjs.org. For some reason yarn could not install if the folder was named reactjs-master. Since I had already downloaded and updated Node.js, I issued the following command to install Yarn.
Yarn is an open-source npm client that was developed at Facebook and improves on many aspects of the standard npm client. React works fine npm but I think they use Yarn since both React and Yarn are developed by facebook. You can know more about Yarn here.
After installing Yarn successfully, I issued the following the commands to make the website run locally on my machine.
And then it opened the reactjs.org website in my browser.
For Release 0.1, I chose to work on an issue in Reactjs.org – #1572. This issue was about documenting more details in regards to Test Renderer and Shallow Renderer . Since this is a vast topic, I only worked on Shallow Renderer for release 0.1.
What is Shallow Renderer?
Shallow rendering is used for testing react components. It lets you render a component “one level deep” and assert facts about what its render method returns, without worrying about the behavior of child components, which are not instantiated or rendered. This does not require a DOM.
Since it is a testing element, I created a react app to test shallow renderer. To create a react app I used the following commands.
npm install -g create-react-app
create-react-app node package helps to set up a React project. Install create-react-app node package globally using the following command.
Creating The Project
The project can be created using create-react-app. Use the following command to create the project.
npx create-react-app react-shallow
Where react-shallow is my app name. On issuing this command a folder is created called react-shallow which is the project folder. In order to run the app locally, I used the following commands.
cd react-shallow npm start
The new react app opened up immediately in my browser.
Next, I had to run tests with shallow rendering. On creating a new project with create-react-app, a basic test for App.js component called App.test.js is already coded in it. To run the test, I issued the command:
It ran the basic tests to give me this:
npm i enzyme enzyme-adapter-react-16 react-test-renderer
Now that I have Jest and Enzyme as a testing utility, I can modify the code in App.test.js to test it using shallow renderer and test it using npm test.
To add more tests, I looked into the App.js file and decided to test some of the HTML elements in it.
After adding the tests, I issued the command to check the test and its coverage:
npm test -- --coverage
After a successful testing of my react app, I created a pull request in reference to my issue : #1597
You can check out the preview of the page that I updated here :
I definitely learnt a lot while doing this, not only coding wise but it taught me how to be patient. Nothing was installing on my computer for a couple of days. After a lot of ‘nigging and nagging’ around with it, I got some stuff to install which was a relief. But because of this I could not make it class to present. Yarn, Jest, Enzyme, Create react app – these were all just names that I used to hear in class but I never actually looked into it or found out more about it. Now that I have experience learning and using it through this Release, I know what they were talking about. 🙂
That’s all for now, Happy Coding!