Skip to content

A low level introduction to React and some of the most common concepts of component-driven development and testing

License

Notifications You must be signed in to change notification settings

Velveeta/intro-to-react-workshop

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Intro to React Workshop

This project was bootstrapped with Create React App, and uses React Bootstrap for a quick base set of styles and components.

This project is intended to help newcomers to React in learning how to implement some of the more common patterns used with component-based development. It's also intended to help those that have been working with the library for a while, but have perhaps never gotten deeper than basic components. It will teach you strategies for wrapping general imperative-style APIs as declarative components, applying transformations to existing components, certain optimizations to help improve application performance, the basics of hooking an application up to Redux for global state management, and some of the basics of testing React applications with Jest, Enzyme, and Cypress.

To get up and running quickly, simply follow these steps:

Fork the repository

Login to GitHub and visit https://github.com/Velveeta/intro-to-react-workshop, then click the Fork button in the upper-right corner.

Clone the repository

Visit your own copy of this repository and click the green Clone or download button to display the clone path. Copy this to your clipboard, then use your utility of choice (terminal, Sourcetree, etc.) to clone the repository to your desired location on disk.

Install dependencies

From within the root of the project directory, run yarn or npm install to install the project dependencies.

Run the project

From within the root of the project directory, run yarn start or npm start to run the application. It should automatically launch your browser to the right location, but if it doesn't, you can just open a page to http://localhost:3000.

Available Scripts

In the project directory, you can run:

yarn start

Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

yarn test

Launches the Jest test runner in the interactive watch mode. See the section about running tests for more information.

yarn test:e2e

Launches the Cypress test runner in headless/CI mode. See the section about the Cypress run command for more information.

yarn test:e2e:dev

Launches the Cypress test runner in the interactive mode. See the section about the Cypress open command for more information.

About

A low level introduction to React and some of the most common concepts of component-driven development and testing

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages