Skip to content

Instantly share code, notes, and snippets.

@samuraijane
Last active September 18, 2022 18:45
Show Gist options
  • Save samuraijane/87cf8093905cac04ebcb56a42994eb41 to your computer and use it in GitHub Desktop.
Save samuraijane/87cf8093905cac04ebcb56a42994eb41 to your computer and use it in GitHub Desktop.
React 101 – A brief introduction to React

React 101

A brief introduction to React

React

  • React is a <1> available at NPM
  • As such, any project built with React will have the file <2> even though React is used to write front-end code
  • A React project is built from separate <3> which keep the code compartmentalized
  • It was created and is maintained by developers at <4>
  • React uses a <5> to update the HTML DOM; your React code should not <6> the HTML DOM directly
  • React attaches itself to the DOM through the <7> which is located in src/index.js
  • All of the code related to components is contained with the <8> directory

Components

  • Components are <9> that share similarities with JavaScript <10> functions
  • They must always return <11>
  • JSX stands for <12>
  • It looks like <13> but it is not <14>
  • Each element in JSX must have either a corresponding closing tag or <15> tag
  • JSX can have only one <16> element; all others must be nested inside of it
  • Components are exposed and consumed for use through <17> and <18> statements; this makes it quite easy to pass them around as needed
  • Elements within JSX have <19>, short for properties, but they look like HTML attributes
  • Some of them are actually identical to HTML attributes, such as <20>, but others are different, such as <21> instead of class
  • Unlike the functions you have learned about up until now, a component is not called but is <22> instead
  • Rendering happens when the component is included within the <23> of another component
  • The components form a tree whose root is contained within React's <24> method of the <25>
  • Each component name in React must begin with <26> but the filename itself does not have to be <27>
  • The extension of the filename can be .js or .jsx but <28> is preferred
  • A component's return is not followed by any <29> or <30> that you have previously learned about
  • If the component returns a <31>, it is written on one line
return <p>Hello world</p>;
  • However, a multi-line return needs <32>
return (
  <div>
    <p>Hello</p>
    <p>world</p>
  </div>
);

Key terms and phrases

  1. a capital letter
  2. capitalized
  3. className
  4. components
  5. data structure
  6. data type
  7. entry point
  8. entry point
  9. export
  10. Facebook
  11. functions
  12. HTML
  13. HTML
  14. id
  15. import
  16. JavaScript XML
  17. .jsx
  18. JSX
  19. JSX
  20. library
  21. manipulate
  22. package.json
  23. parent
  24. parentheses
  25. props
  26. render
  27. render
  28. rendered
  29. self-closing
  30. shadow DOM
  31. single element
  32. src
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment