lemoncode/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.

React Typescript by sample

🇪🇸 Versión Español

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.

We have incorporated a set of examples based on hooks.

Right now you got two main folders:

• Hooks: set of samples migrated to hooks (right now 15 samples migrated), if you are new to React, or you are going to start working on a new project, We recommend you going through these examples.

• Old_class_components_samples: The old samples, just in case you need to work with older react versions or you need to maintain legacy code.

If you want to make a deeper dive on React Hooks you can check this repo React Hooks By Example

Other guided repos available (react / redux + typescript):

• Redux By Sample
• From React to Redux
• Redux Sagas

Examples

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 (not available yet on hooks version, coming soon).
• Handling async calls via Redux-Thunk + Redux Saga (not available yet on hooks version, coming soon)
• Adding unit testing support (not available yet on hooks version, coming soon).
• Implementing Lazy Loading (not available yet on hooks version, coming soon).
• ...

To get started:

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

samples

Hooks

00 Boiler plate

Bundling + npm start based on webpack.

01 Hello React

Display the text 'Hello React'.

Hello world, simples react render sample.

02 Properties

Display the text 'Hello {name}' (where name is a prop that contains a given name).

Introduce a basic React concept, handling properties.

03 State

Starting from sample 02, let's the user change the name to be displayed.

Introduce a basic React concept, handling State using hooks.

04 Callback

Starting from sample 03, let the user change the name only when he hits a change button.

Using callbacks.

05 Refactor

Refactor sample 04, cleanup and discussion on where to place the state.

Refactor the job done.

06 Enable

Starting from sample 05, enable / disable the change button when the text is empty or same name as original name,.

Enable/disable components.

07 ColorPicker

Simple color picker demo (show how properties work).

08 ColorPicker Refactor

ColorPicker refactor.

09 Sidebar

Implementation of a single sidebar.

10 Table Mock

Render a table and use a child component to render each row, using mock data.

11 Table Axios

Starting from sample 10, remove mock data, hit a real REST API (Github api), use axios to perform the fetch call.

12 React Router

Starting from sample 03,start using React-Router (SPA navigation).

13 Login Form

Starting from sample 12, implement a basic login page, that will redirect the user to another page whenever the login has completed successfully.

14 Form Validation

Starting from sample 13, add validation support to login form.

15 Context

Starting from sample 14, learn how React 16 context api works.

Old Class folder

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

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 while an ajax request is in progress.

To have a global count of promises gong on we are using react-promise-tracker and to display a cool spinner react-spinner

11 Testing reducers

Sample updated using Jest.

12 Testing actions

Sample updated using Jest.

13 Testing components (Containers and Presentationals)

Pending update Jest + Enzyme

14 Replacing Redux Thunk with Redux Saga

Pending update

15 Lazy Loading and React-Router

Pending update

16 Add custom middlewares

Pending update

17 Add support for ReactHotloader and ReduxDev Tools.

Pending update

18 Hooks

Replace class components by stateless components using Hooks.

19 LoginForm

Add a login page using Material-UI.

Contributors

Thank you very much to the contributors for keeping the project updated in all the examples.

• Jehu Sagardoy
• Luis del Amo

About Basefactor + Lemoncode

We are an innovating team of Javascript experts, passionate about turning your ideas into robust products.

Basefactor, consultancy by Lemoncode provides consultancy and coaching services.

Lemoncode provides training services.

For the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend

react-typescript-samples's Issues

Review rules for camel case / pascal case...

There's a bit of mess now in the code, we should set an standard and configure typescripter linter rules.

Code cleanup study

Current sample code base needs a good cleanup, I propose @algil to create first a list of enhancements, then we can break / group them by issues and proceed with the cleanup task.

About the list to be generated, I would propose something like:

• Enhancementes that must be applied:
  • Field name FireValidationFieldValueChange: wrong name it just updates ui it should be FireFieldValueChange
  • Remove imports that are not being used (e.g. memberapi in reducers).
  • (...) <-- @algil to create the whole list
• Enhancements that needs discussion set an standard and then be implemented / set coding standard rule:
  • Imports, should we remove the "default" and use always {} ?
  • (...)

A later stage will be to configure tslinter

To complete this task you can answer in the task listing the enhancementes in a single comment.

Sample 05 should have constructor init in the member Entity

Member Entity it's missing in constructor, maybe need initialize in the constructor the id by -1.
This have been fix in sample 07 and not in sample 05
constructor() { this.id = -1; this.login = ""; this.avatar_url = ""; }

Create redux saga sample

Start from sample 10 (async thunk) and port it to sagas.

Grab the opportunity to rename some action name (request_START, request_Completed)...

Propagate redux action creators change to sample 10 and 11

Update sample 01 Hello React

Update dependencies, typescript version and react versions, remove typings and make use of stateless components...

Sample 17 - Create a readme.md for the sample

By doing this it will easier for a developer to know what the sample is doing just from the GitHub portal.

About page sample 00 Boiler plate

Proposal ( @nasdan to complete it):
#00 Boiler plate

In this sample we are going to setup the basic plumbing to "build" our project and launch it in a dev server. We are going to use: webpack, typescript.

In order to launch this project, follow this steps

TODO: Add all the steps here, npm install...
npm start

Then open your browser and navigate to: http://localhost:8080

Highlights

The most interesting parts worth to take a look:

• Package.json: check packages installed.
• Webpack config: check the build process and ts-loader to handle typescript).
• tsd.json: typescript definitions.
• src: javascript using imports.

About page sample 02 Components

#2 Components

This sample takes as starting point sample "01 Hello react".

We are adding react components: a main component that consumes a header and aboutPage component.

In order to launch this project, follow this steps

TODO: Add all the steps here, npm install...
npm start

Then open your browser and navigate to: http://localhost:8080

Highlights

The most interesting parts worth to take a look:

• app.tsx: main component, instantiates header and common component.
• header.tsx: simulate a header component (in next samples this will include a nav bar).
• aboutPage.tsx: page like component.

fix sync api calls (should not be in reducer)

Sync api calls should be called from action creators

Update other samples (like we did with 14)

Fix d.ts and new react version, tests fix

About page sample 01 Hello React

Proposal ( @nasdan to complete it):
#1 Hello React

This sample takes as starting point sample "00 Boiler plate", we add on top of that sample a simple react render.

In order to launch this project, follow this steps

TODO: Add all the steps here, npm install...
npm start

Then open your browser and navigate to: http://localhost:8080

Highlights

The most interesting parts worth to take a look:

• index.ts: react + reactDom imports and simple dom render.

Update sample 06 AJAX Call

Remove tbody, span warning

warning.js:45 Warning: validateDOMNesting(...): cannot appear as a child of . See Router > RouterContext > MembersPage > tbody > span.

This warning appears because:

<tbody> {
    this.state.members.map((member : memberEntity) =>
        <MemberRow key={member.id} member = {member}/>
    )
  }
</tbody>

It should be written like:

<tbody> 
   {
    this.state.members.map((member : memberEntity) =>
        <MemberRow key={member.id} member = {member}/>
    )
  }
</tbody>

Fix in samples:

• 05 Presentational Comp
• 06 AJAX Call
• 07 Form
• 08 ParamNavigation

Update sample 02 Components

Check that project behaves well on visual studio code

Playing with rootDir setting seems to be possible to properly configure the project to get intellisense and all the goodies in Visual Studio Code. More info:

http://blog.tonysneed.com/2016/01/30/visual-studio-code-typescript-part-1/

It would be a good idea to check if we can make it work on code, but not breaking atom :-).

Add presentational and containers component unit tests

Create immutablejs sample

tsd is deprecated in favour of DefinitelyTyped

tsd is deprecated see DefinitelyTyped/tsd#269
I recommend a refactor to upgrade to DefinelyTyped when possible.

Add Lazy Loading sample

Enhance readme.md description of samples

Steps to finalize spinner sample

Pending:

