lemoncode / react-typescript-samples Goto Github PK
View Code? Open in Web Editor NEWThe 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.
License: MIT License
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.
License: MIT License
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:
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.
Update dependencies, typescript version and react versions, remove typings and make use of stateless components...
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 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:
By doing this it will easier for a developer to know what the sample is doing just from the GitHub portal.
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 = ""; }
Pending:
Once done raise full PR
Add react hot loader support based on:
https://github.com/wmaurer/react-hot-boilerplate-ts/blob/master/src/App.tsx
#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:
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:
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.
There's a bit of mess now in the code, we should set an standard and configure typescripter linter rules.
Samples 12 and 13 Missing entry on readme.md
Let's create a nice looking structure that will display a summary of the sample being implemented, proposal:
_Short description _
Highlights
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:
Sync api calls should be called from action creators
Start from sample 10 (async thunk) and port it to sagas.
Grab the opportunity to rename some action name (request_START, request_Completed)...
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:
tsd
is deprecated see DefinitelyTyped/tsd#269
I recommend a refactor to upgrade to DefinelyTyped when possible.
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(...)
Let's start new sample using typings, we will then plan a migration for the rest of samples.
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.
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.
We should have an start command that run with hot loading and a production command that just makes the build without adding hot loading.
I think there is a problem with proper typings for that dependency. Did you forget to commit something?
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
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.
Fix d.ts and new react version, tests fix
Let's add cases to test the middleware (sorry this sample started with no unit test support we have to add them).
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.
Indicate what the sample does or simulates and some details, to get any developer up to speed.
move to typescript 2.0, reivew config, ...
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:
Are you interested in contributing into this project? If that's the case don't hesitate contacting us.
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 :-).
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:
See issue 24
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.