Summary
Summary React (React.js) Web Development Fundamental Notes
- Institution
- Brunel University (BU)
Content to learn web development specifically R fundamentals to assist with developing projects during brunel university projects.
[Show more]
Content preview
🌐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
The benefits of buying summaries with Stuvia:
Guaranteed quality through customer reviews
Stuvia customers have reviewed more than 700,000 summaries. This how you know that you are buying the best documents.
Quick and easy check-out
You can quickly pay through credit card for the summaries. There is no membership needed.
Focus on what matters
Your fellow students write the study notes themselves, which is why the documents are always reliable and up-to-date. This ensures you quickly get to the core!
Frequently asked questions
What do I get when I buy this document?
You get a PDF, available immediately after your purchase. The purchased document is accessible anytime, anywhere and indefinitely through your profile.
Satisfaction guarantee: how does it work?
Our satisfaction guarantee ensures that you always find a study document that suits you well. You fill out a form, and our customer service team takes care of the rest.
Who am I buying these notes from?
Stuvia is a marketplace, so you are not buying this document from us, but from seller cslbrunel. Stuvia facilitates payment to the seller.
Will I be stuck with a subscription?
No, you only buy these notes for £2.99. You're not tied to anything after your purchase.
Can Stuvia be trusted?
4.6 stars on Google & Trustpilot (+1000 reviews)
52510 documents were sold in the last 30 days
Founded in 2010, the go-to place to buy revision notes and other study material for 14 years now