This post will curate the best resources, tools, libraries, and articles that will help you learn to build production applications with React.js. This 6000 word post will take you from getting started with React, through UI design, routing, testing, deployment, and continuous integration. There are many sections and you should feel free to jump to the resources you need.
Getting Started
Demos and Apps
Tutorials and Articles
Video Tutorials and Courses
Community
Boilerplates
UI Components
UI Libraries and Frameworks
Routing
State Management
Other React Libraries
Development Tools
Testing
Articles
Utilities
Automated Backend Testing Services
Performance
Articles
Tools
Libraries
Deployment
Continuous Integration Articles
Continuous Integration and Deployment Software
Cloud Server Provider
Continuous Integration in React Apps
Resources for Further Learning
Tutorials and Articles
Video Tutorials and Courses
Talks and Conferences
More React Resource
Getting Started
First off, let’s start at the very beginning. This section assumes you have zero-knowledge on React and have at least a solid foundation on JavaScript basics.
Demos and Apps
You already know that you want to learn React (that’s why you’re here right?). But a good first step when learning about a new technology is to know what’s possible with it. And the best way to go about that is to check out demos and existing apps that have been built with it.
Demo Apps
SoundRedux
Fil
React Pomodoro
Production Apps
Reddit Mobile
Docker Hub
Perseus
Tutorials and Articles
Now that you know what’s possible with React, it’s now time to take a look at how you can get started learning it.
If you’re the type of person who wants to have a general idea on how a specific technology works, then ReactJS for Stupid People is a good place to start. It talks about what React is, what you can do with it, its limitations, and whether you should use it for your future projects or not.
If you’re like most people, you either came from a jQuery or Angular background before you came to know about React. Tutorials which uses a well-known library as a point of reference in learning something new is a good way to understand how things are done in that new technology. Being able to translate what you’re used to doing in an older technology to and apply it to a new one can be very empowering to new developers who are just trying the waters.
Boiling React Down to a Few Lines in jQuery
React Fundamentals for Angular Developers
Now that you have an idea on how React works, it’s now time to dive into the core React concepts. Taking the time to understand the core concepts first before trying to write even a single line of code can really go a long way when learning React, and in fact (news flash coming up) any other new technology that you’re trying to learn. This will make the code that you see in React tutorials “click” faster. It also ensures that you won’t just end up copy-pasting the code from these tutorials. Having a good understanding of the core concepts enables you to distinguish how a specific thing works when you see them in action. So without further delay, here are a few tutorials you can read in order to understand the core concepts behind React:
Learning React.js: Getting Started and Concepts
The React.js Way: Getting Started Tutorial
Thinking in React
Video Tutorials and Courses
Free Courses
Egghead.io: React Fundamentals – this series will explore the basic fundamentals of React to get you started.
Mindspace: ReactJS Basics – teaches the basic concepts of React.
Learn ReactJS – if you want a more hands-on React course, this one is for you. Aside from the usual “getting to know the syntax” part, they also have projects and quizzes to make sure you really understand what you learned.
ReactJS Program: React.js Fundamentals – uses a combination of tutorials, video tutorials and a project that you will build throughout the whole course.
Paid Courses
If you have some cash to spare, consider enrolling on the following courses:
Powering Up with React – a combination of video tutorials and hands-on exercises to get your hands dirty in using React.
React for Beginners – a course by Wes Bos, a Full Stack Developer, Speaker and Teacher from Canada. The course is a bit pricey but it will be worth it, because this course covers all there is to know about the fundamentals of React.js. Each video tutorial is really concise, very engaging and most important of all, it’s not sleep-inducing.
React.js: Getting Started – learn the basics of React.js, and build an in-browser, math skills kids’ game from scratch with it.
Community
Now that you’ve begun your journey in writing React code, and maybe have followed through a tutorial or two.
In your journey in learning React, there will always be a time wherein you get stuck with a specific bug or error in your code. Often times simply searching for that specific error on Google would help. But what if there’s no error at all? Or Google doesn’t really return useful results. In those cases what you need is a community. Most of us already know Stackoverflow. Most of the search results that you see on Google when you search for a specific error are almost always from Stackoverflow. But aside from Stackoverflow there are other good places where you can get help and talk about React stuff in general.
React Subreddit
Reactjs Twitter Page
Reactiflux
React Discussion Forum
Now that you have an idea how React works, its core concepts and how to build things with it, its now time to take things further by learning about the tools which you can use while developing apps with React.
Boilerplates
A boilerplate is a useful tool for quickly getting started with a React project. As you might have already found out using the resources given above, the React code (JSX) that you write can’t actually be executed by the browser. This means that it has to go through a compilation process before the browser can understand it. The compiler accepts your JSX code and spits out the plain JavaScript code that’s readable by the browser. This is where boilerplates comes in. One of the tools which comes with a boilerplate is the build tool, which is responsible for compiling your JSX code.
To put it simply, boilerplates comes with a collection of tools and libraries that are commonly needed in developing React apps. Examples of such tools are build tools, test runners, and libraries for routing and state management.
Create React App – if you want to quickly get started writing React apps without worrying too much about the build/compile process, this is the way to go. In my own opinion, this is the only beginner-friendly boilerplate among this list.
React Starter Kit – if you’re looking for a boilerplate that allows you to easily set up not just the front-end but the back-end as well, this boilerplate is for you. It is built on top of Node.js, Express, GraphQL, React.js, Babel 6, PostCSS, Webpack, and Browsersync.
React Boilerplate – a production-ready boilerplate for starting out React projects. Highly focused on performance and best practices.
React-Redux Starter Kit – if you want a boilerplate which has minimal features and isn’t too opinionated about how to do certain things (project structure, build configuration) then this one is for you.
Those are just a few of the boilerplates that allows you to get started with your React projects quickly. Note that it’s not a requirement to use these boilerplates. Sooner or later you’ll find out that they’re either too rigid or too hard to customize. This is because some boilerplates can be too opinionated about how to go about things. Once you’ve tried using one or two boilerplates, you’ll pretty much have an idea on how to build your own. Every project is different so building your own boilerplate makes sense, since you only include things as you need them. This also adds up to your productivity later on, as you no know exactly where to look when you need to customize things.
UI Components
The main idea for using React is to be able to create UI components that can be reused anywhere in your app. Since React is a pretty popular library, developers and designers around the world have already created a lot of useful components that can be used in most projects. This means that you don’t need to write everything from scratch. Most of the components that you might need in your project might have already been written before.
In this section, let’s look at some useful components which you can use in your projects.
Facebook login component – for logging in users through Facebook.
Google login component – for logging in users through Google.
React Gravatar – for rendering a gravatar profile picture.
Griddle: React Data Grid Component – a grid component that allows for sorting, searching and paginating of tabular data.
React Infinite Scroll – for implementing infinite scroll in React.
React Time Ago – renders how much time has passed from a specific date object.
React Video – for rendering videos from Youtube or Vimeo.
Rodal the React Modal – a modal component with animations.
React Tooltip – a tooltip component.
React Sidebar – for rendering sidebars.
React Tabs – for rendering tabs.
Halogen – loading spinner components.
React Chartist – the React wrapper for the Chartist.js library for creating charts.
React Gmaps – for rendering Google maps.
React Leaflet – a React wrapper for the leaflet library for rendering Google maps.
React Datepicker – for rendering a date and time picker.
React Quill – a componentized version of the Rich Text editor named Quill.
React Autosuggest – WAI-ARIA compliant React autosuggest component.
React Draggable – for making elements draggable.
React Dropzone – for creating a drag-drop zone.
React Toggle – for creating an on/off switch.
React Images – a simple lightbox component for displaying an array of images.
React Color – color pickers from Sketch, Photoshop, Chrome, Github, Twitter and other useful software and services.
React Slider – a component for rendering sliders.
Those are just some of the components which you can use on most projects. If you need to find a custom component, you can check out the following component curators:
React.parts
React Components
iReact
If you’ve looked through the curators above, you’ll notice that each component either points out to one of these two sites:
Github – hosts the source code for the components.
NPM – package manager that enables developers to install the components locally.
This means that you can actually directly search on Github or NPM for your React components and libraries.
UI Libraries and Frameworks
If you want your apps to have a standard look and feel, a good place to start is by picking a UI library or framework. Libraries and frameworks comes with a set of components with the same theme. Each of them comes with a different set of components and a different way of doing things, so you have to choose which one fits your needs and your values.
Material-UI – React components that implements Google’s Material Design.
Ant Design – a collection of components that follows Ant Design, a design language for creating user friendly and beautiful websites.
React Bootstrap – the Bootstrap framework re-implemented using React.
Rebass – a collection of 57 Configurable React Stateless Functional UI Components.
React Toolbox – similar to Material-UI in that it also implements Google’s Material Design. The only difference is that it uses css modules intead of inline styles.
Elemental UI – a UI Toolkit for React.js Websites and Apps. If you’ve used Bootstrap before, the look and feel of their UI is similar to Bootstrap’s.
Grommet – an accessibility-focused framework for creating amazing user experience.
Belle – Configurable React Components with great UX.
Cx – a modern framework for building visually appealing, data-oriented, web applications.
Reusable Components by Khan Academy – useful components from Khan Academy.
VistarMedia Components – a collection of React components from VistarMedia. The components has the same look as Bootstrap.
React Topcoat UI – if you’ve used the Topcoat CSS framework before and you want the same look and feel for your React app.
Routing
Routing is an important part of every application. It keeps the UI in sync with the current URL that is being accessed by the user. For example, when http;//myapp.com/#user/1 is accessed, the UI will automatically update to show the page being asked.
Here are some of the routing libraries that you can use with React:
React Router – the De facto routing library for React. In the beginning, this is what you want to use as it includes all the bells and whistles that you need to start experimenting with routing.
Once you’re acquainted with React Router, you might notice that there are some features that you don’t really need, or you don’t really like the way it does things. Here are a few alternatives that you might want to check out:
React Mini Router – if you don’t want your routing solution to consume that much space, you can use this library instead. It has a few external dependencies and only becomes 4kb when gzipped.
React Router Component – a declarative router component for React.
Universal Router – A simple middleware-style router that can be used in both client-side (e.g. React, Vue.js) and server-side applications
router5 – a framework agnostic routing solution.
State Management
Another important part of any application is how you manage the state. At this point, we already know that each component can have their own state. This works for really small applications because you can just pass the state from one component to another by means of props. But for real-world apps, you need a way to make the state accessible throughout the whole app. Especially the one’s that are “global” by nature (e.g. settings). This is where state management comes in. React doesn’t come with this kind of functionality, but thankfully there are libraries that allows you to manage global app state in a sane manner.
Redux is one such library. Redux allows you to have a global state for your app so that the different components in your app can communicate with each other. Note that Redux isn’t specific to React, so you have to install React Redux as well so that you can easily work with Redux within the React environment. After learning plain React, Redux is the second step. Here are some resources that will help you learn it:
Free Resources
A Cartoon Guide to Redux – this is a great read if you want to know about the different components that make up Redux and how they work together. The visual can really help you in understanding the different concepts better.
Learn Redux – from the same guy who created the React for Beginners course. This course will teach you how to create an Instagram clone using React.js, Redux and React Router.
Getting Started with Redux – a course from the creator of Redux himself, Dan Abramov. If you’re looking into learning the nitty gritty details of using Redux, this is the course for you. Because it will not only teach how to use Redux within a React app, it will also dive into the details of using the different tools available in Redux.
Building React Applications with Idiomatic Redux – in this course you will learn about the production-ready techniques for building React and Redux applications.
Paid Courses
Modern React with Redux – learn the basics of React, Redux as well custom components such as Google Maps and charts by developing an app.
Advanced React and Redux – learn how to implement authentication, test components and use middlewares.
Building Applications with React and Redux in ES6 – an all in one course that shows you how to setup your environment for React development, teach you the basics of React and Redux, and how to test React components and your Redux code.
Redux is pretty much the De facto standard library for managing state in React apps. But that doesn’t mean that you can’t choose to use other solutions.
Other Useful Libraries
Here are other React libraries that you may find useful:
React Icons – use popular icon sets (e.g. Fontawesome, Octicons) in React.
React i13n – allows you to include instrumentation (analytics) to your app.
Omniscient – provides abstraction for React components that allows for fast top-down rendering. This uses immutable.js for immutable data.
Search Kit – a collection of UI components for creating beautiful search applications using ElasticSearch.
React Motion – an animation library.
React Forms – provides a set of tools for React to handle form rendering and validation.
react-intl – provides React components and an API to format dates, numbers, and strings, including pluralization and handling translations.
Development Tools
As you’re using React, Redux and other libraries you’ll notice that there are things that you need to do repeatedly. Namely writing out common React functions and debugging your code if something goes wrong. In this section we’ll look at some of the tools that you can use to ease up your React development.
Text Editor
Once you’ve gotten used to the React syntax, it’s high time you install plugins that will help you to easily write React specific code. Two of the most popular one’s are Atom and Sublime Text, so we’re going to look at specifically these two. You can start the tooling journey by reading one of the articles below:
Sublime Text Setup for React.JS Development: Linting, Emmet, and Formatting – shows you how to setup your Sublime Text editor for linting, formatting and auto-complete.
Supercharge JavaScript Development in Atom – not really specific to React but mentions some good Atom plugins that you can install to ease up JavaScript development.
Build Tools
Once you’re happy with your text-editor setup, you need to get acquainted with a build tool. If you’ve checked out the Boilerplates section earlier, you might have already introduced yourself to one such build tool: Webpack. Build tools play a role in the development, testing and deployment phase of your application. Here are a few points just to give you an idea on what build tools does:
They accept your JSX and ES6 code and spits out JavaScript that’s readable by the browser.
They compile all your modules together into a single file that can be linked into your page.
They listen to source code changes and use either live reloading or hot module replacement to update the preview of your app in the browser.
They run your tests.
Now you know that there’s no escaping build tools when it comes to React development. Of course, in the beginning you can use Create React App and it will handle the compilation of your React code for you. But as soon as you get out of the “beginner zone”, the next thing that you need to learn is how to use a proper build tool. Here are some resources that can help you with that:
SurviveJS: Webpack – a free book that will teach you everything you need to know about using Webpack in the React ecosystem.
Setting Up a React.js Environment Using Npm, Babel 6 and Webpack – shows the basic on how to setup your computer for React.js development.
Webpack – The Confusing Parts – tips and tricks which aims to make Webpack less confusing.
Note that Webpack isn’t the only build tool out there. There are lots of other tools that you might want to check out. Webpack is pretty much the De Facto standard when it comes to React apps, that’s why it’s the one that I introduced.
Debugging
Next you need to up your debugging game. That means no more using console.log when you’re trying to find out the cause of an issue.
React Dev Tools – allows you to inspect a React Renderer, including the Component hierarchy, props, state, and more. This tool is currently available on Chrome and Firefox.
React Inspector – allows you to inspect data in your React apps ala Chrome Dev Tools.
Redux DevTools – allows you to inspect state and action payload as they happen. Actions can also be cancelled so you can see the previous state before the action was fired.
Reactotron – an OS X app for inspecting your React JS and React Native apps.
Once you’re productive in using your newly found tools. You can start looking for other tools that can help you in developing React apps. Here are a few that you might want to start with:
React Storybook – a UI development environment for your React components. It allows you to visualize different states of your UI components and develop them interactively.
React Styleguidist – a style guide generator for your React components.
If you want more, Facebook has compiled a list of tools that you can use while developing in React:
Complementary Tools
Testing
In order to ensure that your code works as expected, you also need to perform tests. Three of the most common one’s are unit tests, functional tests and integration tests. If you’re not aware of any of these, I recommend you to read this article by Eric Elliot on JavaScript Testing: Unit vs Functional vs Integration Tests. That article will teach you everything you need to know about those three types of tests, why they are important, and it will also show some sample codes for each type. Testing also plays a huge role in Continuous Delivery, which is tackled in the Deployment section. Which is why testing plays a very important in the deployment of quality software.
Below are some resources that you can use to get started with your testing adventure. Note that a few of these are for testing JavaScript code in general, not just testing your React code. This is because testing should be holistic. The entirety of the app needs to be tested, so that you get the full benefit.
Articles
Writing Testable JavaScript – shows you organize and write your code so that it can be easily tested. This uses Mocha as the test framework, Chai as the assertion library, and jQuery to verify the contents of the page. There’s also a similarly named article which is a good read as well.
A Gentle Introduction to JavaScript Test Driven Development – the first part of a three-part series that teaches you how to get started with TDD in JavaScript. In this tutorial, you will be building a simple application which in which you apply TDD. This means that not only do you get to see how to test code, you also get to see the decisions behind why a specific code is written in that specific way.
Unit Testing and TDD in Node.js – shows you how to get started in unit testing your Node.js code using Mocha, Chai and Sinon.
Once you have a good feel on how to do unit testing in JavaScript, the next step is to actually apply in your React apps:
Getting Started with TDD in React – shows the basics of how to test React components and their state using shallow rendering.
Approaches to testing React components – an overview – shows the different ways in which you can test your React components. Things like testing what’s actually rendered to the DOM, using TestUtils, and shallow rendering.
The missing piece to the React testing puzzle – tips and tricks for testing React components. Shows you how to use tools such as Domino and unexpected-react for testing.
How React Components Make UI Testing Easy – shows you how to test a simple React application, but also putting Webpack and other tools in the mix. Very useful if you also want to learn how to use Webpack for testing.
React Full Stack Tests with Nightwatch – shows you how to setup integration tests for your React apps.
Utilities
These are the testing tools that are mentioned in the articles above:
Jest – a test runner.
Enzyme – a testing utility for React.
Mocha – a test framework for JavaScript projects.
Nightwatch.js – a functional testing tool. It verifies that the functionality of your app work correctly based on the user’s point of view.
Automated Backend Testing Services
You can use any of these two services for manual and automated cross-browser Selenium testing:
BrowserStack
SauceLabs
Performance
Now that you’re sure your components really do what you intend them to do. It’s now time to start looking at how to improve the performance of your React apps. Note that in most cases you don’t really need to check the performance of your app. Especially if it’s just a fairly standard app. However, if you have very complicated views you may start looking into your app’s performance. Here are a few signs that your app needs to have a performance evaluation:
It needs to work with lots of data.
Multiple parts of the app is updated at the same time.
It has lots of user interactions which updates the views.
Articles
The following articles will give you an idea on how to get started in performance debugging your React app:
Performance Tools – an introduction to the tools available in React for performance debugging.
Performance Engineering with React – introduces React perf tools, common React rendering bottlenecks, and tips on how to improve performance.
A Deep Dive Into React Perf Debugging – part two of the article above. This discusses how the performance debugging techniques works using a todo list as an example.
Performance Optimisations for React Applications – tips and tricks on improving performance of React + Redux apps.
React.js pure render performance anti-pattern – shows some performance anti-patterns that developers usually use when developing React apps and how to solve them.
Redux FAQ: Performance – frequently asked questions about performance in Redux. It also includes some links to articles and discussions about Redux performance.
Tools
Here are the tools that you could use for debugging the performance of your React apps:
ReactPerfTool – used for debugging the performance of your React application in a visual way.
React Render Visualizer – a visual way to see what is rendering and why. Each component is highlighted when they are mounted or when they are updated.
Why did you update? – a function that monkey patches React and notifies you in the console when potentially unnecessary re-renders occur.
Libraries
There are also some libraries that you can use for optimizing performance:
React Static Container – renders static content efficiently by allowing React to short-circuit the reconciliation process.
React Fast Click – automatically adds fastclick touch events to elements with onClick attributes (and those that require special functionality, such as inputs) to prevent the delay that occurs on some touch devices.
react-lazyload – used for lazyloading components, images, and other parts of your React application.
React Infinite – used for optimizing the performance of infinite lists.
react virtualized – a collection of React components for efficiently rendering large lists and tabular data.
Inferno – an extremely fast, React-like JavaScript library for building modern user interfaces.
Deployment
Finally we get to deployment. This is where you set up continuous integration and deployment. If you’re new to these concepts, continuous integration is a development practice where developers frequently push code into a shared repository (e.g. Git, Mercurial). All the codes are then automatically tested (e.g. unit tests, integration tests) on a staging server. If there are errors and other problems with the code, they’re immediately reported to the developers. All of this is orchestrated by a continuous integration software such as Jenkins. Once the errors are made known to the developers, they can immediately fix the issue and push the updated code. Once all the tests passes, the current build is automatically pushed to the production server.
Continuous Integration Resources
If you’re new to continuous integration, have a read at the following articles:
Continuous Integration Essentials – this will teach you the basics of continuous integration, the processes involved, how to pick a continuous integration solution, and lots of other resources.
Elements of a Continuous Deployment Workflow – provides valuable tips on each of the steps involved in a continuous integration workflow.
Continuous Integration and Deployment Software
Now that you know all about the steps involved in continuous integration, it’s now time to pick a continuous integration service. What you pick should be based on the needs of your specific project. For example, if you use pull requests in Github to keep track of a specific change and review the code. You should pick a CI service that can do that.
Here are a few continuous integration services that you can use:
Semaphore
Code ship
CircleCI
Bamboo
TeamCity
If you want to host your own, you can use the following open-source CI servers:
Jenkins
Travis
Strider
BuildBot
GoCD
Integrity
Cloud Server Provider
React apps are just your ordinary web apps so you can use your existing cloud server provider for deploying:
DigitalOcean
Amazon EC2
Linode
Heroku
Continuous Integration in React Apps
After you’ve learned the basics of Continuous Integration, decided which CI service, and picked a cloud server provider to use. The next step is to apply what you’ve learned and actually deploy your React application.
Since day 1 we all know that React doesn’t exist alone. There are other components that may be used in your code. That also includes your back-end code, which is most commonly Node.js. But others might also be using PHP, Ruby, Python or any other server-side language. This means that you should include those in your tests as well.
As you have already learned, the most important part of continuous integration is the testing process. First you test your code locally, and if it passes, you push it to the staging server for another set of tests. If it fails, you go back to step 1 until such time that all the tests passes. Once all the tests passes, only then is the code pushed to production.
But how specifically can we set this up for React applications? Well, by now you should already be proficient in using Webpack, Browserify, or any other module bundler that you decided to use. So it’s only a matter of figuring out how to automatically run tests when you push changes to your staging server, have the CI server generate a report on the results of the test, and automatically push the code to the production server when all the tests passes.
A huge part of your deployment process is handled by the build and testing tools of your choice. As you’ve learned earlier, Webpack is the one that’s most commonly used in React apps. So it is used together with the testing tools to ensure that the app has no errors. If you’ve skipped the Development Tools part, now is a good time to read through that.
Here are a few resources that can help you in filling the blanks. Note that most of these talks about the back-end since there are only a few apps that are purely client-side:
Deploy your React app to Heroku with Webpack – this will show you how to create a webpack configuration for both development and production builds. This doesn’t necessarily show you how to work with a CI server but it should give you a pretty good idea on how to set up your project for a deploy.
Deploy a MEAN app to Amazon EC2 – shows how to setup your MEAN app for deployment to an EC2 instance.
Setting Up Continuous Integration & Continuous Deployment With Jenkins – a step by step tutorial that shows you how to deploy a Node.js app using Jenkins.
Resources for Further Learning
Now that you’ve learned all of the process involved in developing apps with React, you can now sleep peacefully at night. Or not, because just like everything in life, you never actually stop learning. There’s always something new to learn. This is more true in a field like web development because there’s always something new to look forward to everyday. New frameworks, new libraries, new best practices.
So in this section I’ll provide some resources to get you started in learning some more React stuff.
Tutorials and Articles
The Anatomy Of A React Redux App
Trace Logging with React
Adding A Robust Form Validation To React Redux Apps
Build a React Application with User Authentication
Securing React Redux Apps With JWT Tokens
Why Redux Need Reducers To Be “Pure Functions”
Using Middlewares In React Redux Apps
Using Preact instead of React
React.js Best Practices for 2016
React Best Practics and Useful Functions
Those are just a handful of articles that you ought to read if you want to level up your React skills. And because the web industry constantly moves forward, you can expect things to change in a month or two. Meaning the articles that I’ve linked above might become outdated. So the best way to keep yourself updated is to occassionally check out blogs about React. Medium is a good place to start, because it is where developers gather to share their experiences in building apps with React:
React
React.js
Redux
Video Tutorials and Courses
The Complete React Web App Developer Course – if you want something that will take you from zero to hero, this is the course for you. This will teach you everything you need to know in order to build production-ready apps.
Building a Full-Stack App with React and Express – build an isomorphic web application that implements React, Express, Mongoose, and much more.
Building Scalable React Apps – in this course, you will learn how to scale your React application using the ready-made React-Boilerplate stack.
Styling React Components – if you want to create beautiful React apps, this course is for you. It will teach you some of the most promising or popular methods for styling UIs in React.
Mastering React Testing with Jest – an in-depth look at Jest, a test runner for React.
Complete Introduction to React (feat. Redux and React Router) – teaches you about React and the whole ecosystem surrounding it.
Books
Free
30 Days of React
Learning React.js
SurviveJS Webpack and React
Hacking with React
React Enlightenment
React.js Succintly
ReactJS Redux, the Right Way
Paid
React: Up and Running
React.js Essentials
Fullstack React
React Speed Coding
React – Beginners Guide
React + d3.js
Rails meets React
React by Example
Easy React Book
React Under the Hood
Pro React
ReactJS Cookbook
ReactJS Blueprints
Mastering React
If you want more, the author of the React book that I mentioned earlier has also compiled a list of books on React:
SurviveJS
Talks and Conferences
Real World React: Jonathan Beebe (Nodevember 2014)
Why does React Scale?: Christopher Chedeau (JSConf2014)
Functional UI Programming: Christian Johansen (flatMap 2014)
Rethinking Best Practices: Pete Hunt
React RESTful UI Rendering: Pete Hunt (Strange Loop 2014)
The Secrets of React’s Virtual DOM: Pete Hunt (FutureJS 2014)
Supercharge your React.js Development: Taylor Hakes
Immediate Mode UIs with React: Pete Hunt (SFJS Meetup 2015)
Reactive, Component-based UIs with React: Ben Anderson (E4E Developer Conf 2014)
Building single page apps with React.JS: Vagmi Mudumbai (JSFoo 2014)
React’s Architecture: Christopher Chedeau (OSCON 2014)
Rethinking Web App Development at Facebook: Hacker Way
The React website also compiles videos from the community:
Community Videos
If you want more, there are React conferences around the world which uploads their talks on Youtube:
ReactNext 2016
ReactRally 2016
ReactEurope 2016
React.js Conf 2016
React Amsterdam 2016
React.js Conf 2015
ReactEurope Conf 2015 Day 1
ReactEurope Conf 2015 Day 2 Playlist
Again, the React website compiles a list of conferences about React. So if you’re looking into attending a React conference, you can check out this page occassionally:
React Conferences
Videos from previous conferences are also linked in there if they’re available. So even if you can’t personally attend, you can still learn something.
More React Resources
If you’re still hungry for more, check out the following awesome lists on Github:
enaqx/awesome-react
brillout/awesome-react-components
Conclusion
In this post, you learned all about the things involved in creating a React app. Hopefully this post has helped you in your journey to become a full-fledged React developer.