{"data":{"content":{"fields":{"slug":"/labs/your-first-react-component","type":"lab"},"frontmatter":{"title":"Your First React Component"},"html":"

Lab Two - Your First React Component

\n

Switch to Lab02

\n\n
cd ../ # presuming still in previous lab\ncd lab-02\nyarn start
\n

What are we trying to do?

\n

The first thing we need in our Timesheet application is a listing of all the projects that an employee can be working on. We want a table with one row for each Project.

\n

Many times in React it’s helpful to build things starting at the bottom and building your way upwards - we’re going to do this here by building a row, then a table, then a container.

\n

Create a component that will render a Project row

\n\n
src/projects/ProjectRow.js
\n
import React from 'react';\nimport PropTypes from 'prop-types';
\n\n
class ProjectRow extends React.Component {\n  \n}\n\nexport default ProjectRow;
\n\n
  render() {\n    const { project } = this.props;\n    \n    return (\n      <tr>\n        <td>{project.name}</td>\n        <td>{project.description}</td>\n      </tr>\n    );\n  }
\n\n
ProjectRow.propTypes = {\n  project: PropTypes.object.isRequired\n};
\n
\n When complete, click here to see what the entire module should look like:\n
import React from 'react';\nimport PropTypes from 'prop-types';\n\nclass ProjectRow extends React.Component {\n  render() {\n    const { project } = this.props;\n\n    return (\n      <tr>\n        <td>{project.name}</td>\n        <td>{project.description}</td>\n      </tr>\n    );\n  }\n}\n\nProjectRow.propTypes = {\n  project: PropTypes.object.isRequired\n};\n\nexport default ProjectRow;
\n
\n

 

\n

Create a table component

\n\n
src/projects/ProjectTable.js
\n
import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Table } from 'react-bootstrap';\nimport ProjectRow from './ProjectRow';
\n\n
class ProjectTable extends React.Component {\n}\n\nexport default ProjectTable;
\n\n
render() {\n  const { projects } = this.props;\n\n  return (\n    <Table bordered striped>\n      <thead>\n        <tr>\n          <th>Name</th>\n          <th>Description</th>\n        </tr>\n      </thead>\n      <tbody>\n        {projects.map(project => (\n          <ProjectRow project={ project } key={ project._id }/>\n        ))}\n      </tbody>\n    </Table>\n  );\n}
\n\n
ProjectTable.defaultProps = {\n  projects: []\n};\n\nProjectTable.propTypes = {\n  projects: PropTypes.array\n};
\n
\n When complete, click here to see what the entire module should look like:\n
import React from 'react';\nimport PropTypes from 'prop-types';\nimport { Table } from 'react-bootstrap';\nimport ProjectRow from './ProjectRow';\n\nclass ProjectTable extends React.Component {\n  render() {\n    const { projects } = this.props;\n\n    return (\n      <Table bordered striped>\n        <thead>\n          <tr>\n            <th>Name</th>\n            <th>Description</th>\n          </tr>\n        </thead>\n        <tbody>\n          {projects.map(project => (\n            <ProjectRow project={ project } key={ project._id }/>\n          ))}\n        </tbody>\n      </Table>\n    );\n  }\n}\n\nProjectTable.defaultProps = {\n  projects: []\n};\n\nProjectTable.propTypes = {\n  projects: PropTypes.array.isRequired\n};\n\nexport default ProjectTable;
\n
\n

 

\n

Create a component to manage the data

\n\n
src/projects/Projects.js
\n
import React from 'react';\nimport ProjectTable from './ProjectTable';
\n\n
class Projects extends React.Component {\n  \n}\n\nexport default Projects;
\n\n
state = {\n  projects: [\n    {\n      _id: 1,\n      name: 'Project1',\n      description: 'This is your first project'\n    },\n    {\n      _id: 2,\n      name: 'Project2',\n      description: 'This is your second project'\n    },\n    {\n      _id: 3,\n      name: 'Project3',\n      description: 'This is the third project'\n    }\n  ]\n};
\n\n
  render() {\n    const { projects } = this.state;\n  \n    return (\n      <div>\n        <h1>Projects</h1>\n        <ProjectTable projects={projects} />\n      </div>\n    );\n  }
\n
\n When complete, click here to see what the entire module should look like:\n
import React from 'react';\nimport ProjectTable from './ProjectTable';\n\nclass Projects extends React.Component {\n  state = {\n    projects: [\n      {\n        _id: 1,\n        name: 'Project1',\n        description: 'This is your first project'\n      },\n      {\n        _id: 2,\n        name: 'Project2',\n        description: 'This is your second project'\n      },\n      { _id: 3, name: 'Project3', description: 'This is the third project' }\n    ]\n  };\n\n  render() {\n    const { projects } = this.state;\n\n    return (\n      <div>\n        <h1>Projects</h1>\n        <ProjectTable projects={projects} />\n      </div>\n    );\n  }\n}\n\nexport default Projects;
\n
\n

 

\n

Test our components

\n\n
src/projects/ProjectRow.test.js
\n
import React from 'react';\nimport { shallow } from 'enzyme';\n\nimport ProjectRow from './ProjectRow';\n\ndescribe('<ProjectRow />', () => {\n  // Tests go here\n});
\n\n
let wrapper;\n\nbeforeEach(() => {\n  const project = {\n    name: 'NAME',\n    description: 'DESCRIPTION'\n  };\n  wrapper = shallow(<ProjectRow project={project} />);\n});
\n
\n

What is happening here? We use the shallow renderer from Enzyme to render the component into a in-memory sandboxed “document” so that we can perform inquiries. Notice that we are using JSX in the shallow() method. Shallow testing is useful to isolate our test by not rendering any child components. For more advanced “integration” style tests you would use mount() for full DOM rendering

\n
\n\n
it('should instantiate the Project Row Component', () => {\n  expect(wrapper).toHaveLength(1);\n});\n\nit('should render values into expected cells', () => {\n  expect(wrapper.find('td')).toHaveLength(2);\n  expect(wrapper.find('td').at(0).text()).toEqual('NAME');\n  expect(wrapper.find('td').at(1).text()).toEqual('DESCRIPTION');\n});
\n\n

 

\n
\n When finished, click here to see if your suite is similar to the one below:\n
import React from 'react';\nimport { shallow } from 'enzyme';\n\nimport ProjectRow from './ProjectRow';\n\ndescribe('<ProjectRow />', () => {\n  let wrapper;\n\n  beforeEach(() => {\n    const project = {\n      name: 'NAME',\n      description: 'DESCRIPTION'\n    };\n    wrapper = shallow(<ProjectRow project={project} />);\n  });\n\n  it('should instantiate the Project Row Component', () => {\n    expect(wrapper).toHaveLength(1);\n  });\n\n  it('should render values into expected cells', () => {\n    expect(wrapper.find('td')).toHaveLength(2);\n    expect(wrapper.find('td').at(0).text()).toEqual('NAME');\n    expect(wrapper.find('td').at(1).text()).toEqual('DESCRIPTION');\n  });\n});
\n
\n

 

\n\n
import React from 'react';\nimport { shallow } from 'enzyme';\n\nimport ProjectTable from './ProjectTable';\nimport ProjectRow from './ProjectRow';\n\ndescribe('<ProjectTable />', () => {\n  let wrapper;\n\n  beforeEach(() => {\n    const projects = [{}, {}];\n    wrapper = shallow(<ProjectTable projects={projects} />);\n  });\n\n  it('should instantiate the Project Table Component', () => {\n    expect(wrapper).toHaveLength(1);\n  });\n\n  it('should render a row for each project', () => {\n    expect(wrapper.find(ProjectRow)).toHaveLength(2);\n  });\n});
\n\n
import React from 'react';\nimport { shallow } from 'enzyme';\n\nimport Projects from './Projects';\nimport ProjectTable from './ProjectTable';\n\ndescribe('<Projects />', () => {\n  let wrapper;\n\n  beforeEach(() => {\n    wrapper = shallow(<Projects />);\n  });\n\n  it('should instantiate the Project Component', () => {\n    expect(wrapper).toHaveLength(1);\n  });\n\n  it('should pass projects down to table', () => {\n    wrapper.setState({\n      projects: [{}, {}, {}, {}]\n    });\n    expect(wrapper.find(ProjectTable).prop('projects')).toHaveLength(4);\n  });\n});
\n\n\n

\n \n \n

\n\n
Error: Error watching file for changes: EMFILE\n    at exports._errnoException (util.js:953:11)\n    at FSEvent.FSWatcher._handle.onchange (fs.js:1400:11)\nyarn ERR! Test failed.  See above for more details.
\n\n

 

\n

Let’s render our Projects table to the Browser!!

\n\n
src/App.js
\n
import Projects from './projects/Projects';
\n
  render() {\n    return (\n      <div className=\"App\">\n        <div className=\"container\">\n          <Projects />\n        </div>\n      </div>\n    );\n  }
\n

 

\n\n

Run the application and see your work.

\n\n

\n \n \n

\n

 

\n

Commit your changes to Git and get ready for the next lab.

\n
git add .\ngit commit -m "Lab 2 completed successfully"
\n

Extra Credit

\n

If you’re looking for an extra challenge, take a look at Jest Snapshot testing. On first run, jest will generate a snapshot file that represents the rendered react component in a __snapshots__ folder. On subsequent runs it will compare the test result to the previous snapshot file. On a failure you will have to decide whether to fix the code, modify the test, or press ‘u’ to update the snapshot file with the new rendering.

\n

Snapshot testing can save you time from writing individual expect assertions on elements, by simply allowing you to review the snapshot file on any changes. It also serves as a useful “tripwire” to inform developers that they may have impacted components/logic they didn’t intend to.

\n

Try creating a Snapshot test inside ProjectRow.test.js, or:

\n
\nClick here for an example ProjectRow.test.js test\n
it('should render to match the snapshot', () => {\n  expect(wrapper).toMatchSnapshot();\n});
\n
\n

 

\n\n

git add . and git commit -m "extra credit" when you are done

"}},"pageContext":{"next":{"node":{"fields":{"slug":"/labs/routing-and-components"},"frontmatter":{"title":"Routing and Components","index":3}}},"slug":"/labs/your-first-react-component"}}