Twitter | Search | |
This is the legacy version of twitter.com. We will be shutting it down on 15 December 2020. Please switch to a supported browser or device. You can see a list of supported browsers in our Help Center.
Chris Achard
πŸ”₯ Learn React in 10 tweets (with hooks) πŸ‘‡
Reply Retweet Like More
Chris Achard 20 Sep 19
Replying to @chrisachard
1/10 How React Works: - you display data on a webpage - a user interacts with it - now the data changes... - ...and you want the webpage to look different React does that for you! πŸ’―
Reply Retweet Like
Chris Achard 20 Sep 19
Replying to @chrisachard
2/10 To think in React: Break your UI into custom components. Each component is responsible for displaying itself, based on the _external_ and _internal_ data available. Build trees of these components for a full UI
Reply Retweet Like
Chris Achard 20 Sep 19
Replying to @chrisachard
3/10 Components are functions that return JSX JSX looks like HTML but is actually JavaScript Inside of JSX use curly braces to contain JS A lot of people go "YUCK!" when they see HTML mixed into JS, but JSX is actually one of the things that makes React awesome πŸ¦„
Reply Retweet Like
Chris Achard 20 Sep 19
Replying to @chrisachard
4/10 After defining a function component, you can use it within another component - it is a "custom component" Use this method to build a "tree" of components that defines your entire UI
Reply Retweet Like
Chris Achard 20 Sep 19
Replying to @chrisachard
5/10 Data that comes in from the outside of a component is called "props" (properties) This can be passed from a parent to a child through JSX attributes Props come into function components as the first argument to the function.
Reply Retweet Like
Chris Achard 20 Sep 19
Replying to @chrisachard
6/10 Internal, _changeable_ data is called "state". State is defined by the `useState` function, which returns the data, and a function to change that data (in an array). NEVER set the state variable directly - always use that function (because of the next point πŸ‘‡)
Reply Retweet Like
Chris Achard 20 Sep 19
Replying to @chrisachard
7/10 When state or props change, your component updates AUTOMATICALLY πŸŽ‰ ✨ This is the magic of React! ✨ You almost _never_ have to go into the DOM yourself (If you think that you do - you're probably trying to do it the "hard way")
Reply Retweet Like
Chris Achard 20 Sep 19
Replying to @chrisachard
8/10 Make lists of things by looping over an array of data with `map` Return an element from each loop iteration Provide a unique `key` to each element in the list to ensure best performance
Reply Retweet Like
Chris Achard 20 Sep 19
Replying to @chrisachard
9/10 2 built-in ways to style components: 1. Set the class with `className`, and use regular CSS files 2. Set inline styles with `style={{ }}` and camel cased keys πŸ‘‰ notice the double curly braces
Reply Retweet Like
Chris Achard 20 Sep 19
Replying to @chrisachard
10/10 Perform Async functions and side effects inside of `useEffect` (takes a callback) The second argument is an array of dependencies. Include any variable the useEffect uses that might change, or an empty array if there are none.
Reply Retweet Like
Chris Achard 20 Sep 19
Replying to @chrisachard
Bonus/ That's it! Most of React is just special cases of those 10 points. πŸ‘€ Now: want to watch this crash course as a screencast? Your wish is granted! πŸŽ‰ Check it out for a better understanding of each point πŸ‘‡
Reply Retweet Like
Chris Achard May 11
Replying to @chrisachard
This is now a free egghead collection! πŸŽ‰ πŸ”₯ React Crash Course - React in 14 minutes πŸ”₯
Reply Retweet Like