I've spent the past 3 weeks learning React.
I find that doing theory and practical tests help me to improve my understanding of how React works.
I've been using the following resources simultaneously to improve my understanding:
- Codecademy Learn ReactJS: Part 1
- Free Code Camp React section
- React Bites
- React for beginners by Wes Bos
This is what I've learnt so far with Codeacademy:
React is a JavaScript library used for building user interfaces.
You can create an event listener by giving a JSX element a special attribute.
<img onClick = {myFunc} />
Event listeners attribute name should be like onClick, onMouseOver etc.
The word on plus type of event you're listening for.
An event listener attributes value = Function
The example above would only work if myFunc was a valid function.
In JSX event listener names are written in camelCase.
You cannot inject an if statement into a JSX expression because of how JSX is compiled.
If you want to create a list of JSX elements, then .map()
Sometimes the list will need keys. A key is a JSX attribute that needs to be unique.
React uses them to keep track of lists.
If you don't use keys when you need to, React might accidentally scramble list items in wrong order!
A list needs keys if:
- list-items have memory from one render to the next (e.g. When to-do list renders, each item must remember whether it was checked off)
- A list's order might be shuffled (e.g. A list of search results might be shuffled from one render to the next)
OR
How to get .map() to produce a unique key each time it loops.
React.createElement - write React code without JSX!
This is what the code looks like after compiling:
const h1 = React.createElement(
"h1",
null,
"Hello World"
);
Components are reusable code that usually render html.
import React from 'react';
This line creates a new variable, it's value is a particular imported JavaScript object.
Every component must come from a component class.
Use component class to produce as many components as you want. To make a component class use React.Component
React.Component is a JavaScript class to create your own component class:
class YourComponentNameGoesHere extends React.Component { }
Component class variable names must begin with capital letters.
The render() method should contain a return statement. Usually the return statement returns a JSX expression. Whenever you make a component, that component inherits all of the methods of its component class.
A multiline JSX expression expression should always be wrapped in parentheses ()
Use a variable attribute in a component
You can put calculations that need to be performed before a component renders within the render() function.
Display an item from an array of objects
When using a conditional in a render function, the if statement appears before the return.
Render functions contain event listeners.
Using an event listener in a component.
In React, you define event handlers as methods on a component class.
</div>