gem-hunter
Language: 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.
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):
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:
npm install - Installs packagesnpm start - Builds the project and launch a lite web server (webpack-dev-server).Bundling + npm start based on webpack.
Display the text 'Hello React'.
Hello world, simples react render sample.
Display the text 'Hello {name}' (where name is a prop that contains a given name).
Introduce a basic React concept, handling properties.
Starting from sample 02, let's the user change the name to be displayed.
Introduce a basic React concept, handling State using hooks.
Starting from sample 03, let the user change the name only when he hits a change button.
Using callbacks.
Refactor sample 04, cleanup and discussion on where to place the state.
Refactor the job done.
Starting from sample 05, enable / disable the change button when the text is empty or same name as original name,.
Enable/disable components.
Simple color picker demo (show how properties work).
ColorPicker refactor.
Implementation of a single sidebar.
Render a table and use a child component to render each row, using mock data.
Starting from sample 10, remove mock data, hit a real REST API (Github api), use axios to perform the fetch call.
Starting from sample 03,start using React-Router (SPA navigation).
Starting from sample 12, implement a basic login page, that will redirect the user to another page whenever the login has completed successfully.
Starting from sample 13, add validation support to login form.
Starting from sample 14, learn how React 16 context api works.
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 organization.
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:
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 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
Sample updated using Jest.
Sample updated using Jest.
Pending update Jest + Enzyme
Pending update
Pending update
Pending update
Pending update
Replace class components by stateless components using Hooks.
Add a login page using Material-UI.
Thank you very much to the contributors for keeping the project updated in all the examples.
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