apress / just_react Goto Github PK
View Code? Open in Web Editor NEWSource Codes for the book "Just React" by Hari Narayn
Source Codes for the book "Just React" by Hari Narayn
If you create a new style in App.css and apply that to the div in the suspense you can have the loading message appear in the correct location:
App.css
.enrollListSuspense {
position: absolute;
top: 800px;
left: 50%;
transform: translate(-50%, -50%);
width: 40%;
height: 450px;
text-align: center;
display: flex;
}
updated suspense:
<Suspense fallback={<div className="enrollListSuspense"> Enrolled student details loading......</div>}>
In your markup, you are using <label for="firstName"></label>
. That is causing an error in the console since in JSX "for" is a keyword. The correct markup would be <label htmlFor="firstName"></label>
UG has defaultChecked
<li className="parentLabels" onChange={handleChange}>
<input
type="radio"
value="UG"
name="programGroup"
defaultChecked
/>
description says defaultChecked
, code sample uses checked={true}
:
<li className="parentLabels" onChange={handleChange}>
<input
type="radio"
value="UG"
name="programGroup"
checked={true}
/>
You wrote this:
As opposed to having a form submit event, we have a button click listener. The code behaves exactly like before. Now, there is no onSubmit event in the form. Instead, there is an onClick event on the button, which calls the same handleSubmit function:
<input
type="submit"
id="btnEnrol"
name="Enrol"
alt="Enrol"
value="Enrol"
onClick={handleClick}
/>
You probably meant that it calls the same functionality. But the name has changed, so it's not calling handleSubmit. The next bullet on page 112 renames it. the order of these directions, especially with the page break (which I know you don't have any control over) is confusing.
Up to this point, the EnrolList arrow function is:
const EnrolList = () => {
The code snippet to use the effect requires the arrow function to be updated to this:
const EnrolList = (props) => {```
but that instruction isn't given.
---
Page 158 has the following text, which appears to be the same info twice:
Previously, in this function, we were setting available seats using props.setUpdatedSeats(props.currentSeats - 1). We removed this as our objective is not to have references to seats in this component. We will set this up in the EnrolList component.
In the previous version of this function, available seats were set by props.setUpdatedSeats(props.currentSeats - 1). As we want to do this from within the EnrolList component, I deleted this line.
In chapter 4, the file EnrolmentFrom.js has the following line for handleClick function:
props.setUpdatedSeats(props.currentSeats - 1);
When an edit is made, the seat number is decreased (which shouldn't happen if program is not changed).
I think the line should be replaced with:
if (btnValue === "Enrol") {
props.setUpdatedSeats(props.currentSeats - 1);
}
Note: shouldn't "Enrol" be "Enroll" throughout the code.
Internet suggest to use dart sass instead
npm -i sass
For the program radio buttons, the location of the onChange
handler is causing a warning in the console.
When it's on the <li>
holding the radio buttons, the warning raised is this:
You provided a
checked
prop to a form field without anonChange
handler. This will render a read-only field. If the field should be mutable usedefaultChecked
. Otherwise, set eitheronChange
orreadOnly
.
To make the error go away with where we are in the book, move the handler to the inputs:
<li className="parentLabels">
<input
type="radio"
value="UG"
name="programGroup"
checked={isUGChecked}
onChange={handleChange}
/>
Undergraduate
<input
type="radio"
className="radioSel"
value="PG"
name="programGroup"
checked={!isUGChecked}
onChange={handleChange}
/>
Postgraduate
</li>
In Chapter 2, in the "Conditionals and Loops" section...
The first code sample sets the variable isNormalTravelResumed:
let isNormalTravelResumed = false;
but the variable in the if statement drops the "Normal":
if(isTravelResumed === true)
Chapter 3, Page 86 in the main code listing for App.js at the top of the page:
<EnrolmentForm chosenProgram={program} />
but Page 87 shows this in the description:
<EnrolmentForm selectedProgram={program} />
Page 88 shows this:
<h1>{props.selectedProgram} Student Details</h1>
If the reader uses the main listing and not the detail, the program will never show in the H1 tag.
The repo shows chosenProgram for both, not selectedProgram
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.