Get your team started on a custom learning journey today!
Our Boulder, CO-based learning experts are ready to help!
Get your team started on a custom learning journey today!
Our Boulder, CO-based learning experts are ready to help!
Follow us on LinkedIn for our latest data and tips!
Reading through open source projects is a great way to learn a new library or framework. This can show you what tutorials and documentation can do and how things work and fit together in practice.
ReactJS, in particular, is used by many open source apps. There are hundreds of functioning applications on Github for React learners to use. This article will curate a sample of these open source applications and examples and explain how they use the React library in practice. We will guide you through 20 apps that grow progressively more complex. We hope this helps you in your React learning journey.
The simplest example you’ll find in React (and really any library) is the standard Hello World program.
ColorFlood is a simple, fun, and minersweeper-esque game. The objective of the game is simple. Users see a game board filled with five different colors. They then have to turn the entire board into one color. The competitive part comes from doing so with the least amount of changes.
Tetris Play the Redux Tetris demo first with a developer mindset. The concept is elementary. But it is a step up ahead of Hello World This is a simple tetris clone created with both React and Redux.
The SVG pan & zoom uses a React component that adds a zoom and pan feature to images. This is essential to display large SVG images confined to a small window. The zoom detection can be used with scrolling and can also autopan with the mouse. The image is mapped through correlating (x,y) coords.
Here we have some moving components with the dodging game. Use the mouse to control where the block goes. An extra area that this example excels at is the addition of a high score counter programmed into the app.
This is a React version of a Jeopardy-like game. The app was written with React and ES6. It was built with both Babel and Webpack. The questions are placeholders in the game and can be replaced with your own types of questions and answers.
Many JavaScript developers learning React have experience and skill with CSS. This CSS gradient shader is mathematically derived and easy to replicate. Test out the internal mathematical foundations of it while revisiting some CSS ideas.
The React sketch pad is a great tool that can be used to sketch anything online. It’s a good way to learn about API integration and playing with the attributes inside of the sketching environment.
Another classic game created with React. It was created using ImmutableJS, Redux and ES6. The game came out of the developer testing these ideas and making a working prototype of the game. These additional skills will progress you to the next moderate level of open source applications.
All smartphones have an in-built basic calculator. This takes that same principle and copies it to the exact. The React clone calculator showcases the UI setup along with a detailed rendition of the necessary CSS components set up for full implementation.
These next apps work extensively with drawing from APIs. The main components in the main app.js contain the logic for the internal search functions. Throughout these next ten apps, developers will be able to learn more about controlled versus uncontrolled input. The distinction between this in React is important.
The photo feed is progressively amping up to a full scale image-based application. It takes from a public photo feed from both Flickr and Yansdex. The app comes with a responsive image grid and customizable columns that all rely on CSS for its style elements.
This Tetris Clone allows for a snapshot of the game state at any time by calling upon an internal function built into the code, Flatris.serialize(). This is a great place for developers to look at another example of a game but instead understand the data structures it is built upon.
This open source application shows an interactive window for a Netflix clone that is capable of API browsing with fetch. Don’t let the advanced UI design put you off towards the complexity of this demo. There are only three components that modify the state of this application. Look through the entirety of the code to pick out features you’re familiar with.
A game of Solitaire in React calls for many variables to be called alongside a math statistical intensive underlying engine. This app was created with Redux and Webpack. Mocha was used for testing. The styles come from SASS.
This is a game for coders by coders. The idea behind the battle game is where participants are able to code their AI to do battle with and make them fight. It showcases a great way for users to interact with a React application and code in the confines of the application.
The following applications are full-scale applications that are either clones or serve a need for a particular solution. All of these are capable of running on a mobile device and are based off of incredibly popular applications.
The iOS stock clone is written in React native. It is available on both major platforms, iOs and Android. The data is taken from Yahoo Finance for a constant updated stream. It also can be used on an Apple desktop as it can tap into a MacBook’s new touch strip features.
The next app, Gatsby, is remarkable as it takes simple text and turns it into a dynamic website. Plain text is easily taken into a new blog or website through the static site generator. It supports various markup languages like Markdown and HTML. There is also additional support for more file types. Each template comes reloadable as it is powered by Webpack.
React Native’s camera is a complete work of mastery over the camera function. The components included in this project allow you to work with recording aspects in both video and picture to take advantage of the iOS live picture function. The project is documented to allow for connection with various updates of iOS.
The Gifted Chat app is a fully functional messenger that can be used between two or more users. It comes with custom components to load previous messages, add avatars and include touchable links. All of this is supported through the backend and frontend development using React. It’s a good place to learn about the interconnected nature of both proponents of React.
The soundcloud clone uses both React and Redux. It takes from an existing set of music playlists and brings it back to the end user in a form similar to soundcloud. It is fully functional with all the details needed to change the sound functions.
Customized Technical Learning Solutions to Help Attract and Retain Talented Developers
Let DI help you design solutions to onboard, upskill or reskill your software development organization. Fully customized. 100% guaranteed.
DevelopIntelligence leads technical and software development learning programs for Fortune 500 companies. We provide learning solutions for hundreds of thousands of engineers for over 250 global brands.
“I appreciated the instructor’s technique of writing live code examples rather than using fixed slide decks to present the material.”
VMwareThank you for everyone who joined us this past year to hear about our proven methods of attracting and retaining tech talent.
© 2013 - 2020 DevelopIntelligence LLC - Privacy Policy
Let's review your current tech training programs and we'll help you baseline your success against some of our big industry partners. In this 30-minute meeting, we'll share our data/insights on what's working and what's not.
Training Journal sat down with our CEO for his thoughts on what’s working, and what’s not working.