Due to the popularity of this repo Jehu Sagardoy is getting them up to date, right now migrated from 00 to 13.
You can check as well other repos (react / redux + typescript):
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.
- Using Redux library.
- Handling async calls via Redux-Thunk + Redux Saga.
- Adding unit testing support.
- Implementing Lazy Loading.
- ...
- Install NodeJS
- Download this repo
- Open the command line of your choice and cd to a sample directory within this repo on your machine
npm install- Installs packagesnpm start- Builds the project and launch a lite web server (webpack-dev-server).- Navigate to http://localhost:8080/ if your browser doesn't open automatically.
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).
Edit a given member, here we learn how to add params to a navigation link and how to obtain them from a component.
Validation performed so far:
- Login: required, must be a string (at least length 3).
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.
Display a busy indicator when an ajax request is in progress.
To have a global count of promises gong on we are using reat-promise-tracker and to display a cool spinner react-spinner
Sample updated using Jest.
Sample updated using Jest.
Pending update Jest + Enzyme
Pending update
Pending update
Pending update
Pending update
We are a team of long-term experienced freelance developers, established as a group in 2010. We specialize in Front End technologies and .NET. Click here to get more info about us.
For the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend