- 2.How to write JSX
- 3.How to write and render React components
- 4.How to use props
- 5.How to use state
- 6.What are component lifecycles and lifecycle methods
- 7.How to handle JS events in React
- 8.How to design component architecture
We will use React's official guide and tutorial to learn React, and React's official app-starter kit Create React App to build React apps. Create React App contains a tool called Webpack that translates React to code that browsers can read. Browsers do not read React natively; they read HTML, CSS and JS, not JSX.
This is only required if the React inbuilt hot-reloading function isn't working as intended.
After forking and cloning the exercise repository please access it through your code editor.
In the package.json please find:
"start": "react-scripts start",
"start": "WATCHPACK_POLLING=true react-scripts start",
This will mean that when you run the
npm startcommand the React application will use polling, any changes you make while running the app will be reflected in the browser after a few seconds. This is a work around, React hot-reloading should work straight out of the box.
document.getElementById('root')is a DOM (Document Object Model) command that retrieves the HTML element with ID "root". React renders our app inside that element. React removes the need to write DOM code and the above command is the only DOM command we will need.
- 2.Rocket recommends we play with as many of the provided CodePen examples as we can to understand the relevant concepts
- 3.Rocket recommends completing the "Main Concepts" guide before attempting the "practical tutorial" so the "practical tutorial" concepts sink in better
- 4.If there is anything you do not understand in the guide, please let your SL know and we can include it in these notes!
Inside the CRA
- 2.To apply CSS classes to JSX elements we will need to use the
classNamekeyword instead of
class, which we used with vanilla HTML. This is because
classis a reserved keyword in JS used to declare classes (which we will see in 4: Components and Props below).
- 1.React follows what we call a "declarative" UI paradigm, where we tell our computers how the UI should look, but not how to achieve that look. In the clock example on this page, we tell React that the latest time should always be in the
h2element, but we never explicitly tell React to update the value in the
h2element. The declarative paradigm is a layer on top of the "imperative" paradigm of DOM manipulation more commonly used before React.
setIntervalis a function that runs a given "callback function" at a specified time interval. A callback function is a function that runs at a later time when triggered by an event, such as the timer in
superfunction in the class
constructorfunction runs the
constructorfunction of the class' parent class, if any. In the
constructorfunction of the
React.Componentclass. This helps classes we create that "inherit"
React.Componenthave all functionality of
React.Componentwithout us having to declare that functionality.
React Counter Component - Implementing state
Introduction to Life Cycle Methods
React Clock Component - Life Cycle Methods
React Clock Component - ComponentWillUnmount
- 3.Rocket recommends using the "public class fields syntax" to define callback methods (functions are called methods when inside classes) inside class components. We will be using Create React App to build React apps which enables this syntax by default.
- 1.Conditional rendering is one of the most powerful features of React, enabling us to use conditional logic to specify what a component should render.
- 1.Rocket recommends always using keys when rendering JSX elements in a list for performance reasons.
- 1.An HTML form is an HTML element that either refreshes the page or navigates to a new page when the user submits the form. We often do not want this behaviour in React, opting to update UI on submit without refresh. To disable "refresh on submit" behaviour, Rocket recommends the technique in the React docs, to provide the
handleSubmitcallback function that calls
Building React Form State
Binding state and handlingChange
- 1.It is important that we pass both the temperature value and handle-change function from
TemperatureInputso the app can maintain only 1 "source of truth" state for temperature value in
Calculator. If it helps, Rocket recommends drawing the component hierarchy to visualise how data flows in the application and verifying our understanding with our classmates and section leader.
Why lift up state?
Defining initial state / data and using that data
Creating a Blog Component within the BlogList, passing down state as props
Powering the Blog functions with methods in the BlogList, passing functions as props
Creating a BlogComposer with internal logic
Lifting up state
- 1.Composition vs inheritance is an architectural paradigm of React where React prefers composing components with other components, instead of defining parent-child inheritance relationships like with traditional OOP classes.
- 2.Review 10: Lifting State Up above for a refresher on passing "callbacks" (i.e. callback functions) to descendant components to update shared state in ancestor components.
- 1.Rocket recommends starting with Setup Option 1 (Write Code in Browser) to focus on understanding React. If you finish the tutorial and have time, do Setup Option 2 (Local Development Environment) and port your code over to understand how to use Create React App. We will use Create React App to develop all frontend projects at Rocket.
- 3.Note the tutorial's recommendation to use
on[Event]naming convention for props that represent events and
handle[Event]for methods that handle events.
Complete all exercises in the following Codecademy lessons when they are assigned in the Rocket course schedule.