React JS L1 Hands On

Topic 2 : React JS - Environment Assignment 1 Creat a React program that would render just one greeting message - "Happy Learning - React"

Topic 3 : React JS - JSX Assignment 1 Create a React Program that would render a Heading and also a Table with 5 employee details. The employee details to include are Employee ID, Employee Name and Employee Email ID

Assignment 2 Update the solution of Assignment-1 to style your table. Styling recommendations: Table should have a dashed border of green color and the Table heading columns should have a background color as cyan.

Assignment 3 Create a React Program that would render a Heading and also a Table which shows the multiplication tables of number 5. (Hint: a. 5 X 1 = 5, 5 X 2 = 10 .. Do not hard code the values. Generate them by performing mathematical operations

Topic 4 : React JS - Components & Topic 5: React JS - State Assignment 1 a. The main component is the "Main" component that stores the state information about 5 students like studentld, studentName and studentMarks. b. Another component called "Header" renders a heading as "Student Details" c. Another component called "Details" displays all the student details provided by the "Main" component in the form of a table. d. Finally the main component needs to take care of rendering both the Header and the Details. e. Use ECMAScript => syntax wherever needed. f. You can apply appropriate styling to Heading and Details table as well

Topic 6 : React JS - Props Assignment 1 Create a React program based on the below requirements: a. The main program passes two immutable variables to the "App" component which are "companyName" and "companylocation" and these values gets rendered there in the App component. b. If the main program does not pass these values, then the default values to use for these are: "companyName" = "WIPRO" and "companylocation" = "BANGALORE".

Topic 7 : React JS - Props Validation Assignment 1 Create a React program based on the below requirements: a) The main program passes the below immutable variables to the "App" component which are Name, Preferred cities and Age. b) We need to also apply the below validations to the above passed values: i. Name : Should be string type and is mandatory. ii. Preferred cities: Should be an array type. iii. Age: Should be a number and should be greater than or equal to 18 and less than or equal to 60. c) In case the values do not get passed, then we should use the default values as: Name: Steve, Preferred cities: [Bangalore, Chennai] and Age: 18. d) While testing and executing this app, try to pass values which do not cater to the required validation rules and see how you get warnings in the console (capture these console outputs and submit during assignment submission)

Topic 8 : React JS - Components API Assignment 1 Create a React program based on the below requirements: a. The web page should show a button 'Click to generate Multiplication tables of 5'. When we click on the button, it should start rendering the multiplication tables of 5. Every click should generate one row of the multiplication table. b. So initially the Component in its state maintains an empty array and whenever the click happens, the array is updated with one line of the multiplication table which in turn gets rendered.

Topic 9 : React JS - Component Life Cycle Assignment 1 Create a React program based on the below requirements: a. The React program displays/renders a Div and a paragraph within it which displays a nice thought for the day. b. When we click on the "Div", it should get removed (unmounted). c. Implement all the Component Life Cycle methods like 'ComponentWillMount', 'ComponentDidMount' and 'ComponentWillUnmount' etc to view the order in which these life cycle methods get called.

Topic 10 : React JS - Forms & Topic 11 : React JS - Events Assignment 1 Create a React program based on the below requirements: a. The React program renders a form so that the user can enter his/her individual subject marks for the subjects: Physics, Chemistry, Biology and Mathematics. b. Upon entering of all the details and on click of the button "Find Average", the average of those marks should be displayed as an alert.

Topic 12 : React JS Router Assignment 1 Create a React program based on the below requirements: a. The React program should support "Movie Details Management". b. Movie details will hold details like MovieID, MovieName, LeadActor, LeadActress, YearOfRelease, Language, Collections. c. The Program should support below routes/tasks/operations: i) / -> should display all existing movie details. ii) /MovieID -> should display only about a particular movie. iii) /addMovie -> should provide a form to enter a new movie details and add it to the existing collection.

Setup and Installation:-

-> clone the repository -> npm install -> npm start