React¶
React is a javascript library created by Facebook and provides a way to create user interfaces in a declarative, efficient, and flexible way.
Learning React¶
Assuming that you have some programming experience and have a dirve for self-learning, here are some tutorials to get you started:
- Facebook Official Tutorial
- React Video Series
- React-js-in-design-patterns
- Creating a react application (create a free account to access more videos in the series)
npm commands¶
Here are a list of npm commands that have been set up for typical use when developing the UI:
npm start
- starts a dev server that serves the UI and auto reloads on changesnpm test
- runs the unit testsnpm run styleguide
- starts a styleguidist servernpm run lint
- runs ESLint on the project to enfore the project defined coding standardnpm run lint:fix
- runs ESLint on the project and tries to auto-fix any errors found
The following npm commands aren’t for typical use when developing the UI:
npm run build
- transpiles and minifies a production ready applicationnpm run styleguide:build
- builds a static styleguide website with our component documentationnpm run report-coverage
- reports code coverage to codecovnpm run serve
- serves the built user interface locally on port 3000npm run eject
- ejects the project from the create-react-app configuration DO NOT USE THIS UNLESS DIRECTED TO
create-react-app¶
We used create-react-app to bootstrap the development process of our react application. create-react-app is a command-line (CLI) tool that generates a project and hides away all the configuration process necessary for development. This means, we can focus just on coding the react app instead of having to configure the project beforehand. You do not need to install the create-react-app CLI tool as the user interface project folder has everything already set up.