JAVA React FULL STACK DEVELOPMENT
Objectives of this Lab Manual This lab manual includes - Exercises for hands on practice Guidelines to complete the exercise Learning Outcome
JavaScript/ TypeScript Basics
Problem Statement What will you do? Write a Program for a file that specifies the compiler options set to commonjs module manager, allowing the use of variables / parameters without types (implicit), removing comments, and compiling es6 to es5 to make it compatible with most browsers. Make sure that the node modules file is excluded.
Solution What will be the steps steps to get the output? • Step-1: Invoke the compilerOptions property • Step-2: Set module manager to commonjs • Step-3: Set target language to es5 • Step-4: Set noImplicitAny to true • Step-5: Set removeComments to true • Step-6: Exclude node modules
Code { \"compilerOptions\": { \"target\":\"es5\", \"module\": \"commonjs\", \"noImplicitAny\": true, \"removeComments\": true, }, \"exclude\": [\"node_modules\"] }
Output Output for the Adedxetercxitsheewreil:l- be :- The tsconfig.json file will successfully fulfill all your compilation needs.
Learning Outcome After Performing AddttheixstEhxeererc:-ise You will be able to configure the compiler for your typescript and javascript projects to your liking
Working with Components
Problem Statement What will you do? Write a Program of React Using javascript and HTML.
Solution What will be the steps steps to get the output? • Step-1: Link the react js file . • Step-2: write main function • Step-3: Write a command to print “Hello React“. • Step-4: Run the code.
Code <!DOCTYPE html> <html> <head> <script src=\"https://unpkg.com/react@18/umd/react.development.js\" crossorigin></script> <script src=\"https://unpkg.com/react-dom@18/umd/react-dom.development.js\" crossorigin></script> <script src=\"https://unpkg.com/@babel/standalone/babel.min.js\"></script> </head> <body> <div id=\"mydiv\"></div> <script type=\"text/babel\"> function Hello() { return <h1>Hello React</h1>; } ReactDOM.render(<Hello />, document.getElementById('mydiv')) </script> </body> </html>
Output Output for the Adedxetercxitsheewreil:l- be :-
Learning Outcome After Performing AddttheixstEhxeererc:-ise You’ll be able to Write to Program on React using javascript and HTML.
Styling React Component
Problem Statement What will you do? Write a program to extract styles out of the component and use inline styling in MyComponent.
Solution What will be the steps steps to get the output? • Step-1: Define the styles in a constant. • Step-2: Create the component function. • Step-3: Write a component by using inline styling, i.e. call the defined styles.
Code const compstyles = { color: 'blue', lineHeight: 10, padding: '1.5em', } function MyComponent(){ return <div style={compstyles}> Inline Styled Component</div> }
Output Output for the Adedxetercxitsheewreil:l- be :- Inline Styled Component <- is displayed in blue color, line height 10 and 1.5em padding.
Learning Outcome After Performing AddttheixstEhxeererc:-ise You will be able to use inline styling to increase the readability of your code and easily style components.
Debugging React App
Problem Statement What will you do? Write a Program to show error message in React
Solution What will be the steps steps to get the output? • Step-1 : We'll call to this state as errorMessage. • Step-2: Now, we simply update the errorMessage state whenever we experience a problem. • Step-3: The error message should then be displayed using React conditional rendering. We may simply use an inline conditional expression to keep things simple: • Step-4: Let's now put everything together. Here is a button that, when pressed, causes the following error to appear:
Code import React from 'react'; import ReactDOM from 'react-dom'; require('./style.css'); function App() { const [errorMessage, setErrorMessage] = React.useState(\"\"); const handleClick = () => { setErrorMessage(\"First Example of Error Message!.\") } return ( <div className=\"App\"> <button onClick={handleClick}>Show error message</button> {errorMessage && <div className=\"error\"> {errorMessage} </div>} </div> ); } ReactDOM.render( <App />, document.getElementById('root') );
Output Output for the Adedxetercxitsheewreil:l- be :-
Learning Outcome After Performing this Add teExtxehrecries:e- You’ll be able to Write to Program to show error message in React.
Sending HTTP Request
Problem Statement What will you do? Write a use EFFECT Program.
Solution What will be the steps steps to get the output? • Step-1: import library files from react • Step-2: Create function with any varibale. • Step-3: Addition of constant in the program. • Step-4: Next using of use EFFECT under function. • Step-5: Then RUN the code.
Code import { useState, useEffect } from \"react\"; import ReactDOM from \"react-dom/client\"; function Timer() { const [count, setCount] = useState(0); useEffect(() => { setTimeout(() => { setCount((count) => count + 1); }, 1000); }); return <h1>I have rendered {count} times!</h1>; } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<Timer />);
Output Output for the Adedxetercxitsheewreil:l- be :-
Learning Outcome After Performing AddttheixstEhxeererc:-ise You’ll be able to Write a Program on Use EFFECT.
React Form
Problem Statement What will you do? Write a Program to create a form using react.
Solution What will be the steps steps to get the output? • Step-1: import React and reactDOM • Step-2: Giver an alert \"your entered age is\" • Step-3: Create a form with input type text with input \"enter your age\".
Code Code of Step1- import { useState } from 'react'; import ReactDOM from 'react-dom/client'; function MyFirstForm() { const [name, setName] = useState(\"\");
Code Code of Step2- const handleSubmit = (event) => { event.preventDefault(); alert(`The name you entered was: ${age}`) }
Code Code of Step3- return ( <form onSubmit={handleSubmit}> <label>Enter your age: <input type=\"text\" value={age} onChange={(e) => setName(e.target.value)} /> </label> <input type=\"submit\" /> </form> ) } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<MyFirstForm />);
Output Output for the Adedxetercxitsheewreil:l- be :-
Learning Outcome After Performing AddttheixstEhxeererc:-ise You’ll be able to write basic programs in Java.
Building Multi-page SPA
Problem Statement What will you do? Write a Program of Adding React Router in application.
Solution What will be the steps steps to get the output? • Step-1: import react library • Step-2: Export the default function • Step-3: Give route path • Step-4: Root the function • Step-5: RUN the file.
Code import ReactDOM from \"react-dom/client\"; import { BrowserRouter, Routes, Route } from \"react-router-dom\"; import Layout from \"./pages/Layout\"; import Home from \"./pages/Home\"; import Blogs from \"./pages/Blogs\"; import Contact from \"./pages/Contact\"; import NoPage from \"./pages/NoPage\"; export default function App() { return ( <BrowserRouter> <Routes> <Route path=\"/\" element={<Layout />}> <Route index element={<Home />} /> <Route path=\"blogs\" element={<Blogs />} /> <Route path=\"contact\" element={<Contact />} /> <Route path=\"*\" element={<NoPage />} /> </Route> </Routes> </BrowserRouter> ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />);
Output Output for the Adedxetercxitsheewreil:l- be :-
Learning Outcome After Performing AddttheixstEhxeererc:-ise You’ll be able to Write to Program of Adding React Router in application.
Micro-frontend
Problem Statement What will you do? Write a Program of Adding React Router in application.
Solution What will be the steps steps to get the output? • Step-1: import react library • Step-2: Export the default function • Step-3: Give route path • Step-4: Root the function • Step-5: RUN the file.
Code import ReactDOM from \"react-dom/client\"; import { BrowserRouter, Routes, Route } from \"react-router-dom\"; import Layout from \"./pages/Layout\"; import Home from \"./pages/Home\"; import Blogs from \"./pages/Blogs\"; import Contact from \"./pages/Contact\"; import NoPage from \"./pages/NoPage\"; export default function App() { return ( <BrowserRouter> <Routes> <Route path=\"/\" element={<Layout />}> <Route index element={<Home />} /> <Route path=\"blogs\" element={<Blogs />} /> <Route path=\"contact\" element={<Contact />} /> <Route path=\"*\" element={<NoPage />} /> </Route> </Routes> </BrowserRouter> ); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />);
Search
