React News Tuesday, March 13 Tip, Console log, Pagedraw & more…
React News TLDR / Table of Contents
- I must admit it for the first time, and I’ll use this platform to clean up the skeletons from my development closet. Sometimes, the magic I do — which some call “coding” — is not as perfect as the…
- Tip, console log, good old console, sneaky memory leak, sneaky performance issue
- Launch HN: Pagedraw (YC W18) – Compile UI Mockups to React Code | Hacker News
- pagedraw, react, code, app, React Native
- GitHub is where people build software. More than 27 million people use GitHub to discover, fork, and contribute to over 80 million projects.
- Google Chrome, latest Safari, additional props, built-in function, child element
- ; //log a message or an object to happened…); //same as console log – console.warn(Something strange happened…); //same as console log but outputs a horrible happened…); //same as console log but outputs an error – So hopefully now, I can give you some tips which you didnt know before, and…
- Tip #2 console.time() console.timeEnd() – If you are trying to find a sneaky performance issue, start counting time with console.time() and print with console.timeEnd().
- Tip #7 console.group(group) writing so many logs, you might want to organize them.
- Tip #9 console.clear() – Well, having written so many logs, its now time to clear your console a little.
- You can actually print a very nice table with the objects you log using the console.table() – I really hope these tips make your debugging a bit more productive, and even a little fun!
- Pagedraw is a UI builder that turns mockups into React code.
- Pagedraw lets you annotate mockups with extra information (like how to connect to the backend, resize for different screens, etc.) to get full, presentational, React Components.
- In one corner are tools like Dreamweaver, which can produce correct code but have to expose some of the underlying HTML model, making their users play a puzzle game to do something as simple as move an object around.
- In the other corner are freeform design tools that generate position:absolute code.
- Past tools never fully worked because they tried to unify two fundamentally different mental models: the designers mental model of a free form canvas like Sketch or Photoshop, and the DOMs mental model of
followed by a
followed by an and so on.
- In Dynamically Add Props To A Child Component, I talked about how a child element can be reconstituted with additional props.
- The approach I showed will only work in the case of a single child being nested in that component.
- What if you want your component to account for one, many, or even children?
- React comes with a built-in function for mapping that handles these cases.
- The function allows mapping over one or many elements and if is or , it will return or respectively.
Top React Courses
Modern React with Redux (86,762 students enrolled)By Stephen Grider
- Build amazing single page applications with React JS and Redux
- Master fundamental concepts behind structuring Redux applications
- Realize the power of building composable components
- Be the engineer who explains how Redux works to everyone else, because you know the fundamentals so well
The Complete React Native and Redux Course (53,888 students enrolled)By Stephen Grider
- Create real-world native apps using React Native
- Make truly reusable components that look great
- Understand the terminology and concepts of Redux
- Prototype and deploy your own applications to the Apple and Google Play Stores
- Get up to speed with React design principles and methodologies
- Discover mobile design patterns used by experienced engineers
Advanced React and Redux (35,016 students enrolled)By Stephen Grider
- Build a scaleable API with authentication using Express, Mongo, and Passport
- Learn the differences between cookie-based and token-based authentication
- Figure out what a Higher Order Component and how to use it to write dramatically less code
- Write Redux middleware from scratch to uncover what is happening behind the scenes with Redux
- Set up your own testing environment with Mocha and Chai
- Realize the power of building composable components
React Redux React-Router: From Beginner to Paid Professional (11,715 students enrolled)By Leonardo Daniel
- Building your amazing web applications with React JS and Redux
- Getting a high-paying job as a front-end developer
- Becoming familiar with the technologies supporting React, including NPM, Webpack, Babel, and ES6/ES2015.
React Native: Advanced Concepts (16,058 students enrolled)By Stephen Grider
- Make compelling applications using expert-level features of React Native
- Create amazingly smooth and performant animations
- Build new React Native apps with Expo
- Understand the latest Navigation options for new React Native apps
- Add logic to your Firebase backend with Google Cloud Functions
- Update your users with cross platform Push Notifications
- Handle your users going offline with Redux Persist
React JS and Redux - Mastering Web Apps (54,299 students enrolled)By David Katz
- Develop entire React JS and Redux applications from scratch.
- Build applications that deal with APIs and web requests.
- Create web apps with full authentication, and real-time database.
React basic in just 1 hour (22,331 students enrolled)By Leo Trieu
- Taste of how to build your very first React component.
- How to handle event in components.
- Understand two key concepts of React: State and Props.
- How to reuse and nest components.
- How to transfer data between Parent, Child components.
- How to work with Array, Form
Meteor and React for Realtime Apps (7,889 students enrolled)By Stephen Grider
- Create interactive web apps amazingly fast
- Build amazing single page applications with Meteor and React JS
- Master fundamental concepts behind structuring Meteor applications
- Learn the true purpose of Meteor in a modern application
- Be the engineer who explains how Meteor works to everyone else, because you know the fundamentals so well
- Build and prototype interesting personal projects in a weekend
GraphQL with React: The Complete Developers Guide (14,683 students enrolled)By Stephen Grider
- Build amazing single page applications with React JS and GraphQL
- Master fundamental concepts behind structuring GraphQL servers
- Realize the power of building flexible data schemas
- Be the engineer who explains how GraphQL works to everyone else, because you know the fundamentals so well
- Become fluent in the ecosystem supporting GraphQL, including the differences between Apollo and Relay
- Create ES6 applications from the ground up.
- Use the terminal/command-line application and a code editor to code.
- Look at ES6 code and understand keyword and concepts.
- Create live development servers with Webpack.
- Code in es6 comfortably, using all the new features.
- Build es6 projects from the ground up using tools like webpack and babel.
- Create a basic ReactJS application from scratch.