How do you go about learning React?
- Find a list of core concepts in react. (see list below)
- Write small code examples for each with a written description on what is going on.
- Combine all the small examples into a working application.
What is React?
- All about building modern reactive user interfaces for the web.
- Declarative, component focused approach.
How does react work?
React creates a virtual DOM which means changes can be made to the UI and only that specific part that was updated not the whole page.
What is declarative code?
- is a way to write code that describe what you want to do.
- rather than imperative which is how you do something.
What is JSX?
State vs props
State is used to handle data in the application which will be reactive and update in turn then update the UI.
Props are used to pass data/or state through to other components in the application that react to the state update.
What is reactDOM?
- is a package that provides DOM (document object model) specific methods. These methods can be used to manage the DOM in an effective easy way.
- Hooks are a new addition in React 16.8. This is a move away from class based components. You can access the state by using a hook called useState. Some of the main hooks are useState, useEffect, useContext, useReducer and useRef. There are a few more also.
What is Redux?
- Redux is a state management library for React. It allows you to centralise state in once place rather passing state through multiple components.
The above gist
line 1: we import
line 4: we use array destructuring,
count is our state
setCount is the function we use to update the state.
line 4: 1 is passed into
useState this is are starting state
setCount is called passing the starting state
count plus 1
count is placed into the JSX
onClick is used to call the function that updates our count
The above gist
line 4: we set our state to and object
line 9: function to update state
line 10: we use
prevState as we want to keep the previous state and update only part of the object
line 13: we use the spread operator to create a copy of the object
line 14: we select the key we want to update, and change the value
line 19 down: we click to call the function and update the key displaying it to the DOM.
prevState is used so we keep the old state and update only the selected value.
props are used to pass information (state or other) to components and share this information. Once the source of the props is updated all components using this prop will then update.
message prop name is set to a string
HelloWorld.js takes props and returns the
Lifting up state
The above gist
line 6: state is set
line 8: function that updates state
line 15: Button component,
updateMessage set to the
line 3: click event from the pass props
line 4: we access the parent function through props, passing in the message
Button is clicked now the parent App.js updates the state, line 14: now shows the
Use ref can be used to reference input fields and get the value from the input.
useRef is imported
line 6: we store
useRef() in a const
ref is set the
line 9: we access the value from the input. using
line 9: state is updated,
message is updated in the DOM.
Avoid div soup and write cleaner html. React allows one root DOM element. This means sometimes using
div where it's not really needed. Fragments solve this.
Refs cannot be used when adding the
ref tag to a component. In order to use refs when passing to a child component you can use forwardRefs.
Line 1: import useRef
Line 2: import import component
Line 5: create useRef
Line 8: focus on the input with ref
Line 13: add pass ref to child component
Line 1: import forwardRef
Line 3: Wrap component in forwardRef function, pass props and ref as required
Line 4: set the ref to the input
Now back in App.js we on click
Line 14: we set the focus to the child input.
Use effect is a way to call code on page and respond to any updates inside the use effect method, calling the code again.
Im not sure if the above made much sense. However it's a method that is used for when the component is mounted and when an effect triggers the code inside the use effect method.
Let's look at an example. This example is an email and password login. We want to check on page load if the user is logged in.
Using useEffect we can check local storage for logged in user.
The above gist has a few things going on. But we only need to focus on line 10 for now.
Inside we check for local storage item, if its then we update the state.
What this allows us to do is, on page refresh we can fire the useEffect method - checking local storage. if true then we update the state to so the user is logged in.
Use effect takes an array as the second argument. In here the dependencies that are being updated (state should be passed in ) this way react knows which state to look out for changes and fire the function again.
The below gist shows a login screen, the useEffect function takes the two dependencies as array items. Now if either update the function is called again.
Gist showing useEffect dependencies
Sometimes you have more complex state - for example if it got multiple states, multiple ways of changing it or dependencies to other states.
more powerful state management.
More complex to use.
good replacement for useState when you have state that belongs together.
useReducer takes two arguments, a function and the initial state.
The variable name dispatch calls the reducer function, which in turn updates the state.
Using this methods allows us to handle complex logic in the reducer function.
That's some of the core basic concepts, with small examples. The trick now is too combine to create a small application.
Link to follow showing a small project with core basic concepts. Thanks.