🌐
React Notes
React Crash Course
React Basics
React
A JavaScript library developed by Facebook for building user interfaces. React uses a
component-based architecture to create interfaces with an intuitive declarative
approach.
Key Characteristics of React:
Declarative: Describe what the UI should look like, not all of the implementation
details
Component based: Reusable pieces of UIs, like custom HTML tags
Unidirectional data flow: Data flows in 1 direction. React is dynamic, it will respond
to changes in some data, and that response will update the DOM.
Component
A reusable independent piece of a user interface. In modern React, components are
usually functional components, which are simply functions that return JSX.
JSX
React Notes 1
, Short for JavaScript XML, a JavaScript syntax extension for inlining XML and HTML in
JavaScript.
E.g. this code could be compiled into standard JavaScript function calls to create a
heading element:
const h1= <h1>Hello World</h1>
JSX is not React specific, but when used with React it will compile into React code.
(we usually wont call React.createElement because we use JSX syntax)
So now how do we take this React element and put it on the DOM?
ReactDOM
ReactDOM is a simple package and contains a few public functions. The main one
we’re going to use is ReactDOM.render(). So we take in some element created using JSX
and takes in the DOM container. We are essentially we are going to append our
element inside this DOM Container.
React Notes 2
, A package used with React to work as the bridge between React elements and the
actual DOM in the browser. The most frequently used ReactDOM function is the render
function, which adds a component to the DOM. E.g.:
ReactDOM.render(
<h1>Hello World</h1>,
document.getElementByID(’root’)
);
Functional Components
A function that returns a React element (JSX)
Components in PascalCase. Not all custom components are functions, we can use
classes as well but thats old syntax and not seen too often.
JSX
self-closing tag must be used with the forward slash at the end: <br />
React Notes 3
, You must only return a single element e.g. a p tag, h1, etc… You may put more
elements and use a div - however this may be unnecessarily adding more elements to
the DOM when you don’t really need a div… you can use react fragments.
React.Fragment
A React container component that renders its children without adding any additional
DOM nodes. This can be used for returning multiple adjacent elements without
wrapping them in an unnecessary element. For example:
<React.Fragment>
<h1>Hello World</h1>
<p>React is awesome!<p/>
</React.Fragment>
Fragments can also be created by using an empty tag, rather than the Fragment export
from React but we can no longer add a prop to these empty elements :
<>
<h1>Hello World</h1>
<p>React is awesome!<p/>
</>
JavaScript Expressions
React Notes 4
React Notes
React Crash Course
React Basics
React
A JavaScript library developed by Facebook for building user interfaces. React uses a
component-based architecture to create interfaces with an intuitive declarative
approach.
Key Characteristics of React:
Declarative: Describe what the UI should look like, not all of the implementation
details
Component based: Reusable pieces of UIs, like custom HTML tags
Unidirectional data flow: Data flows in 1 direction. React is dynamic, it will respond
to changes in some data, and that response will update the DOM.
Component
A reusable independent piece of a user interface. In modern React, components are
usually functional components, which are simply functions that return JSX.
JSX
React Notes 1
, Short for JavaScript XML, a JavaScript syntax extension for inlining XML and HTML in
JavaScript.
E.g. this code could be compiled into standard JavaScript function calls to create a
heading element:
const h1= <h1>Hello World</h1>
JSX is not React specific, but when used with React it will compile into React code.
(we usually wont call React.createElement because we use JSX syntax)
So now how do we take this React element and put it on the DOM?
ReactDOM
ReactDOM is a simple package and contains a few public functions. The main one
we’re going to use is ReactDOM.render(). So we take in some element created using JSX
and takes in the DOM container. We are essentially we are going to append our
element inside this DOM Container.
React Notes 2
, A package used with React to work as the bridge between React elements and the
actual DOM in the browser. The most frequently used ReactDOM function is the render
function, which adds a component to the DOM. E.g.:
ReactDOM.render(
<h1>Hello World</h1>,
document.getElementByID(’root’)
);
Functional Components
A function that returns a React element (JSX)
Components in PascalCase. Not all custom components are functions, we can use
classes as well but thats old syntax and not seen too often.
JSX
self-closing tag must be used with the forward slash at the end: <br />
React Notes 3
, You must only return a single element e.g. a p tag, h1, etc… You may put more
elements and use a div - however this may be unnecessarily adding more elements to
the DOM when you don’t really need a div… you can use react fragments.
React.Fragment
A React container component that renders its children without adding any additional
DOM nodes. This can be used for returning multiple adjacent elements without
wrapping them in an unnecessary element. For example:
<React.Fragment>
<h1>Hello World</h1>
<p>React is awesome!<p/>
</React.Fragment>
Fragments can also be created by using an empty tag, rather than the Fragment export
from React but we can no longer add a prop to these empty elements :
<>
<h1>Hello World</h1>
<p>React is awesome!<p/>
</>
JavaScript Expressions
React Notes 4
