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?
- React is a javascript library for building user interfaces.
- A client-side javascript library.
- 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?
- JSX is javascript and XML combined meaning you can write html inside javascript. This allows you to write components in React easily.
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.
Explain hooks?
- 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.
Core concepts
useState
The above gist
line 1: we import useState
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
line 7: setCount is called passing the starting state count plus 1
line 16: count is placed into the JSX
line 17: onClick is used to call the function that updates our count
prevState
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.
The above, prevState is used so we keep the old state and update only the selected value.
props
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.
line 7: message prop name is set to a string hello world!
HelloWorld.js takes props and returns the props.message
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 handleUpdateMessage function
Button.js
line 3: click event from the pass props handleButtonClick
line 4: we access the parent function through props, passing in the message hello!
Button is clicked now the parent App.js updates the state, line 14: now shows the hello message.
useRef
Use ref can be used to reference input fields and get the value from the input.
Above gist
line 1: useRef is imported
line 6: we store useRef() in a const
line 15: ref is set the useRef const
line 9: we access the value from the input. using .current.value
line 9: state is updated, message is updated in the DOM.
Fragments
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.
Without fragment
With Fragment
Forward refs
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.
Above gist
App.js
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
InputText.js
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
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.
useEffect dependencies
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
useReducer
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.
Conclusion
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.
Top comments (0)