Learn react.js from Top 45 Tutorials for the Past Year (V.2018)
Original author – Mybridge
Original address –
Medium. The mybridge. Co/learn – the react…
The translator –
hijiangtao
Translation address –
Hijiangtao. Making. IO / 2018/01/23 /…
The translator’s note: The author of the original article studied nearly 18,000 articles on React. Js to arrive at this summary, the full text includes not only introduction to React, advanced and comprehensive applications, but also special introduction to routing, React Native, animation, PWA and other contents. There are also many companies’ experience in front-end reconfiguration and the popular US TV series Silicon Valley’s attempt on React Native, which is very suitable for comparing your React technology stack, checking the gaps and making up the gaps, and suitable for favorites and reading. The translator retains the original text link and the corresponding author’s Medium or Twitter link address for the convenience of readers for further review and study. If there are any mistakes in this article, please comment.
We compared nearly 18,000 React. Js articles between January and December 2017 and selected the 45 study guides that are most likely to help you improve your Web development skills in 2018.
This is a very competitive list (45/18,000, or 0.25% chance of being selected) and a careful selection of the most helpful react.js articles from the past year. Mybridge AI evaluates the quality of articles by taking into account factors such as popularity, engagement, and time of publication.
To improve relevance, the study guide is divided into 15 groups (see below).
To catch up on the best react.js study guides you may have missed in the past year, prepare yourself for plenty of reading time. If you’re looking for a react.js open source project in the past year (AVg.3,366 ⭐️): click here
Recommended tutorials
Use Redux, Webpack, and React-Router to build websites.
B) advanced: advanced React and Redux: authentication, testing, middleware, HOC, and deployment [34,116 recommendations, 4.7/5 stars]
Click the number title to enter the corresponding study guide. Numerical numbers do not represent rankings)
< A guide >
No 1
Under the Hood: ReactJS – Interprets the entire React code base (Stack and Fiber versions) in visual block mode. Courtesy of Bohdan Liashenko.
No 2
React Bits: Everything you need to know about React. Courtesy of Vasa.
No 3
React Express: An all-in-one beginner’s guide to modern React application development. Courtesy of Devin Abbott.
No 4
Serverless Stack: A guide to creating full-stack Serverless applications using React. Js, AWS Lambda, API Gateway, DynamoDB, and Cognito. Courtesy of Frank Wang and Jay V.
< 2, get started >
No 5
All basic concepts about React. Js are covered in this Medium article. Courtesy of Samer Buna and Fred Codecamp.
No 6
2017 React: A quick review. Courtesy of Joshua Comeau and Hackernoon.
No 7
Use WebPack and Babel to create a React development environment. Courtesy of Joy Warugu and Scotch Development.
No 8
Isn’t our code Just the BEST: Looking back over the last 6 hellish weeks, I rewrote the React bumpers. Courtesy of FAT.
< 3. Components >
No 9
We wrote best practices for React constructs. Courtesy of Scott Domes.
No 10
Here are seven architectural benefits of a reliable React component. Courtesy of Dmitri Pavlutin.
No 11
Simple React mode: Handle side effects in React.
No 12
A brief introduction to advanced components. Courtesy of Robin Wieruch.
No 13
Eight important React component decisions. Courtesy of Cory House.
4. Structure & Organization
No 14
The 100% right way to build a React app (or why there is no such thing). Courtesy of David Gilbertson.
< 5, GraphQL >
No 15
How to GraphQL – Full stack tutorial for GraphQL. Courtesy of Graphcool.
“Six, the Router >
No 16
Everything about React Router 4. Courtesy of Brad Westfall.
No 17
Set up your own React Router V4. Courtesy of Tyler McGinnis.
< 7, Redux >
No 18
8 things to learn in React before using Redux Courtesy of Robin Wieruch.
No 19
4 ways to Redux: Thunk vs Saga vs Observable vs Redux Promise Middleware in 10 minutes Courtesy of Nader Dabit.
No 20
JavaScript immutability using Redux. By David Xu and Toptal.
< 8, server render >
No 21
Scalable React server rendering. Courtesy of Robert Arkwright.
No 22
What does React 16 bring to server-side rendering? Courtesy of Sasha Aickin.
< 9, Advanced >
No 23
Clean Code vs. Dirty Code: React best practices. Courtesy of Donavon West.
No 24
The function setState is the future of React. Courtesy of Justice Mba.
< X, performance >
No 25
React, inline functions and performance. Courtesy of Ryan Florence.
No 26
Optimize your React application performance. Courtesy of Alex Sears and Auth0.
No 27
React performance fixes on Airbnb listing pages. Courtesy of Joe Lencioni.
No 28
How to dramatically improve your React app performance. Courtesy of Noam Elboim.
Progressive Web App
No 29
A case study of Progressive Web App performance for Tinder. Courtesy of Addy Osmani.
No 30
A React and Preact case study of Progressive Web App performance: Treebo. Courtesy of Addy Osmani.
No 31
Twitter Lite and massive high-performance React Progressive Web Apps. By Paul Armstrong.
No 32
Build a small PWA application using Preact and Firebase. Courtesy of Dan Denney.
< 12, React Native>
No 33
React Native dramatically speeds up developers on Instagram. Courtesy of Instagram Engineering.
No 34
How to build our own React Native app. Courtesy of Siddharth Jain.
No 35
How did I build a super-fast Uber clone for the mobile Web? Courtesy of Narendra N Shetty.
No 36
Compare the performance of Native iOS (Swift) and React-Native. Courtesy of John A. Calderaio.
13. Case Study
No 37
Refactoring the Airbnb front end. Courtesy of Adam Neary, Software Engineer, Airbnb.
No 38
The HBO series Silicon Valley uses Mobile TensorFlow, Keras, and React Native to build “Not Hotdog.” Courtesy of Tim Anglade.
No 39
Create a Docker dashboard using TypeScript, React, and socket. IO. Courtesy of Steve Hobbs.
No 40
More and more pain: Migrating Slack’s desktop app to BrowserView. By Charlie Hess, Slack software engineer.
No 41
How do I build my platform? Courtesy of Robin Wieruch.
14. Animation
No 42
Dive into the React animation. Courtesy of Nader Dabit.
No 43
Get the virtual DOM moving — Sarah Drasner. Courtesy of Sarah Drasner.
15. Interview
No 44
React Interview Questions and Answers
No 45
React Interview question: What is rendered in the browser, a component or an element? Courtesy of Samer Buna.
These are my react.js study guides for the year. It is useful to learn how to use React in your daily life.
The last
If you like to use wechat, you can follow your personal public account. Search “Anxiao” on wechat or scan the TWO-DIMENSIONAL code to follow it. It will synchronize my articles published on Zhihu and my personal blog to talk about the front-end technology and the often interesting things. Those who like to use Zhihu can pay attention to my column junior front-end engineer.
Life will inevitably make mistakes, please give more advice!