/react-typescript-samples

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.

Primary LanguageTypeScriptMIT LicenseMIT

React Typescript by sample

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 and Redux By Sample repos. Thanks for your support and stars ;-).

New samples

We have created a new set of updated samples.

Typescript

React:

https://github.com/Lemoncode/react-by-sample

React + Redux:

https://github.com/Lemoncode/redux-by-sample

ES6

Work in progress

React:

https://github.com/Lemoncode/react-by-sample-es6

React + Redux:

https://github.com/Lemoncode/redux-by-sample-es6

Old Project

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.
  • Future enhancements:
  • Using Immutablejs.
  • Using React Hot Loader.

Call for contributors:

Some months ago this project started as something internal... let's create some simple samples that cover react / redux / typescript scenarios that could serve as a guidance and reference in the future... now, we and other developers are using this repo as quick by sample guidance. We keep on adding more samples to it, but we have found that older samples need some updates / refactoring.

Are you interested in contributing into this project? If that's the case don't hesitate contacting us.: call for contributors.

To get started:

  1. Install NodeJS
  2. npm install webpack -g - Installs webpack
  3. npm install tsd -g - Installs tsd
  4. Download this repo
  5. Open the command line of your choice and cd to the root directory of this repo on your machine
  6. npm install - Installs packages
  7. npm start - Builds the project and launch a lite web server (webpack-devserver).
  8. Navigate to http://localhost:8080/ if your browser doesn't open automatically.

IDE:

We have tested in:

samples

00 Boiler plate

Bundling + npm start based on webpack.

01 Hello React

Hello world, simples react render sample.

02 Components

Creating a common header and about page react components.

03 Navigation

Creating a "members" page, adding navigation using react-router.

04 Display data

Create a read only list component (table >> tr >> td), reading list of members from a fake api and dumping it into component state.

05 Presentational Components

Breaking the list component into two: list and row compomenent, member row entity passed via props.

06 Handling asynchronous calls

Members fake api replaced with async call to api github to retrieve list of members of a given team.

07 Forms

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).

08 ParamNavigation + Validations

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).

09 Redux

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.

10 SpinnerAsync

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 middleware that dispatch HttpCallCompleted action when http request is completed.

We have updated MemberAPI to use the http helper / wrapper.

11 Testing reducers

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.

12 Testing actions

Testing libraries, previous libraries and:

Sinon join Mocha allow us async action tests.

13 Testing components (Containers and Presentationals)

Testing libraries, previous libraries and:

Enzyme provide an easy way to isolate, manipulate, traverse and assert React Components.

14 Replacing Redux Thunk with Redux Saga

Redux Saga it's an interesting alternative for redux-thunk, worth to take a look:

15 Lazy Loading and React-Router

Use webpack require.ensure to load routes on demand.

16 Add custom middlewares

Create two custom middlewares uiNotificationMiddleware and navigationMiddleware

17 Add support for ReactHotloader and ReduxDev Tools.

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.

Redux dev tool is a chrome add-on that allows us to browse the state, replay actions, inject actions, export / import state...

About Lemoncode

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