The goal of this project is to provide a set of simple samples, providing and step by step guide to start working with React and Typescript. Characteristics:
- Bundling based on webpack.
- React + Typescript based.
- Simple navigation using react-router.
- Managing async calls and updates.
- Future enhancements:
- Form validation.
- More advanced navigation scenarios.
- Redux samples.
Contributors and reviewers are more than welcome.
##To get started:
- Install NodeJS
npm install webpack -g- Installs webpacknpm install tsd -g- Installs tsd- Download this repo
- Open the command line of your choice and cd to the root directory of this repo on your machine
npm install- Installs packagesnpm start- Builds the project and launch a lite web server (webpack-devserver).- Navigate to http://localhost:8080/ if your browser doesn't open automatically.
##IDE: We have tested in:
Bundling + npm start based on webpack.
Hello world, simples react render sample.
Creating a common header and about page react components.
Creating a "members" page, adding navigation using react-router.
Create a read only list component (table >> tr >> td), reading list of members from a fake api and dumping it into component state.
Breaking the list component into two: list and row compomenent, member row entity passed via props.
Members fake api replaced with async call to api github to retrieve list of members of a given team.
In this sample we will add a link in the members page that will navigate to a "new member page". This new page will display a form where you have to enter the avatar url, login and id of a new member (just supossing we can edit that info).
Validation performed so far:
- Login: required, must be a string (at least length 3).
TODO, add this validations:
- Id: required, must be a number.
- Avatar URL: optional, must be a valid url.
Edit a given member, here we learn how to add params to a navigation link and how to obtain them from a component.
Added Redux support, isolated state into Redux reducers, implement load, save, basic validation cycle. This sample uses the fake api, in following samples we will call async operations and fitting them into Redux architecture.
Members fake api replaced with async call to api github to retrieve list of members of a given team.
Similar to sample 06, but this time we implement this functionallity fitting it in Redux, Redux-Thunk middleware.
Display a busy indicator when an ajax request is in progress.
We have created here:
- A component that will take care of showing / displaying the busy indicator (spinner).
- A reducer that will take care of dispatching http requests in progress / completed.
- A http helper that will wrap the request to trigger the proper messages (new request, request completed...), just to have a single entry point for this.
We have updated MemberAPI to use the http helper / wrapper.
Testing libraries:
We added a Karma configuration on Webpack, that runs every '.spec' inside src folder and subfolders. This configuration allows debugging with Typescript.
With Mocha we can describe our tests and it adds support for async tests.
Chai is for assertions.
With Deep free we ensures that initial states in reducers are immutable.
Testing libraries, previous libraries and:
Sinon join Mocha allow us async action tests.
Testing libraries, previous libraries and:
Enzyme provide an easy way to isolate, manipulate, traverse and assert React Components.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent