Lots and Lots of Patience – Release 0.1

For Release 0.1, I decided to work on a couple of issues from Facebook React and ReactJS.org.

What is React?

React (also known as React.js or ReactJS) is a JavaScript library for building user interfaces. It is maintained by Facebook . React can be used as a base in the development of single-page or mobile applications. 

Firstly, to get the ReactJS.org website run locally on the web browser took alot of time and patience. The prerequisites to run this locally was to have Node.js installed and Yarn.

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 install

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.

yarn dev

And then it opened the reactjs.org website in my browser.

rc 6

 

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.

Installing create-react-app

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.

react app 1

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:

npm test

It ran the basic tests to give me this:

rc 2

React uses Jest in its new version as a testing utility. Before using shallow renderer, I wanted to Enzyme as a testing utility.  ‘Jest’ is a JavaScript unit testing framework, used by Facebook to test services and React applications. ‘Enzyme’ is a JavaScript Testing utility for React that makes it easier to assert, manipulate, and traverse your React Components’ output. To install Enzyme, I issued the command:

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.

rc 3

To add more tests, I looked into the App.js file and decided to test some of the HTML elements in it.

rc 7

After adding the tests, I issued the command to check the test and its coverage:

npm test -- --coverage

rc 8

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 :

https://deploy-preview-1597–reactjs.netlify.com/docs/shallow-renderer.html

Conclusion:

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!

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.