Skip to content

Commit 663b0ec

Browse files
authored
Update readme.md
1 parent 608c8a8 commit 663b0ec

1 file changed

Lines changed: 17 additions & 84 deletions

File tree

readme.md

Lines changed: 17 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,14 @@
11
# React Typescript by sample
22

3-
This repo was deprecated (see _new samples_ section), but due to the popularity of it, we have decided to update all the samples to the newest package versions and best practices, sample that are already uptodate: 00, 01, 02, 03, 04, 05, 06, 07, 08, rest of sample _work in progress_, if you need to progress on more advanced sample please check our [React By Sample](https://github.com/Lemoncode/react-by-sample) and [Redux By Sample](https://github.com/Lemoncode/redux-by-sample) repos. Thanks for your support and stars ;-).
3+
Due to the popularity of this repo @jsagardoy is getting them uptodate, right now migrated from 00 to 12.
44

5-
# New samples
5+
You can check as well other repos (react / redux + typescript):
6+
- [React By Sample](https://github.com/Lemoncode/react-by-sample)
7+
- [Redux By Sample](https://github.com/Lemoncode/redux-by-sample)
8+
- [From React to Redux](https://github.com/Lemoncode/from-react-to-redux-ts)
9+
- [Redux Testing Typescript](https://github.com/Lemoncode/redux-testing-typescript)
610

7-
We have created a new set of updated samples.
8-
9-
_Typescript_
10-
11-
React:
12-
13-
https://github.com/Lemoncode/react-by-sample
14-
15-
React + Redux:
16-
17-
https://github.com/Lemoncode/redux-by-sample
18-
19-
_ES6_
20-
21-
**Work in progress**
22-
23-
React:
24-
25-
https://github.com/Lemoncode/react-by-sample-es6
26-
27-
React + Redux:
28-
29-
https://github.com/Lemoncode/redux-by-sample-es6
30-
31-
32-
# Old Project
11+
# Samples
3312

3413
The goal of this project is to provide a set of simple samples, providing and step by step guide to
3514
start working with React and Typescript. Characteristics:
@@ -42,11 +21,7 @@ start working with React and Typescript. Characteristics:
4221
+ Handling async calls via Redux-Thunk + Redux Saga.
4322
+ Adding unit testing support.
4423
+ Implementing Lazy Loading.
45-
46-
- Future enhancements:
47-
48-
+ Using Immutablejs.
49-
+ Using React Hot Loader.
24+
+ ...
5025

5126
## Call for contributors:
5227

@@ -56,19 +31,12 @@ Are you interested in contributing into this project? If that's the case don't h
5631

5732
## To get started:
5833
1. Install [NodeJS](http://www.nodejs.org)
59-
2. `npm install webpack -g` - Installs webpack
60-
3. `npm install tsd -g` - Installs tsd
61-
4. Download this repo
34+
2. Download this repo
6235
5. Open the command line of your choice and cd to the root directory of this repo on your machine
6336
6. `npm install` - Installs packages
6437
7. `npm start` - Builds the project and launch a lite web server (webpack-devserver).
6538
8. Navigate to [http://localhost:8080/](http://localhost:8080/) if your browser doesn't open automatically.
6639

67-
## IDE:
68-
We have tested in:
69-
+ [Atom](https://atom.io/).
70-
+ [VS Code](https://code.visualstudio.com/).
71-
7240
# samples
7341

7442
## 00 Boiler plate
@@ -129,72 +97,37 @@ we will call async operations and fitting them into Redux architecture.
12997

13098
Display a busy indicator when an ajax request is in progress.
13199

132-
We have created here:
133-
134-
* A component that will take care of showing / displaying the busy indicator (spinner).
135-
* A reducer that will take care of dispatching http requests in progress / completed.
136-
* A http middleware that dispatch HttpCallCompleted action when http request is completed.
137-
138-
We have updated MemberAPI to use the http helper / wrapper.
100+
To have a global count of promises gong on we are using [reat-promise-tracker](https://github.com/Lemoncode/react-promise-tracker) and to display a cool spinner [react-spinner](https://github.com/davidhu2000/react-spinners)
139101

140102
## 11 Testing reducers
141103

142-
Testing libraries:
143-
144-
* [Webpack + Karma](https://github.com/webpack/karma-webpack)
145-
* [Mocha](https://github.com/mochajs/mocha)
146-
* [Chai](http://chaijs.com/)
147-
* [Deep Freeze](https://github.com/substack/deep-freeze)
148-
149-
We added a Karma configuration on Webpack, that runs every '.spec' inside src folder and subfolders.
150-
This configuration allows debugging with Typescript.
151-
152-
With Mocha we can describe our tests and it adds support for async tests.
153-
154-
Chai is for assertions.
104+
Sample updated using Jest.
155105

156-
With Deep free we ensures that initial states in reducers are immutable.
157106

158107
## 12 Testing actions
159108

160-
Testing libraries, previous libraries and:
109+
Sample updated using Jest.
161110

162-
* [Sinon](http://sinonjs.org/)
163-
164-
Sinon join Mocha allow us async action tests.
165111

166112
## 13 Testing components (Containers and Presentationals)
167113

168-
Testing libraries, previous libraries and:
169-
170-
* [Enzyme](https://github.com/airbnb/enzyme)
171-
172-
Enzyme provide an easy way to isolate, manipulate, traverse and assert React Components.
114+
Pending update Jest + Enzyme
173115

174116
## 14 Replacing Redux Thunk with Redux Saga
175117

176-
Redux Saga it's an interesting alternative for redux-thunk, worth to take a look:
177-
178-
* [Redux Saga](https://github.com/yelouafi/redux-saga)
118+
Pending update
179119

180120
## 15 Lazy Loading and React-Router
181121

182-
Use webpack require.ensure to load routes on demand.
183-
184-
* [Lazy Loading Webpack / React Router](http://blog.mxstbr.com/2016/01/react-apps-with-pages/)
122+
Pending update
185123

186124
## 16 Add custom middlewares
187125

188-
Create two custom middlewares uiNotificationMiddleware and navigationMiddleware
126+
Pending update
189127

190128
## 17 Add support for ReactHotloader and ReduxDev Tools.
191129

192-
React Hot loader allows us to introduce changes in the application source code meanwhile we are running our web server and get the changes into our page without having to reload the browser and not losing the application state.
193-
194-
Redux dev tool is a chrome add-on that allows us to browse the state, replay actions, inject actions, export / import state...
195-
196-
* [React Hot Loader](https://github.com/gaearon/react-hot-loader)
197-
* [Redux Dev Tool](https://github.com/gaearon/redux-devtools)
130+
Pending update
198131

199132
# About Lemoncode
200133

0 commit comments

Comments
 (0)