• Implement pull fixes from PR sample 10
• Display a proper simple spinner (e.g. the simple we use that blocks whole ui and show a gif spinning).
• In the members page, display another table with other relevant data from git (e.g. lemoncode repos: https://api.github.com/orgs/lemoncode/repos).

Once done raise full PR

14 TestComponent - error TS2307: Cannot find module 'redux-mock-store'.

I think there is a problem with proper typings for that dependency. Did you forget to commit something?

Move typescript to dev dependencies

Document About Page of each sample

Indicate what the sample does or simulates and some details, to get any developer up to speed.

MemberAPI should export default new MemberAPI

If not you create a new instance, member.id don't increment rigth, and allways it's 20.

export default new MemberAPI();

Proposal

import MemberEntity from './memberEntity'
import MembersMockData from './memberMockData'
import * as _ from 'lodash'
// Sync mock data API, inspired from:
// https://gist.github.com/coryhouse/fd6232f95f9d601158e4
class MemberAPI {
  private _idSeed : number;
// (...)
}

export default new MemberAPI();

Then we you want to use MemberAPI you don't need to make a "new" anymore, just call, e.g.: MemberAPI.SaveChanges(...)

Update sample 02 Components

UPgrade to typescript 2.0, update libraries to latest version, remove typings, review set state and other pitfalls.

No need for readme.md, just a good review and get all uptodate and remove errors.

Udpdate sample 05 Presentational Comp

Create About Page for sample 10

See issue 24

Replace sinon.restore by sinon.test in sample 12 and 13

ReduxMockStore breaking, update samples to new version

Update Sample 00 Boilerplate

move to typescript 2.0, reivew config, ...

Remove TR / TH warnings

Some sample of the Members page are not building the members table in proper HTML (missing TR)

          <table className="table">
            <thead>
              <th>
                Avatar
              </th>
              <th>
                Id
              </th>
              <th>
                Name
              </th>
            </thead>

Is missing, it should be

          <table className="table">
            <thead>
              <tr>
                <th>
                  Avatar
                </th>
                <th>
                  Id
                </th>
                <th>
                  Name
                </th>
              </tr>
            </thead>

Right now we get the follwing warning (console):

Warning: validateDOMNesting(...): cannot appear as a child of . See MembersPage > thead > th.

could you review the samples and apply the patch where applies.

Create html structure for the about page

Let's create a nice looking structure that will display a summary of the sample being implemented, proposal:

Sample title

_Short description _

Highlights

• File: description

Any extra info e.g. diagram

Let's start with sample 11, spinner (this is just an idea, fulfill it with the components / clasess real names)
#11 Spinner async

In this sample we are going to show a spinner (busy indicator) whenever one or more ajax request are in progress.

Highlights

The most interesting parts worth to take a look:

• Components:
  • Members Page: just fire two async request (gitHub json API), member and repositories belonging to a given organization.
  • Spinner: check the http reducers state values to hide / show the spinner.
• Reducers
  • Http Reducer: Takes care of handling httpCallStarted and httpCallCompleted actions, updating the show spinner props (internally counts the number of requests that are in progress).
• Actions:
  • Load action: member page trigger this actions to request async data.
  • httpCallStarted / httpCallCompleted: this two actions notify HttpReducer whenever an ajax request has been fired or completed.
• Classes:
  • MemberAPI: fake member API (implemented two methods that request real json calls to github api to retrieve list of members and list of repos from a given organizations), this member API makes use of an http helper class we have created.
  • http: Wraps a $ajax.getjson request and takes care of notifying (dispatching an action) whenever an ajax call has been fired, and has been completed.

Update sample 08 ParamNavigation

Add steps to install and run the samples

We can base it on the other project ReactBoiler.

Prerequisites...

npm install
npm start

(...)

Indicate we are using atom as editor, we are checking for visual studio code to properly configure it.

Sample 17 - Middleware Migrate to typings

Let's start new sample using typings, we will then plan a migration for the rest of samples.

Update sample 09 Redux

Update sample 04 DisplayData

Update sample 07 Form

Avoid webpack global install, use npm start

Let's avoid npm -g installs whenver is possible.

We should in all projects:

npm install webpack webpack-dev-server --save

And add an start script to package json

"scripts": {
    "start": "webpack",    
  },

By doing this we can just execute from command line:

npm start

Add this change in all samples, then update the global readme.md

Sample 18 - Add react hot loader support

Add react hot loader support based on:

https://github.com/wmaurer/react-hot-boilerplate-ts/blob/master/src/App.tsx

http://blog.novanet.no/hot-loading-react-in-typescript/

Update sample 03 Navigation

MemberAPI should return single instance / static

Right now we are just making a "new" whenever we want to use this, we should make an export default o a "new instance"? or just declare it static? Check on this and come up with a solution.

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.

Tasks that we are planning:

• Replace tsd and use typings on each sample.
• Add better naming to actions.
• Add a readme.md to each of the sample (explaining the sample and include an step by step guide to create them from default).
• Better use of imports, casing and other details (code quality).
• Introduce ts-linter.
• Add more samples.
• (...).

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

Sample 17 - Add Middleware Unit test Support

Let's add cases to test the middleware (sorry this sample started with no unit test support we have to add them).

Remove hack, canot use statelessComponent

Right now on the definition of

class MemberPage extends React.Component<Props, {}> {

We are using React.Component, we should be using React.StatelessComponent, if we make this change we get an error, we had to rollback to React.Component, and add an ugly hack when gluing the reducer:

// TODO: Hack to bypass the issue when declaring StateLessComponent
// Pending research here
var nonTypedMemberPage : any = MemberPage;

const ContainerMemberPage = connect(
                                   mapStateToProps
                                  ,mapDispatchToProps
                                )(nonTypedMemberPage)

We need to unsderstand what's going on here and how this could be fixed, found in stackoverflow that we should upgrade to typescript 1.8 in order to fix that done but no luck, maybe is just the tsd that is not well defined.

React HotLoader add dev / production config

We should have an start command that run with hot loading and a production command that just makes the build without adding hot loading.

Samples 12 and 13 Missing entry on readme.md

Samples 12 and 13 Missing entry on readme.md

About page sample 03 Navigation

Proposal ( @nasdan to complete it):
#3 Navigation

This sample takes as starting point sample "02 Components".

We are adding page navigation to this project:

• We have added two pages (about, members).
• The user can navigate by cliking on links in a common navbar.

We are using react-router for the navigation support.

In order to launch this project, follow this steps

TODO: Add all the steps here, npm install...
npm start

Then open your browser and navigate to: http://localhost:8080

Highlights

The most interesting parts worth to take a look:

• index.ts: routes configuration.
• header.tsx: navigation links.
• app.tsx: header + page container.
• aboutPage.tsx / members.tsx: pages.