Reading: Props and State
Review, Research, and Discussion
- Does a deployed React application require a server?
- No you don’t need a server.
- Why do we prefer to test a React application at the behavior rather than the unit level?
- The user will deal with the app so it is better to test the whole app behavior.
- What does
npm run builddo?- will create an optimized build of your app in the build folder.
- Describe the actual composition / architecture of a React application
- Components of the page.
- an app which is had the components
- an index renders the app
Vocabulary
- BDD
- Behavior-driven development, in software engineering, behavior-driven development is an agile software development process that encourages collaboration among developers, quality assurance testers, and customer representatives in a software project.
-
For further information clicks =>here
- Acceptance Tests
- Acceptance testing, a testing technique performed to determine whether or not the software system has met the requirement specifications. The main purpose of this test is to evaluate the system’s compliance with the business requirements and verify if it is has met the required criteria for delivery to end users.
-
For further information clicks =>here
- Mounting
- Mounting is the phase in which our React component mounts on the DOM (i.e., is created and inserted into the DOM). This method is called just before a component mounts on the DOM or the render method is called. After this method, the component gets mounted.
-
For further information clicks =>here.&text=This%20method%20is%20called%20just,method%2C%20the%20component%20gets%20mounted.)
- build
- It correctly bundles React in production mode and optimizes the build for the best performance. The build is minified and the filenames include the hashes. Behind the scenes, it uses babel to transpile your code and webpack as the build tool to bundle up your application.
-
For further information clicks =>here
Preparation
- setState
- React components can, and often do, have state. State can be anything, but think of things like whether a user is logged in or not and displaying the correct username based on which account is active. Or an array of blog posts. Or if a modal is open or not and which tab within it is active.
- React components with state render UI based on that state. When the state of components changes, so does the component UI.
- That makes understanding when and how to change the state of your component important. At the end of this tutorial, you should know how setState works, and be able to avoid common pitfalls that many of us hit when when learning React.
-
For further information clicks =>here
- Handling Events
- Handling events with React elements is very similar to handling events on DOM elements. There are some syntax differences:
- React events are named using camelCase, rather than lowercase.
- With JSX you pass a function as the event handler, rather than a string.
-
For further information clicks =>here
- Handling events with React elements is very similar to handling events on DOM elements. There are some syntax differences:
- Forms
- Handling events with React elements is very similar to handling events on DOM elements. There are some syntax differences:
- React events are named using camelCase, rather than lowercase.
- With JSX you pass a function as the event handler, rather than a string.
-
For further information clicks =>here
- Handling events with React elements is very similar to handling events on DOM elements. There are some syntax differences:
- Handling Events
- HTML form elements work a bit differently from other DOM elements in React, because form elements naturally keep some internal state.
- Controlled Components:
- In HTML, form elements such as
<input>,<textarea>, and<select>typically maintain their own state and update it based on user input. In React, mutable state is typically kept in the state property of components, and only updated with setState(). - We can combine the two by making the React state be the “single source of truth”. Then the React component that renders a form also controls what happens in that form on subsequent user input. An input form element whose value is controlled by React in this way is called a “controlled component”.
- In HTML, form elements such as
-
For further information clicks =>here
- State and Lifecycle
- Each component has several “lifecycle methods” that you can override to run code at particular times in the process. You can use this lifecycle diagram as a cheat sheet. In the list below, commonly used lifecycle methods are marked as bold. The rest of them exist for relatively rare use cases.
- Mounting
- These methods are called in the following order when an instance of a component is being created and inserted into the DOM:
- constructor()
- static getDerivedStateFromProps()
- render()
- componentDidMount()
- Updating
- An update can be caused by changes to props or state. These methods are called in the following order when a component is being re-rendered:
- static getDerivedStateFromProps()
- shouldComponentUpdate()
- render()
- getSnapshotBeforeUpdate()
- componentDidUpdate()
-
For further information clicks =>here
- Each component has several “lifecycle methods” that you can override to run code at particular times in the process. You can use this lifecycle diagram as a cheat sheet. In the list below, commonly used lifecycle methods are marked as bold. The rest of them exist for relatively rare use cases.
- Components and Props
- Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. This page provides an introduction to the idea of components.
-
For further information clicks =>here
| Read | Title | ToGo |
|---|---|---|
| Read: 01 | Pre-Work - Code 401: Advanced Javascript Development |  |
| Read: 02 | Readings: Express | |
| Read: 03 | Readings: Express REST API | |
| Read: 04 | Readings: Data Modeling | |
| Read: 06 | Readings: Authentication | |
| Read: 07 | Reading: Bearer Authorization | |
| Read: 08 | Reading: Access Control (ACL) | |
| Read: 09 | Reading: OAuth 2 | |
| Read: 11 | Readings: Event Driven Applications | |
| Read: 12 | Readings: Socket.io | |
| Read: 13 | Readings: Message Queues | |
| Read: 14 | Readings: Event Driven Architecture | |
| Read: 16 | Readings: AWS: Cloud Servers | |
| Read: 17 | Readings: AWS: S3 and Lambda | |
| Read: 18 | Readings: AWS: API, Dynamo and Lambda | |
| Read: 18 | Readings: AWS: Events | |
| Read: 26 | Reading: Component Based UI | |
| Read: 27 | Reading: Props and State | |
| Read: 28 | Readings: Component Composition | |
| Read: 29 | Readings: Routing | |
| Read: 31 | Reading: Hooks API | |
| Read: 32 | Reading: Custom Hooks | |
| Read: 33 | Reading: Context API | |
| Read: 34 | Reading: <Login /> and <Auth /> |
|
| Read: 36 | Reading: Application State with Redux | |
| Read: 37 | Readings: Redux - Combined Reducers | |
| Read: 38 | Readings: Redux - Asynchronous Actions | |
| Read: 39 | Readings: Redux - Additional Topics | |